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

Issue

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

Answered By - Khairani F