Блог

Я пытаюсь оформить вкладки пользовательского интерфейса материалов в своем компоненте react, но, похоже, я могу правильно их применить. Как я могу это сделать? Я хотел бы установить цвет фона и тень рамки для всей панели, а также цвет фона и подчеркивание индикатора для активной вкладки. Спасибо!

Вот что у меня есть до сих пор:

 const routes = ["/tab1", "/tab2"];
  
function MainNavigation() {
  const styles = {
      backgroundColor: "white",
      boxShadow: '0 2px 2px -2px rgba(0,0,0,.2)'
  };

  return (
   <IonToolbar >
      <BrowserRouter >
        <Route
          path="/"
          render={(history) => (
            <div className="toolbar">
              <Tabs 
              TabIndicatorProps={{style: {background:'primary'}}}
              indicatorColor="primary"
              color="primary"
              variant="scrollable"
              scrollButtons="auto"
              aria-label="scrollable auto tabs"
              value={history.location.pathname !== "/" ? history.location.pathname : false}
                  >
                <Tab className="mat-tab"
                  label="Tab1"
                  value={routes[1]}
                  component={Link}
                  to={routes[1]}
                ></Tab>
                <Tab className="mat-tab"
                  label="Tab2"
                  value={routes[0]}
                  component={Link}
                  to={routes[0]}
                ></Tab>
              </Tabs>
             </div>
          )}
        ></Route>
 
        <Switch >
          <Route path="/scutes" component={Tab2}></Route>
          <Route path="/gateways" component={Tab1}></Route>
          <Redirect exact from="/" to="/tab2" />
        </Switch>
      </BrowserRouter>
      </IonToolbar>
  );
}

export default MainNavigation;
function handleTabChange(index: any) {
  throw new Error("Function not implemented.");
}
 

• Импорт в стиле

 import styled from "styled-components";
 

• объявите свои стили

 const NewTab = styled(Tab)`
   font-size: 100px;
`
 

• Используйте новый элемент вместо вкладки по умолчанию

 import styled from "styled-components";

const routes = ["/tab1", "/tab2"];

const NewTab = styled(Tab)`
   font-size: 100px;
`
  
function MainNavigation() {
  const styles = {
      backgroundColor: "white",
      boxShadow: '0 2px 2px -2px rgba(0,0,0,.2)'
  };

  return (
   <IonToolbar >
      <BrowserRouter >
        <Route
          path="/"
          render={(history) => (
            <div className="toolbar">
              <Tabs 
              TabIndicatorProps={{style: {background:'primary'}}}
              indicatorColor="primary"
              color="primary"
              variant="scrollable"
              scrollButtons="auto"
              aria-label="scrollable auto tabs"
              value={history.location.pathname !== "/" ? history.location.pathname : false}
                  >
                <NewTab className="mat-tab"
                  label="Tab1"
                  value={routes[1]}
                  component={Link}
                  to={routes[1]}
                ></NewTab>
                <NewTab className="mat-tab"
                  label="Tab2"
                  value={routes[0]}
                  component={Link}
                  to={routes[0]}
                ></NewTab>
              </Tabs>
             </div>
          )}
        ></Route>
 
        <Switch >
          <Route path="/scutes" component={Tab2}></Route>
          <Route path="/gateways" component={Tab1}></Route>
          <Redirect exact from="/" to="/tab2" />
        </Switch>
      </BrowserRouter>
      </IonToolbar>
  );
}

export default MainNavigation;
function handleTabChange(index: any) {
  throw new Error("Function not implemented.");
}