My theme is unique and I excel in theming. Currently, I have developed three distinct styles using material UI tabs. To modify these styles, I am utilizing makeStyles.
Below is an example of the tab that requires modification:
...
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.pallete.primary
},
tabs: {
/// some styles
}
...
}
));
...
<Tabs
...someProps
className={classes.tabs}
>
The elements inside the tab have specific classes:
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorSecondary Mui-selected MuiTab-labelIcon">
I attempted to edit the styles similarly to:
... = createMuiTHeme ({
overrides: {
...some overrides
}
In my case:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: "#121D42",
MuiButtonBase: {
root: {
///some styles
},
}
},
...
However, this approach does not work with makeStyles(). Therefore, I am seeking a solution to edit buttons inside tabs using makeStyles(), or any other helpful suggestions are appreciated.