Material UI: useStyles (makeStyles) has lower priority after migration to version 5

Question

All my styles started to have lower priority in styles when I migrated to version 5 of Material Ui

const useStyles = makeStyles((theme) => ({
    drawer: {
        [theme.breakpoints.down('md')]: {
            width: 0,
        }
    },
    drawerPaper: {
        background: theme.palette.primary.main,
        width: drawerWidth,
    },
}))

Answer 1

Based on official documents:

@mui/styles is the legacy styling solution for MUI. It is deprecated in v5. It depends on JSS as a styling solution, which is not used in the @mui/material anymore.

NOTE: @mui/styles is not compatible with React.StrictMode or React 18.

Instead of that, you can use The sx prop which:

is a shortcut for defining custom style that has access to the theme.

Or styled():

Utility for creating styled components.