IT技术 - 合并材质 UI 主题 - 吾爱随笔录

我在 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);

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

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