title: How can I apply styling to Material UI tabs in React?
body: <p>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!</p>
  <p>Here's what I have so far:</p>
  <pre><code>const routes = [&quot;/tab1&quot;, &quot;/tab2&quot;];
    
  function MainNavigation() {
    const styles = {
        backgroundColor: &quot;white&quot;,
        boxShadow: '0 2px 2px -2px rgba(0,0,0,.2)'
    };
  
    return (
     &lt;IonToolbar &gt;
        &lt;BrowserRouter &gt;
          &lt;Route
            path=&quot;/&quot;
            render={(history) =&gt; (
              &lt;div className=&quot;toolbar&quot;&gt;
                &lt;Tabs 
                TabIndicatorProps={{style: {background:'primary'}}}
                indicatorColor=&quot;primary&quot;
                color=&quot;primary&quot;
                variant=&quot;scrollable&quot;
                scrollButtons=&quot;auto&quot;
                aria-label=&quot;scrollable auto tabs&quot;
                value={history.location.pathname !== &quot;/&quot; ? history.location.pathname : false}
                    &gt;
                  &lt;Tab className=&quot;mat-tab&quot;
                    label=&quot;Tab1&quot;
                    value={routes[1]}
                    component={Link}
                    to={routes[1]}
                  &gt;&lt;/Tab&gt;
                  &lt;Tab className=&quot;mat-tab&quot;
                    label=&quot;Tab2&quot;
                    value={routes[0]}
                    component={Link}
                    to={routes[0]}
                  &gt;&lt;/Tab&gt;
                &lt;/Tabs&gt;
               &lt;/div&gt;
            )}
          &gt;&lt;/Route&gt;
   
          &lt;Switch &gt;
            &lt;Route path=&quot;/scutes&quot; component={Tab2}&gt;&lt;/Route&gt;
            &lt;Route path=&quot;/gateways&quot; component={Tab1}&gt;&lt;/Route&gt;
            &lt;Redirect exact from=&quot;/&quot; to=&quot;/tab2&quot; /&gt;
          &lt;/Switch&gt;
        &lt;/BrowserRouter&gt;
        &lt;/IonToolbar&gt;
    );
  }
  
  export default MainNavigation;
  function handleTabChange(index: any) {
    throw new Error(&quot;Function not implemented.&quot;);
  }
  </code></pre>