使用打字稿时属性“theme”不存在

Property 'theme' does not exist when using typescript

提问人:Gerard van der Stelt 提问时间:8/28/2017 更新时间:2/19/2021 访问量:30552

问:

我正在使用 material-ui v1.x beta 的打字稿创建一个 ReactJS 入门项目。

主题如以下部分所述:https://material-ui-1dab0.firebaseapp.com/customization/themes/ 不起作用。Typescript 抱怨属性“theme”不存在。我一直在摆弄 @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 主题 material-ui

评论


答:

1赞 basarat 8/29/2017 #1

<MuiThemeProvider theme={theme}>

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

更多

成为更改并在此处提供修复:https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/material-ui/index.d.ts 作为 PR。

首选 TypeScript 第一个包

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

2赞 mjwrazor 8/30/2017 #2

如果您使用的是 material-ui V1,则不再使用@types类型随包一起提供。只需将 tsconfig 文件指向 和 部分中的 the。"types": "material-ui"node_modules"typeRoots"

"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。

评论

0赞 Gerard van der Stelt 9/7/2017
请注意它确实出了哪里问题,但我按照 Material-UI 网站的示例从头开始,现在一切都按设计工作。正如 mjwrazor 所提到的,不再需要为 material-ui 安装@types。
0赞 SirWojtek 3/4/2018
你救了我的命!从项目一开始,我就一直在为重复的类型而苦苦挣扎。删除可解决编译和编辑器问题。干杯!@types
46赞 Blaine Garrett 1/21/2020 #3

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

例如。改变:

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

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

请参阅此 github 问题,讨论首选导入。我相信前者是与 MUI 3 一起引入的,作为他们正在进行的一些风格转换的临时垫片。

评论

9赞 Liam M 5/23/2020
这解决了我收到的类似错误。谢谢伙计!Property 'spacing' does not exist on type 'DefaultTheme'.
0赞 PeterM 9/8/2021
我遇到了类似的问题 - 不得不替换为 ,并更新相应的 .import { createMuiTheme } from '@material-ui/core'import { createTheme } from '@material-ui/core/styles'declare module
2赞 DevLoverUmar 10/16/2020 #4

@Blaine Garrett 的答案非常好,但我通过使用

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

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

4赞 MaxPower 11/1/2020 #5

这对我有用

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

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

}));