React MUI V5 使用makeStyles修改AppBar背景色不生效如何解决

根本原因 #

MUI v5 中 @mui/styles 属于遗留样式方案，默认生成的CSS类优先级低于 @mui/material 组件内置的emotion样式，你绑定到AppBar上的自定义类的背景色属性，被AppBar内置的主题色样式规则覆盖，所以不生效。

可行解决方案（均保留makeStyles使用方式） #

方案1：提升自定义样式权重 #

在makeStyles规则中组合AppBar的内置类名选择器，提高样式权重，无需修改全局配置：

const useStyles = makeStyles({
  root: {
    "&.MuiAppBar-root": {
      backgroundColor: "#fff",
    }
  },
});

方案2：添加!important标记 #

写法最简单，适合临时快速调整样式：

const useStyles = makeStyles({
  root: {
    backgroundColor: "#fff !important",
  },
});

方案3：全局调整样式注入顺序 #

如果项目中大量使用@mui/styles的makeStyles方案，可以在应用入口修改注入配置，一次性让所有makeStyles的样式优先级高于组件内置样式：

1. 入口文件（通常为index.js）导入StylesProvider：

import { StylesProvider } from '@mui/styles';

2. 用StylesProvider包裹根组件，开启injectFirst配置：

ReactDOM.createRoot(document.getElementById('root')).render(
  <StylesProvider injectFirst>
    <App />
  </StylesProvider>
);

配置完成后你原有代码不需要做任何修改即可生效。

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