合并 Material UI 个主题

Question

我正在合并 Material 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);

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

Answer 1

具有主要或次要颜色的包含按钮的悬停样式利用 theme.palette.primary.dark and theme.palette.secondary.dark. You are only overriding primary.main and secondary.main. The dark and light variations are filled in by createMuiTheme by a function called augmentColor. This function gets added to theme.palette，以便您可以在自己的代码中使用它。

您可以使用 augmentColor 按照以下方式在覆盖中填充其他颜色：

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

合并 Material UI 个主题

Merge Material UI themes

themes

reactjs

material-ui