如何为带有Typescript的React设置Material-UI？

小编典典

如何为带有Typescript的React设置Material-UI？

reactjs

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

根据教程，我首先添加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 Config非常简单，直到我添加类型时，它都可以处理每个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。

怎么了？

阅读 337

2020-07-22

共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将使用docs中定义的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

2020-07-22