Material ui V5 主题 AppBar 组件覆盖答案

【问题标题】：Material ui V5 theme AppBar component overrideMaterial ui V5 主题 AppBar 组件覆盖
【发布时间】：2021-12-19 19:55:32
【问题描述】：

试用 MUI V5 并使用主题覆盖组件默认样式。

但是当我这样覆盖时：

components: {
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: theme.palette.primary.dark,
        },
      },
    },

它工作正常，并且应用栏默认具有我想要的正确颜色。

但是，当我想通过以下方式更改 Appbar 上的颜色时：

<AppBar color='secondary'> 因为主题样式覆盖是最后加载的，所以它不起作用。

如下图所示，“次要”颜色首先加载，因此没有覆盖主题。

在覆盖主题中的默认应用栏颜色时，实际上阻止颜色属性起作用，我做错了什么？

我也试过这个，它使颜色属性在主题设置颜色后起作用。

components: {
    MuiAppBar: {
      defaultProps: {
        color: 'primary', //but i want primary.dark
      },
    },
  },

但后来我仅限于使用'primary' 并且不能使用theme.palette.primary.dark 来获得我想要的颜色。

Codesandbox 第二个应用栏应该是橙色的，因为它有 color="secondary"

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我认为默认情况下它采用“主要”，除非另有说明。因此，如果您使用colorPrimary 而不是root，那么它将按预期工作。

下面是工作示例：

components: {
    MuiAppBar: {
      styleOverrides: {
        colorPrimary: {
          backgroundColor: theme.palette.primary.dark,
        },
      },
    },

如果您调用<AppBar />，它应该具有您的primary.dark 背景颜色。

如果您调用<AppBar color="secondary" />，它将使用辅助颜色定义覆盖。

这是styleOverrides 的完整类型定义供参考：

export interface AppBarClasses {
    /** Styles applied to the root element. */
    root: string;
    /** Styles applied to the root element if `position="fixed"`. */
    positionFixed: string;
    /** Styles applied to the root element if `position="absolute"`. */
    positionAbsolute: string;
    /** Styles applied to the root element if `position="sticky"`. */
    positionSticky: string;
    /** Styles applied to the root element if `position="static"`. */
    positionStatic: string;
    /** Styles applied to the root element if `position="relative"`. */
    positionRelative: string;
    /** Styles applied to the root element if `color="default"`. */
    colorDefault: string;
    /** Styles applied to the root element if `color="primary"`. */
    colorPrimary: string;
    /** Styles applied to the root element if `color="secondary"`. */
    colorSecondary: string;
    /** Styles applied to the root element if `color="inherit"`. */
    colorInherit: string;
    /** Styles applied to the root element if `color="transparent"`. */
    colorTransparent: string;
}

【讨论】：