How can I apply styling to Material UI tabs in React?

Question

I am trying to style my material UI tabs in my react component but I can seem to get them applied correctly. How can I do so? I would like to set the background color and box shadow of the entire bar, and and indicator background color and underline for the active tab. Thank you!

Here's what I have so far:

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.");
}

Answer 1

• Import styled

import styled from "styled-components";

• declare your styles

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

• Use new element instead of default Tab

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.");
}