【问题标题】：Property 'theme' does not exist when using typescript使用打字稿时属性“主题”不存在
【发布时间】：2018-02-05 03:33:44
【问题描述】：

我正在使用带有 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>
  );
}

打字稿：

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

【问题讨论】：

标签： reactjs typescript themes material-ui

【解决方案1】：

<MuiThemeProvider theme={theme}>

mui 的类型定义已过期/不正确。如果 mui 是用 TypeScript 编写的，这将不是问题。

首选 TypeScript 优先包

例如blueprintjs，因为它们不会遇到此类问题。更多：https://basarat.gitbooks.io/typescript/content/docs/quick/nodejs.html

【讨论】：

【解决方案2】：

如果您使用的是 material-ui V1，那么您将不再使用 @types，这些类型随包一起提供。只需在 "types": "material-ui" 中将您的 tsconfig 文件指向它，并在 "typeRoots" 部分中添加 node_modules。

例子

"compilerOptions": {
    "typeRoots": [
       "node_modules/@types",
        "node_modules"
    ],
    "types": [
        "node", "jest", "lodash", "react",
        "react-dom", "react-redux", "redux-logger", "material-ui",
        "react-router-dom", "react-router-redux",
        "redux", "binary-type-tree", "redux-form",
        "tedb", "react-tap-event-plugin",
        "react-hot-loader", "material-ui-icons"
    ],
    "outDir": "dist"
},
"include": [
    "src",
    "node_modules/**/*.d.ts",
    "node_modules/@types/**/*.d.ts"
],

这当然会改变您的项目，该项目几乎完全重写，我不得不重新设计我的项目以使用 V1。

【讨论】：

请注意哪里出了问题，但是我按照 Material-UI 网站的示例从头开始，现在一切都按设计工作。正如 mjwrazor 提到的，不再需要为 material-ui 安装 @types。
你在救我的命！从项目一开始，我就一直在与重复的类型作斗争。删除 @types 可解决编译和编辑器问题。干杯！

【解决方案3】：

对于在 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 中引入的，作为他们正在进行的一些样式转换的临时垫片。

【讨论】：

这解决了我收到的类似错误Property 'spacing' does not exist on type 'DefaultTheme'.。谢谢老哥！
我遇到了类似的问题 - 必须将 import { createMuiTheme } from '@material-ui/core' 替换为 import { createTheme } from '@material-ui/core/styles'，并更新相应的 declare module。

【解决方案4】：

@Blaine Garrett 的回答非常好，但我通过使用修复了错误

从“@material-ui/core”导入 { makeStyles }；

因为使用 import { makeStyles } from '@material-ui/core/styles'; 给了我另一个错误。

【讨论】：

【解决方案5】：

这对我有用

import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles((theme: Theme) => ({

}));

【讨论】：