MUI V5主题覆盖AppBar默认样式后color属性不生效如何解决？

解决方案 #

直接修改theme中MuiAppBar的styleOverrides配置，通过ownerState判断仅在AppBar使用默认primary色值时覆盖背景色即可，具体配置如下：

components: {
    MuiAppBar: {
      styleOverrides: {
        root: ({ ownerState, theme }) => ({
          // 仅color属性为默认的primary时，才替换为primary.dark
          ...(ownerState.color === 'primary' && {
            backgroundColor: theme.palette.primary.dark
          })
        }),
      },
    },
}

原理解释 #

你之前的配置是给所有AppBar的根元素强制设置背景色，样式优先级高于color属性对应的专属类，所以无论传什么color值都会被覆盖。
新增ownerState判断后，只有当你没有主动给AppBar传color属性（默认值为primary）时，才会应用自定义的primary.dark背景；一旦你主动传了color="secondary"这类自定义值，就不会命中覆盖规则，原生color属性的样式会正常生效。

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