reactjs 如何将带有覆盖样式的对象传递给createTheme

2izufjch  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(134)

在这个项目中,我使用MaterialUI来设计组件的样式。现在我正在创建一个项目主题。我需要定义覆盖对象来创建主题。我有一个覆盖对象,在其中我覆盖了AppBar的colorPrimary。我需要使用覆盖对象来创建主题。我该怎么做呢?

// TODO: define overrides object to create theme
const overrides = {
  MuiAppBar: {
    colorPrimary: {
      backgroundColor: "#662E9B",
    },
  },
};

const theme = createTheme({});

// TODO: use overrides object to create theme
// const theme =;

export {
  overrides
};
export default theme;
sdnqo3pr

sdnqo3pr1#

这里我将给予两种情况作为答案,因为我不确定您的需求究竟是什么。
场景A:你想用一个新的原色来设计你所有的对象。不仅仅是MuiAppBar,而是把它传播到其他所有的东西,比如按钮,复选框...为此,你应该这样做:

export const theme = createTheme({
    palette: {
        primary: { main: "#662E9B" }
    },
}

其中“#662E9B”是您自定义的原色。MaterialUI将根据您提供的十六进制颜色生成调色板。
场景B:您希望颜色保持不变,但只更改MuiAppBar backgroundColor

const overrides = {
    MuiAppBar: {
        styleOverrides: {
            root: {
                backgroundColor: "#662E9B"
            }
      }
 }

 export const theme = createTheme({
     components: { ...overrides }
 }

现在,对于场景B,如果常量覆盖没有在代码中的其他地方使用,我建议您这样做:

export const theme = createTheme({
     components: {
         MuiAppBar: {
             styleOverrides: {
                root: {
                    backgroundColor: "#662E9B"
                 }
             }
         }

      }
 }


意思是没有必要分开做事。

相关问题