Material UI V5：createTheme Palette 仅适用于主要和次要

Question

我已经创建了一个调色板来传递原色和次要颜色，它可以工作，但是当我尝试传递信息标签时它不会工作。

    palette: {
    mode: 'dark',
    primary: {
        main: darkprimaryColor,
    },
    secondary: {
        main: darksecondaryColor,
    },
    info: {
        main: darkinfoColor,
    },
},

然后在我的 Fab 按钮上传递颜色

    <Fab size="small" variant="extended" color="primary">Share</Fab>
    <Fab size="small" variant="extended" color="secondary">Learn More</Fab>
    <Fab size="small" variant="extended" color="info">Warning</Fab>

颜色为“信息”的按钮无法识别。

另一个问题是如何在主调色板上传递多种颜色，如下所示：

"primary: {
    main: darkprimaryColor,
    darker: darkerprimaryColor,
},"

Answer 1

问题是Fab 只支持颜色primary 和secondary，正如API 文档中所说：https://mui.com/api/fab/#props。

如果您将info 颜色应用于纯Buttons，它将起作用：

<Button color="primary" variant="contained">Button Primary</Button>
<Button color="secondary" variant="contained">Button Secondary</Button>
<Button color="info" variant="contained">Button Info</Button>

您也可以在 Button API 文档中看到这一点：https://mui.com/api/button/#props。

关于设置颜色变体，我可以这样做：

info: {
  main: '#0000bb',
  dark: '#000077',
  light: '#0000ff',
}

（TypeScript 代码提示可以帮助解决这个问题）。