Блог

У меня есть пользовательская тема, в которой я добавил пользовательские цвета в палитру. Я надеялся, что цветовой реквизит будет работать с пользовательским цветом. Я тестировал с компонентом Button, и он работал нормально. Однако, когда я попытался сделать то же самое с компонентом Chip, я получил ошибку TypeScript:

 TypeError: Cannot read properties of undefined (reading 'type')
 

И вот как выглядит моя тема:

 const theme = createTheme({
  palette: {
    slate: {
      darker: "#11161A",
      dark: "#1F2932",
      main: "#2E3D49",
      light: "#6D7780",
      lighter: "#B4B9BD",
      lightest: "#F7F7F8",
    }
  }
});

export default theme;

declare module "@mui/material/styles" {
  interface PaletteColor {
    lightest?: string;
    lighter?: string;
    darker?: string;
  }

  interface PaletteOptions {
    slate: any;
  }
}

declare module "@mui/material/Button" {
  interface ButtonPropsColorOverrides {
    slate: true;
  }
}

declare module "@mui/material/Chip" {
  interface ChipPropsColorOverrides {
    slate: true;
  }
}
 

И идеи?

Вы пропускаете contrastText свой пользовательский цвет. Из источника, когда Chip цвет отсутствует default , он использует theme.palette[chipColorProp].main для цвета фона и theme.palette[chipColorProp].contrastText для цвета переднего плана:

 const theme = createTheme({
  palette: {
    slate: {
      darker: '#11161A',
      dark: '#1F2932',
      main: '#2E3D49',
      light: '#6D7780',
      lighter: '#B4B9BD',
      lightest: '#F7F7F8',
      contrastText: '#ffffff', // <------------------ Add this line to fix
    },
  },
});