MUI：扩展颜色问题

Question

这是我的颜色：

import { PaletteOptions } from "@mui/material/styles";

export const palette: PaletteOptions = {
    primary: {
      50: "#FFF5FA",
      100: "#FFEBF5",
      200: "#FED7EB",
      300: "#FCBADC",
      400: "#FC8CC6",
      500: "#FE6CB7",
      600: "#FD4FA8",
      700: "#C93B84",
      800: "#AD296D",
      900: "#8F1E59"
    },
    secondary: {
      50: "#FAFAFA",
      100: "#F4F4F5",
      200: "#E4E4E7",
      300: "#D1D1D6",
      400: "#A0A0AB",
      500: "#70707B",
      600: "#51525C",
      700: "#3F3F46",
      800: "#26272B",
      900: "#18181B"
    },
    error: {
        50: "#FEF3F2",
        100: "#FEE4E2",
        200: "#FECDCA",
        300: "#FDA29B",
        400: "#F97066",
        500: "#F04438",
        600: "#D92D20",
        700: "#B42318",
        800: "#912018",
        900: "#7A271A"
    },
    background: {
      default: '#FFFFFF',
      paper: '#AAA 2.11',
    },
    grayIron: {
      50: "#FAFAFA",
      100: "#F4F4F5",
      200: "#E4E4E7",
      300: "#D1D1D6",
      400: "#A0A0AB",
      500: "#70707B",
      600: "#51525C",
      700: "#3F3F46",
      800: "#26272B",
      900: "#18181B"
    },
  }

1. 第一个问题：它不允许我像这样声明次要颜色，它强制我使用原色、浅色和深色，为什么？它告诉我MUI：提供给augmentColor(color)的颜色（辅助）无效。 颜色对象需要具有

   main

   属性或

   A400

   属性，但我的设计师只为我提供了这些色调。
2. 我无法使用 GrayIron.50 或 secondary.light 作为我的 AppBar 的颜色（这不仅仅是打字稿问题），为什么？

Answer 1

您需要为 createTheme 提供自定义调色板 - 单独创建调色板是行不通的，并且不会使您的调色板可用于 MUI 组件。

参考 MUI 文档中的此部分，您可能会执行以下操作：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    grayIron: {
      50: "#FAFAFA",
      100: "#F4F4F5",
      200: "#E4E4E7",
      300: "#D1D1D6",
      400: "#A0A0AB",
      500: "#70707B",
      600: "#51525C",
      700: "#3F3F46",
      800: "#26272B",
      900: "#18181B"
    },
  },
});

// In your top level file, where your theme provider is located, use your new custom theme:
<ThemeProvider theme={theme}>...</ThemeProvider>