更多

Question

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

主题如：https://material-ui-1dab0.firebaseapp.com/customization/themes/ 不工作。打字稿抱怨房产'主题'不存在。我一直在摆弄@ 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...'.

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引入的，是他们正在进行的某些样式转换的临时填充。

Answer 2

如果您正在使用material-ui V1，那么您不再使用@types类型随包一起提供。只需在"types": "material-ui"中将tsconfig文件指向该文件，并在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。

Answer 3

<MuiThemeProvider theme={theme}>

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

首选TypeScript第一个包

e.g。 blueprintjs因为他们没有遭受这样的问题。更多：https://basarat.gitbooks.io/typescript/content/docs/quick/nodejs.html

Answer 4

@Blaine Garrett的回答非常好，但我通过使用

修复了错误

从'@ material-ui / core'导入{makeStyles};

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

Answer 5

这对我有用

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

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

}));

使用typescript时，属性'theme'不存在

5 个答案:

更多

首选TypeScript第一个包