如何覆盖React项目中MaterialUI AppBar组件的默认颜色？

你当前使用makeStyles绑定className的写法不生效，核心原因是MUI AppBar内置默认样式的CSS优先级高于外部传入的普通className样式，以下是几种可直接落地的解决方案：

方案1：快速修复现有写法（改动最小） #

直接给自定义背景色样式提升优先级，不需要修改组件结构，仅需在颜色值后加!important覆盖默认样式：

const useStyles = makeStyles({
  appbar:{
    backgroundColor:'#000000 !important',
  }
})
const Navbar = () => {
  const classes = useStyles();
  return (
    <AppBar className={classes.appbar}>
      <Toolbar>

      </Toolbar>
    </AppBar>
  );
}
export default Navbar;

方案2：使用组件内置classes属性（无!important侵入） #

MUI所有组件都提供classes属性用于覆写内部各节点样式，传入根节点样式的优先级高于默认样式，不需要加强制优先级标记：

const useStyles = makeStyles({
  appbar:{
    backgroundColor:'#000000',
  }
})
const Navbar = () => {
  const classes = useStyles();
  return (
    {/* 直接指定root节点样式，权重匹配MUI内部样式规则 */}
    <AppBar classes={{ root: classes.appbar }}>
      <Toolbar>

      </Toolbar>
    </AppBar>
  );
}
export default Navbar;

注意：如果你的AppBar上设置了color="primary"/color="secondary"这类内置颜色属性，需要先移除该属性，否则内置颜色样式会优先加载。

方案3：MUI v5版本推荐写法（无需makeStyles） #

如果你使用的是MUI v5版本，可以直接用组件自带的sx属性写行内样式，不需要额外定义样式钩子，写法更简洁：

const Navbar = () => {
  return (
    <AppBar sx={{ backgroundColor: '#000000' }}>
      <Toolbar>

      </Toolbar>
    </AppBar>
  );
}
export default Navbar;

方案4：全局主题统一配置（适合全项目统一AppBar颜色） #

如果项目中所有AppBar都需要使用该自定义颜色，可以在主题层做全局覆写，不需要每个组件单独写样式：

import { createTheme, ThemeProvider } from '@material-ui/core/styles';

// 自定义主题，覆写AppBar默认样式
const customTheme = createTheme({
  components: {
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: '#000000',
        },
      },
    },
  },
});

// 项目根组件用ThemeProvider包裹，全局生效
// <ThemeProvider theme={customTheme}>
//   <App />
// </ThemeProvider>

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