我正在尝试使用 MUI 创建替代调色板，根据 api 它会更改我的卡片的背景

Question

我试图让这些颜色根据神奇宝贝的类型交替。

但我不知道怎么... 有什么想法吗！？ 这是我试图创建逻辑的地方

[这里是调色板应该

在里面 播放的地方```< 框 sx={{ bgcolor: 'typecolor.main' }}

<前><代码>

Answer 1

MUI 调色板是可扩展的，但您需要执行一些操作来创建新颜色并将其应用于 Box 组件。

使用自定义颜色变量定义主题。您可以使用 augmentColor() 生成 PaletteColor 这样它就可以在您的 Box 中使用，然后将该新颜色传递到您的组件中

import { red } from "@mui/material/colors";

const { palette } = createTheme();
const theme = createTheme({
  palette: {
    myCustomColor: palette.augmentColor({ color: red }),
    // Use this code if you want to use an arbitrary color
    // myCustomColor: palette.augmentColor({
    //   color: {
    //     main: "#f0000f"
    //   }
    // })
  }
});