Material UI：迁移到版本 5 后 useStyles (makeStyles) 的优先级较低

Question

当我迁移到 Material Ui 版本 5 时，我所有的样式开始具有较低的样式优先级

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

Answer 1

根据官方文件：

@mui/styles 是 MUI 的遗留样式解决方案。它在 v5 中已弃用。它依赖于 JSS 作为样式解决方案，@mui/material 中不再使用 JSS。

注意：@mui/styles与 React.StrictMode 或 React 18 不兼容。

相反，您可以使用The sx propwhich：

是定义可以访问主题的自定义样式的快捷方式。

或者styled()：

用于创建样式组件的实用程序。