When using IconButton from @material-ui/core for example in my react app, I applied a className
classes.myCloseButtonstyle, turns out it has low specificity compared to css classes
.css-1743419-MuiButtonBase-root-MuiIconButton-root (see screenshot below).
When I checked the doc here https://next.material-ui.com/components/dialogs/#customized-dialogs
the order is different than what I got in above screenshot. the
classes.myCloseButtonstyle has higher specificity than this
.css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root classes (screenshot below is example code from material ui doc)
what could possibly wrong in my react material ui setup, tho? I need to make the
classes.myCloseButtonstyle win the specificity. No, I mean, I need to make the order of
classes.myCloseButtonstyle be reversed.
styles order from material-ui doc:
syles order in my app:
I need to change the order to be:
I solved it by follow this version 5 material ui CSS order injection issue