Search code examples
javascriptcssreactjsmaterial-uimaterial-design

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

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
Solution

  • https://github.com/mui-org/material-ui/issues/24109#issuecomment-751125891

    I solved it by follow this version 5 material ui CSS order injection issue