如何使用Typescript设置React的Material-UI？

Question

我遇到了一些问题，将Material UI添加到我的React项目中，该项目使用Typescript编程。

根据教程，我首先添加react-tab-event-plugin。

import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

这样做，我得到一个关于缺少默认导出的错误。

ERROR in ./src/index.tsx
(4,8): error TS1192: Module ''react-tap-event-plugin'' has no default export.

添加材质UI

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

引发以下构建错误

ERROR in ./src/containers/index.tsx
(8,25): error TS2307: Cannot find module 'material-ui/styles/getMuiTheme'.

ERROR in ./src/containers/index.tsx
(9,30): error TS2307: Cannot find module 'material-ui/styles/MuiThemeProvider'.

我的Webpack配置非常简单，并且在我添加打字时，每个React npm模块都可以使用，直到现在。

 var cssnext = require('postcss-cssnext') var postcssImport = require('postcss-import') var ExtractTextPlugin = require('extract-text-webpack-plugin') // noinspection JSUnresolvedVariable module.exports = { entry: { app: './src/index.tsx', lib: [ './node_modules/react/react.js', './node_modules/react-dom', './node_modules/normalize.css/normalize.css' ] }, output: { path: './dist', filename: '[name].js' }, devtool: 'source-map', devServer: { contentBase: '/dist/', inline: true, port: 3333, host: '0.0.0.0' }, resolve: { // Add `.ts` and `.tsx` as a resolvable extension. extensions: [ '', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css', '.html' ], modulesDirectories: ['src', 'node_modules'] }, module: { loaders: [ // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'. { test: /\\.ts(x?)$/, loader: 'babel-loader!ts-loader' }, { test: /\\.html$/, loader: 'file?name=[name].[ext]' }, { test: /\\.json$/, loader: 'json' }, { test: /\\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') } ], preLoaders: [ // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. { test: /\\.js$/, loader: 'source-map-loader' } ] /* loaders: [ { test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader!ts-loader', query: { presets: [ 'es2015', 'react' ] } } ]*/ }, plugins: [ new ExtractTextPlugin('[name].css', { allChunks: true }) ], postcss: function (webpack) { return [ postcssImport({ addDependencyTo: webpack }), cssnext({ browsers: 'last 2 versions, ie >= 9' }) ] } // When importing a module whose path matches one of the following, just // assume a corresponding global variable exists and use that instead. // This is important because it allows us to avoid bundling all of our // dependencies, which allows browsers to cache those libraries between builds. /* externals: { 'react': 'React', 'react-dom': 'ReactDOM' } */ } 

为这两者打字，安装了react-tap-event-plugin和Material-UI。

怎么了？

Answer 1

@ types / material-ui现在可用，从其DefinitelyTyped源导出。

npm install @types/material-ui --save-dev

npm install @types/react-tap-event-plugin --save-dev

之后，您可以执行以下操作：

import * as injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

然后像这样使用Material UI：

import * as React from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {MuiThemeProvider, lightBaseTheme} from "material-ui/styles";

const lightMuiTheme = getMuiTheme(lightBaseTheme);

class Root extends React.Component<any, any> {
  render() {
    return (
      <MuiThemeProvider muiTheme={lightMuiTheme}>
        <MyComponent/>
      </MuiThemeProvider>
    )
  }
}

MyComponent将使用文档中定义的Material UI：

import RaisedButton from 'material-ui/RaisedButton';

const MyComponent = (props:MyComponentProps) => {
  return (
      <RaisedButton label="Default" />
  )
}

export default MyComponent;

2016-08-08：由于包裹的状态变化，答案更新。

2017-01-03：添加参考。 到@types / qvazzler

Answer 2

你的评论已经指出了核心问题。 打字不是最新的，换句话说：完全关闭。

长话短说，似乎material-ui的结构material-ui已经改变，一切都是camelcase（而不是破折号）和root，而不是现在的lib文件夹。

要解决此问题，请打开material-ui/index.d.ts文件并开始更改所有内容

declare module 'material-ui/lib/text-field' {

至

declare module 'material-ui/TextField' {

如果不确定，请检查node_modules/material-ui文件夹以查看文件结构。 环境模块名称必须与基础文件结构匹配。

这可能不会解决你所有的问题，但它可能是一个开始。

Answer 3

类型现在直接与Material-ui捆绑在一起，因此无需安装@types/material-ui package 。

相反，您可以正常安装@material-ui/core软件包，它应该可以正常工作。

在这里使用create react app查看官方的Material-UI + Typescript示例： https ： //github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript

Answer 4

将这两个依赖项添加到package.json文件并运行npm install然后启动。 它对我有用

"@types/material-ui": "^0.21.1", "material-ui": "^0.20.0",