reactjs - 使用 typescript 时属性 'theme' 不存在

Question

我正在使用带有 material-ui v1.x beta 的 typescript 创建一个 ReactJS 入门项目。

主题解释如下:https://material-ui-1dab0.firebaseapp.com/customization/themes/
不工作。 typescript 提示属性“主题”不存在。我一直在摆弄 @types/material-ui 中的 index.d.ts 将界面“muiTheme”替换为“theme”，这导致了很多其他错误。

当使用 'muiTheme' 属性时，错误消失了，但是只使用了默认颜色，表明我的自定义主题根本没有使用。

我的代码:

import * as React from 'react';
import { MuiThemeProvider } from 'material-ui/styles';
import createMuiTheme from 'material-ui/styles/theme';
import createPalette from 'material-ui/styles/palette';
import { teal, bluegrey, red } from 'material-ui/colors';
import Button from 'material-ui/Button';

const theme: any = createMuiTheme({
  palette: createPalette({
    primary: teal, // Purple and green play nicely together.
    accent: {
      ...bluegrey,
      A400: '#00e677',
    },
    error: red,
  }),
});

function Palette() {
  return (
    <MuiThemeProvider theme={theme}>
      <div>
        <Button color="primary">
          {'Primary'}
        </Button>
        <Button color="accent">
          {'Accent'}
        </Button>
      </div>
    </MuiThemeProvider>
  );
}

typescript :

(21,23): error TS2339: Property 'theme' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MuiThemeProvider> & Readonly<{ children?: ReactNod...'.

Answer 1

对于在 2020 年遇到类似错误消息的任何人，我的问题是我从 @material-ui/styles 包中导入了 makeStyles。切换到首选的 @material-ui/core/styles 包为您提供正确的类型。

例如。改变:
import { makeStyles } from '@material-ui/styles';
到
import { makeStyles } from '@material-ui/core/styles';
见 this github issue讨论首选进口。我相信前者是在 MUI 3 中引入的，作为他们正在进行的某些样式转换的临时垫片。