React MUI5 typescript 主题调色板无法覆盖主要/次要

Question

我的设计团队制作了很多自定义调色板和额外的属性。这在 JS 中不是问题，但在 TS 中却是一个难题。我得到了它，不会在这个 createTheme 文件中抛出错误，但我不能将它用作

theme.palette.primary.hover

。好像没有被覆盖。

这是创建主题部分

export const paletteTheme = createTheme({
  palette: {
    mode: "light",
    text: {
      primary: ...,
      secondary: ...,
      disabled: ...,
      hovered: ...,
      selected: ...,
      focused: ...,
      focusVisible: ...,
      white: ...,
    },
    primary: {
      main: ...,
      light: ...,
      dark: ...,
      hover: ...,
      selected: ...,
      focus: ...,
      focusVisible: ...,
      outlineBorder: ...,
    },
    black: augmentColor({color: {main: ...}})
   }
});

declare module "@mui/material/styles" {
  interface CustomColorOptions { //I also tried straight-up override interface PaletteColorOptions, it made no difference
    main?: string;
    light?: string;
    dark?: string;
    hover?: string;
    selected?: string;
    focus?: string;
    focusVisible?: string;
    outlineBorder?: string;
  }

  interface CustomPalette {
    black?: CustomColorOptions;
  }

  interface TypeText { //extra properties
    white?: string;
    hovered?: string;
    selected?: string;
    focused?: string;
    focusVisible?: string;
  }

  interface Palette extends CustomPalette {}
  interface PaletteOptions extends CustomPalette {}
  interface PaletteColorOptions extends CustomColorOptions {} //This overwrites primary/secondary color options
}

在此代码中。

• theme.palette.text.white

  有效。

• theme.palette.black.hover

  有效。

• theme.palette.primary.hover

  不起作用。

我有点困惑该怎么办。

Answer 1

您应该使用

theme.palette.common

属性来使颜色可访问，然后您可以通过

color='common.whatever'

获取它们。

但是，这些颜色仅适用于通过

styled

函数传递的组件。

const theme = createTheme({
   palette: {
     common: {
        whatever: '#ff0000',
     },
   },
  })