如何在 React 和 Typescript 中使用 Material UI 自定义主题

Question

使用这个工具https://react-theming.github.io/create-mui-theme/ 我得到一个 js 文件和一个 json 文件，如上述主题生成器页面中提到的相应路径：

// src/ui/theme/index.js
/* src/ui/theme/theme.json */

现在，当我将文件扩展名留给 js 时，它们可以正常工作。一旦我尝试使用 js 作为 tsx 文件，编辑器就会开始抱怨。我也通过 tsconfig 文件中的 CRA Typescript 完成了所有必要的设置。此页面的必要配置https://material-ui.com/guides/typescript/

当我尝试这个时它不起作用，如果我遗漏了什么有什么想法吗？

// My amended index.tsx file

import { createMuiTheme } from '@material-ui/core/styles';

const palette = {
  primary: { main: '#3f51b5' },
  secondary: { main: '#f50057' }
};
const themeName = 'San Marino Razzmatazz Sugar Gliders';

export default createMuiTheme({ palette, themeName });

我也没有触及 theme.json 。我还在学习抱歉，如果这是一个界面问题以及如何使用它，有什么想法吗？谢谢！

Answer 1

Material UI自定义主题V5

React 中的 Material UI 自定义主题与 Typescript v4->v5 迁移指南。创建单独的文件进行声明。

theme.d.ts

import { Theme, ThemeOptions } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface CustomTheme extends Theme {
    status: {
      danger: string;
    };
  }
  // allow configuration using `createTheme`
  interface CustomThemeOptions extends ThemeOptions {
    status?: {
      danger?: string;
    };
  }
  export function createTheme(options?: CustomThemeOptions): CustomTheme;
}

它将createTheme使用自定义主题配置覆盖默认功能。现在您可以在主题中使用自定义配置，如下所述。

theme.ts

import { createTheme } from '@mui/material/styles';
import { orange, red } from '@mui/material/colors';

const theme = createTheme({
  status: {
    danger: red[500],
  },
  palette: {
    primary: {
      main: orange[500],
    },
  },
});

export default theme;

Answer 2

Material-UI 已经定义了类型声明，所以你不能只是向它添加额外的属性。您必须通过模块扩充来扩展接口：

import { createMuiTheme } from '@material-ui/core/styles';

declare module '@material-ui/core/styles/createMuiTheme' {
    interface ThemeOptions {    
        themeName?: string  // optional
    }
}

const palette = {
  primary: { main: '#3f51b5' },
  secondary: { main: '#f50057' }
};

const themeName = 'San Marino Razzmatazz Sugar Gliders';

export default createMuiTheme({ palette, themeName });

Answer 3

@kasperoo 写的内容却使其更加通用，因为输入样式需要大量工作：

// imported theme from separate file
import { themeDetails } from './utils/theme';

declare module '@mui/material/styles' {
        interface ThemeOptions {
          [key: string]: any; // 
        }
    }
const theme = createTheme({ themeDetails, 'theme name' });

Answer 4

阿米尔的答案对我不起作用，我在使用样式组件时没有类型，所以最终对我有用的是对新接口使用相同的名称并重命名来自 mui 的接口

import { Theme as MUITheme, ThemeOptions as MUIThemeOptions } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface Theme extends MUITheme {
    accent: {
      main: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions extends MUIThemeOptions {
    accent?: {
      main?: string;
    };
  }
  export function createTheme(options?: ThemeOptions): Theme;
}