如何解决资料UI 5中自定义主题中的打字错误？

Question

我们有palette.ts，它包含palette变量中的所有颜色属性并导出。我们在palette.ts中导入了themeProvider.tsx，并使用了。但是，由于自定义属性，我们得到了打字错误，如下图所示。是否有任何方式定义自定义属性的类型。

palette.ts

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

const palette = {
  common: { black: '#000', white: '#fff' },
  primary: { ...PRIMARY },
  secondary: { ...SECONDARY },
  info: { ...INFO },
  success: { ...SUCCESS },
  warning: { ...WARNING },
  error: { ...ERROR },
  grey: GREY,
  gradients: GRADIENTS,
  chart: CHART_COLORS,
  divider: GREY[500_24],
  text: { primary: GREY[800], secondary: GREY[600], disabled: GREY[500] },
  background: { paper: '#fff', default: GREY[100], neutral: GREY[200] },
  action: {
    active: GREY[600],
    hover: GREY[500_8],
    selected: GREY[500_16],
    disabled: GREY[500_80],
    disabledBackground: GREY[500_24],
    focus: GREY[500_24],
    hoverOpacity: 0.08,
    disabledOpacity: 0.48,
  },
  custom: {
    iconBorderRadius: 1,
    iconBorderRadius2: 0.5,
  },
};

export default palette;

themeProvider.tsx

import { createTheme, CssBaseline } from '@mui/material';
import {
  StyledEngineProvider, ThemeProvider as MUIThemeProvider
} from '@mui/material/styles';
import React, { useMemo } from 'react';
import componentsOverride from './overrides';
import palette from './palette';
import shadows, { customShadows } from './shadows';
import typography from './typography';

export default function ThemeProvider({ children }) {
  const themeOptions = useMemo(
    () => ({
      palette,
      shape: { borderRadius: 8 },
      typography,
      shadows,
      customShadows,
    }),
    []
  );
  const theme = createTheme(themeOptions);
  theme.components = componentsOverride(theme);

  return (
    <StyledEngineProvider injectFirst>
      <MUIThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </MUIThemeProvider>
    </StyledEngineProvider>
  );
}

Usage typescript error

​

​

Answer 1

正如mui.com所说：“如果您正在使用TypeScript，您还需要为主题使用模块增强来接受上面的值。”

因此，对于您的情况，需要将这些行添加到您的palette.ts中

interface CustomPalettes {
  custom: {
    iconBorderRadius: number;
    iconBorderRadius2: number;
  };
}
declare module '@mui/material/styles' {
  interface PaletteOptions extends CustomPalettes {}
}
declare module '@mui/material/styles/createPalette' {
  interface Palette extends CustomPalettes {}
}