Material-ui style type override - css

Question

I'd like to modify MuiIconButton-root class when I use MuiSvgIcon with fontSizeSmall.
import React from 'react'
import { createMuiTheme, ThemeProvider } from '#material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
MuiSvgIcon: {
fontSizeSmall: {
padding: "5px"
}
}
}
});
export default function Root(props) {
return (
<ThemeProvider theme={theme}>
<MyApp />
</ThemeProvider>
)
}
I've modified MuiSvgIcon, but it can't modify MuiButtonBase-root.
Is there any way to override the padding value of MuiIconButton-root when I use small MuiSvgIcon?
Following the picture:

Answer 1

yes you can override the style of root like this, I am not creating your exact scenario but I am going to show you the same functionality with a button from Material UI, first get all the files needed:
npm install #material-ui/styles
npm install #material-ui/core
and then:
//other react imports
import { makeStyles, withStyles } from '#material-ui/core/styles'; //you need to include this to change the style
import Button from '#material-ui/core/Button'; //this is just the button
const useStyles = theme => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
button: {
fontSize: "16px",
fontWeight: "600",
textAlign: "center",
border: "none",
cursor: "pointer",
color: "#fff",
backgroundColor: "#C8385E"
}
});
class Welcome extends React.Component {
render() {
return (<div>
<Button
className={classes.button}
variant="contained" component="span">
BUTTON TEXT
</Button>
</div>);
}
}
export default withStyles(useStyles)(Welcome);
you need to export the class like shown above, include the "withStyles" and pass in the styles that you have, here its called "useStyles" and then pass the class name. this way you can edit the styles in the UseStyles and it will actually show those changes on the screen.