合并材质UI主题

David 发表于 Dev

大卫

我在材料UI合并两个主题，就像在解释这个职位。

因此，我定义了以下主题：

palette: {
    primary: {
            main: "#e50380"
        },
        secondary: {
            main: "#000"
        }
    },
    props: {
        MuiButtonBase: {
            disableRipple: true
        },
        MuiButton: {
            disableElevation: true,
            variant: "contained"
        },
    }

第二个来自json文件：

    "palette": {
        "primary": {
            "main": "#06e503"
        },
        "secondary": {
            "main": "#ad976e"
        }
    }

合并：

const theme = createMuiTheme(defaultTheme, userTheme);

它按预期工作。道具继承自第一个主题，颜色被第二个主题覆盖。但是，当我将鼠标悬停在测试按钮上时，使用的是第一个主题的颜色，而不是第二个主题中指定的颜色，为什么？我的期望是，悬停颜色是根据第二个主题中分配的相同颜色计算和使用的？

瑞安·科格斯威尔（Ryan Cogswell）

具有主要或辅助颜色的包含按钮的悬停样式使用theme.palette.primary.dark和theme.palette.secondary.dark。您只是压倒了primary.main和secondary.main。该dark和light变化是由填充在createMuiTheme被调用函数augmentColor。此功能已添加到theme.palette中，以便您可以在自己的代码中使用它。

您可以通过augmentColor以下方式用于使用替代项填充其他颜色：

const muiDefaultTheme = createMuiTheme();
const userTheme = {
  palette: {
    primary: muiDefaultTheme.palette.augmentColor({
      main: "#06e503"
    }),
    secondary: muiDefaultTheme.palette.augmentColor({
      main: "#ad976e"
    })
  }
};