Css className has low specifity than css classes from material-ui v5

user_10811003 0
Viewed 923

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).

extra material-ui classes

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)

icon button from official material-ui v5

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 .css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root and classes.myCloseButtonstyle be reversed.

styles order from material-ui doc:

  1. classes.myCloseButtonstyle

2..css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root

syles order in my app:

  1. .css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root
  2. classes.myCloseButtonstyle

I need to change the order to be:

  1. classes.myCloseButtonstyle
  2. .css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root
material-design material-ui reactjs css javascript
3 Answers

To increase the priority of a CSS class you need to increase the specificity of a class.

check this doc to increase specificity

Mean while to solve your issue try button.myCloseButtonstyle in your css file to increase the class priority.

user_15026150

You can increase specificity by specifying path:

div > div > buttonm.makeStyles-myCloseButtonStyle-23

or simply repeating class:

div > div > buttonm.makeStyles-myCloseButtonStyle-23.makeStyles-myCloseButtonStyle-23

As w3org says:

Note: Repeated occurrences of the same simple selector are allowed and do increase specificity.

user_16462400
user_108110030
Related