Material UI V5：在主调色板中的 createTheme 上传递多个变体答案

【问题标题】：Material UI V5: Pass multiple variants on createTheme in primary paletteMaterial UI V5：在主调色板中的 createTheme 上传递多个变体
【发布时间】：2022-01-21 00:15:24
【问题描述】：

我有两个主题，darkcustomtheme：

export const darkcustomTheme = createTheme({

palette: {
    mode: 'dark',
    primary: {
        main: darkprimaryColor,
        dark: grey[100],
        light: grey[200],
    },
    secondary: {
        main: darksecondaryColor,
    },
    info: {
        main: darkinfoColor,
    }
},

还有 lightcustomTheme：

    palette: {
    mode: 'light',
    primary: {
        main: lightprimaryColor,
        dark: orange[100],
        light: orange[200],
    },
    secondary: {
        main: lightsecondaryColor,
    },
    info: {
        main: lightinfoColor,
    },
},

然后我使用 ThemeProvider 根据一个开关按钮的状态来改变主题：

<ThemeProvider theme={theme ? darkcustomTheme : lightcustomTheme}>

问题是我无法在按钮上的 customTheme 的主调色板上传递变体深色和浅色。我在想类似的东西

<Button size="small" variant="extended" color="primary.dark">Warning</Button>

但这不行，我不能创建一个自定义组件只在这个按钮中传递，因为我使用了两个customTheme，所以我严格需要传递像color="primary.dark"这样的属性

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您必须使用此解决方案。

const theme = createMuiTheme({
   palette: {
      type: dark ? 'dark' : 'light',
   },
})

并使用：

<ThemeProvider theme={theme}>

更多信息请阅读文章： easily toggle between light and dark theme with material ui

【讨论】：

这使用了材质UI的默认颜色，我正在创建自己的明暗模式自定义调色板，这只会改变调色板的类型

【解决方案2】：

const theme = createMuiTheme({
   palette: {
      type: dark ? 'dark' : 'light',
      primary: {
        main: dark ? darkprimaryColor : lightprimaryColor,
        dark: dark ? grey[100] : orange[100],
        light: dark ? grey[200] : orange[200],
    },
    secondary: {
        main: dark ? darksecondaryColor : lightsecondaryColor,
    },
    info: {
        main: dark ? darkinfoColor : lightinfoColor,
    }
   },
})

【讨论】：

但是我如何在按钮上传递主调色板的变暗？比如： ?

【解决方案3】：

我不需要在主调色板中创建深色和浅色主题，它会自动根据主色创建一组。

【讨论】：