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

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