I need help styling my material UI tabs within a react component. I am having trouble getting the styles applied correctly, specifically setting the background color and box shadow of the entire bar, as well as defining the indicator background color and underline for the active tab. Any guidance would be appreciated!
Here is my current code snippet:
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.");
}