javascript - 如何在 React with 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 已经定义了类型声明，因此您不能只为其添加额外的属性。您必须通过模块扩充来扩展接口(interface):

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 });