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

Posted 2023-02-22

【中文标题】如何使用 Typescript 为 React 设置 Material-UI？

【英文标题】：How to setup Material-UI for React with Typescript?

【发布时间】：2016-09-08 06:19:18

【问题描述】：

我遇到了一些问题，将 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.

添加材质界面

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 的输入。

怎么了？

【问题讨论】：

我发现的第一件事：Material-UI 当前版本是 v0.15.0 而打字仍然是 v0.14.x

我现在不能测试它，但是一个常见的 TypeScript 修复是import * as injectTapEventPlugin from 'react-tap-event-plugin';。

@neopostmodern 是的，修复了这个错误。

【参考方案1】：

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

您可以照常安装@material-ui/core 包，它应该可以工作。

在此处查看官方 Material-UI + Typescript 示例以及创建反应应用程序：https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript

【参考方案2】：

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

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

【讨论】：

material-ui 已过时，@material-ui/core 有适当的 typescript 支持

【参考方案3】：

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

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

【讨论】：

这里的大部分链接目前都不起作用，包括“打字安装...”

@DwightLisper 这正是我写“小心，这可能是一个临时分支，它可以在未来使用”的原因。 ;)

@RenéStalder 当我这样做时，它总是抛出 material-ui/styles module not found 错误。在导入其他任何东西之前，我必须先明确导入“materialUI”（从“material-ui”导入*作为mui；），这使它工作

@Hitesh.Aneja 但是你现在正在做的是，你导入每个可能导致更大的文件大小和未使用的垃圾的组件（除了 TypeScript 确实删除了未使用的导入，我不知道）。另请参阅 Material UI 的文档。使用正确的类型，您应该能够使用记录的方式。 ***.com/questions/37186500/…

对我来说，导入仅适用于import getMuiTheme from 'material-ui/styles';

【参考方案4】：

您的comment 已经指出了核心问题。打字不是最新的，或者换句话说：完全关闭。

长话短说，material-ui 的结构似乎发生了变化，一切都是驼峰式（而不是破折号）并且在根目录中，而不是现在的 lib 文件夹。

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

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

到

declare module 'material-ui/TextField' 

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

这可能无法解决您的所有问题，但它可能是一个开始。