无法在 TypeScript 中自定义 Material UI 主题的调色板类型

Question

我创建一个类型接口来将自定义属性添加到调色板，如下所示：

declare module @material-ui/core/styles/createMuiTheme {
  interface PaletteColor {
    transparent?: string;
    gradient?: PaletteColor;
  }
  interface Palette {
    gradient?: PaletteColor;
    transparent?: PaletteColor;
    secondary?: {
      transparent?: string;
    }
  }

  interface PaletteColorOptions {
    main?:string;
    dark?:string;
    light?:string;
    transparent?: string;
    gradient?: string;
    test?: string
  }
}

我正在尝试很多接口来让它工作......

然后我在我的主题中使用这些类型，如下所示：

export default function createMyTheme(options: ThemeOptions) {
    return createMuiTheme({
      ...options,
    })
  }

我使用该函数通过导入并调用它来创建我的主主​​题：

const theme = createMyTheme({});

然后我像这样设置组件样式：background：theme.palette.gradient.main，

它告诉我：

Property 'gradient' does not exist on type 'Palette'.

环境：“@material-ui/core”：“^4.9.2”，“react”：“^16.12.0”，“typescript”：“^3.7.5”

这是我的完整主题：

const theme = createMyTheme({
  palette: {
    primary: {
      main: '#5FB9A6',
      dark: 'linear-gradient(-68deg, #151E27 , #335850)',
      gradient: 'linear-gradient(-68deg, #151E27 , #335850)'
    },
    secondary: {
      main: '#C68A77',
      transparent: 'rgba(198, 138, 119, 0.7)'
    },
    error: {
      light: '#e5a0a0',
      main: '#CD5C5C',
      dark: '#992c2c',
    },
    text: {
      primary:'#20383C',
      secondary: '#151E27',
      hint: 'rgba(32, 56, 60, 0.7)'
    },
    background: {
      paper: '#fff'
    },
    common: {
      white: "#FFF"
    }
  },
  typography: {
     fontFamily: '"Work Sans"'
  }

任何帮助将不胜感激！谢谢！

Answer 1

根据文档，您需要module augmentation将自定义属性添加到调色板。

我所做的是：

expanded-theme.ts在根目录中创建一个文件（与所在目录相同App.tsx）

import '@material-ui/core/styles';

declare module '@material-ui/core/styles/createPalette' {
  interface Palette {
    myCustomColor?: Palette['primary'];
  }
  interface PaletteOptions {
    myCustomColor?: PaletteOptions['primary'];
  }
}

接下来，您可以在主题中定义自定义属性（我不需要导入expanded-theme.ts）

import React from 'react';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';

// ...

const theme = createMuiTheme({
  palette: {
    myCustomColor: {
      main: 'blue'
    }
  }
});

// ...

<MuiThemeProvider theme={theme}>

//...

myCustomColor现在您可以在您的样式中使用:)。

Answer 2

这似乎对我来说适用于 MUI v5，添加了额外的自定义颜色“第三级”

import {
  createTheme,
  responsiveFontSizes,
} from "@mui/material/styles";

    
declare module "@mui/material/styles" {
  interface BreakpointOverrides {
    xs: true;
    sm: true;
    md: true;
    lg: true;
    xl: true;
    mobile: true;
    tablet: true;
    laptop: true;
    desktop: true;
  }
  interface Palette {
    tertiary: Palette["primary"];
  }
  interface PaletteOptions {
    tertiary?: PaletteOptions["primary"];
  }
  interface PaletteColor {
    lighter?: string;
    darker?: string;
  }
  interface SimplePaletteColorOptions {
    lighter?: string;
    darker?: string;
  }
}

let theme = createTheme({
  palette: {
    primary: {
      lighter: "#F2D383",
      light: "#6E5B54",
      main: "#60504a",
      dark: "#614941",
      darker: "#473630",
    },
    secondary: {
      lighter: "#F5F5F5",
      light: "#f7f7f7",
      main: "#e7e7e7",
      dark: "#787878",
      darker: "#2e2e2e",
    },
    tertiary: {
      main: "#ff0000",
      contrastText: "#787878",
    },
    background: {
      default: "#e7e7e7",
    },
    text: {
      primary: "#5F5049",
    },
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536,
      mobile: 0,
      tablet: 640,
      laptop: 1200,
      desktop: 1600,
    },
  },
});

theme = createTheme(theme, {
  components: {
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: theme.palette.tertiary,main,
        },
      },
    },
  },
});

theme = responsiveFontSizes(theme);

export default theme;