- I'm struggling to override the CSS in material UI.
- Even though I tried capitalizing both words, it only changes on selected and hover states,
- Is there a way to change it in the normal state as well?
- I've tried debugging but can't seem to find the issue.
- Could you please advise me on how to resolve this?
- Below is my code snippet and sandbox link for reference.
https://codesandbox.io/s/2pomwq2z20
const styles = theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper
},
tabsIndicator: {
backgroundColor: "red",
textTransform: "capitalize"
},
tabRoot: {
"&:hover": {
color: "red",
opacity: 1,
textTransform: "capitalize"
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium,
textTransform: "capitalize"
},
"&:focus": {
color: "red",
textTransform: "capitalize"
}
},
tabSelected: {}
});