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.

Answer 2

I prefer to use tss-react rather than other ways when I use @mui-v5. I've followed a way that makes useStyle priority over @mui component :) this code works for me, try it out:

import createCache from "@emotion/cache";
import { makeStyles } from 'tss-react/mui';
import Button from '@mui/material/Button';
import ThemeProvider from '@mui/material/styles/ThemeProvider';

export const muiCache = createCache({
    key: 'mui', // all material ui classes start with 'css' instead of 'mui' even with this here
    prepend: true,
});

const App = () => {
    return (
        // if you want to use theme, try write that component here, for example:
        // <MyTheme>
            <CacheProvider value={muiCache}>
                <MyApp />
            </CacheProvider>
        // </MyTheme>
    );
};

const useStyles = makeStyles()((theme, props) => ({
    mobileButton: {
        height: 40,
        background: theme.palette.primary.main
    }
}));

const MyTheme = (props) => {
    // const mainTheme = anything...;
    return <ThemeProvider theme={mainTheme}>{props.children}</ThemeProvider>;
};

const MyApp = (props) => {
    const {classes, cx} = useStyles(props);
    return (
        // use cx rather than clsx
        <Button className={cx(classes.mobileButton)}>
            click on me!
        </Button>
    );
};