I'm currently exploring how to override Material UI styles with a nested component. For instance, what if I want to increase the bottom border height on an active Tab, which is applied by the underlying ButtonBase.
Below is the style definition:
const useStyles = makeStyles(theme => ({
root: {
// A quick example of overriding, but not the cleanest. Is there a better way to handle the button?
"& .MuiSvgIcon-root": {
marginRight: "8px"
}
},
// Overriding Tab styles
tabWrapper: {
flexDirection: "row"
},
tabSelected: {
color: theme.palette.primary.main
},
tabLabelIcon: theme.mixins.toolbar, // Same minHeight as toolbar
// TODO override buttonBase ???
// ...
}));
Here's an example of usage:
<Tab
value="/"
classes={{
wrapper: classes.tabWrapper,
selected: classes.tabSelected,
labelIcon: classes.tabLabelIcon
}}
icon={
<React.Fragment>
<DashboardIcon />
</React.Fragment>
}
label="Home"
// TODO: Is this the correct syntax? TypeScript doesn't seem to like this prop...
buttonBaseProps={{ classes: {} }}
/>
I'm unsure how to define the classes for ButtonBase in this scenario.
What should my props look like to override the style of ButtonBase?
Edit: The documentation can be found here https://material-ui.com/api/tab/. The last section describes the inheritance process, but it's quite concise.
Edit 2: The example use case might not be perfect, as we should actually be overriding ".MuiTabs-indicator" to adjust the bottom border height (which is actually an additional span, not a border). However, the question remains the same. Imagine I wanted to change the background-color of the ButtonBase.