Material UI迁移到v5版本后useStyles(makeStyles)样式优先级降低问题

问题原因 #

Material UI v5 改用 Emotion 作为默认样式引擎，官方提供的 @mui/styles 兼容包中的 makeStyles 生成的样式默认注入顺序晚于 MUI 内置组件样式，导致自定义样式权重低于内置样式被覆盖。

解决方案 #

方案1：调整样式注入顺序（最便捷的兼容方案） #

在应用根节点外层包裹 StyledEngineProvider 并开启 injectFirst 属性，让 MUI 内置样式优先注入，后续 makeStyles 生成的自定义样式优先级会自动高于内置样式：

import { StyledEngineProvider } from '@mui/material/styles';

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <App />
  </StyledEngineProvider>,
  document.getElementById('root')
);

修改后原有的 makeStyles 代码不需要做任何调整即可生效。

方案2：手动提升自定义样式权重 #

如果不想修改根节点配置，可以在 makeStyles 的样式规则前加 && 提高 CSS 选择器权重，强制覆盖内置样式：

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

方案3：迁移到v5官方推荐的样式方案（长期最优） #

@mui/styles 是v5的过渡兼容包，后续版本会被移除，建议迁移到 styled 组件或者 sx 属性实现自定义样式，不需要额外处理优先级问题：

// 用styled实现drawerPaper样式
const DrawerPaper = styled(Drawer)(({ theme }) => ({
  background: theme.palette.primary.main,
  width: drawerWidth,
}));

内容的提问来源于stack exchange，提问作者Yaroslav Shypunov