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

本文介绍了如何使用Typescript设置React的Material-UI？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我遇到了一些问题，将材质UI添加到我的React项目中，该项目使用Typescript编程。 根据教程，我开始添加反应-tab-event-plugin first。 从'react-tap-event-plugin'导入injectTapEventPlugin; // onTouchTap需要 //当反应1.0发布时可以消失 //检查这个回购： // https://github.com/ zilverline / react-tap-event-plugin injectTapEventPlugin（）; 执行此操作时，我收到有关缺少默认导出的错误。 ./src/index.tsx中的错误（4,8）：错误TS1192：模块''react-tap-event-plugin''没有默认导出。 添加物料UI 从'material-ui / styles / getMuiTheme'导入getMuiTheme; 从'material-ui / styles / MuiThemeProvider'导入MuiThemeProvider; 引发以下构建错误 ./src/containers/index.tsx中的错误（8,25）：错误TS2307：找不到模块'material-ui / styles / getMuiTheme'。 ERROR in ./src/containers/index.tsx （9,30）：错误TS2307：找不到模块'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 JSUnresolvedVariablemodule.exports = {entry：{app：'。/ src / index.tsx'，lib：['。/ node_modules/react/react.js'，'。 / node_modules / react-dom'，'。/ node_modules /normalize.css /normalize.css']}，输出：{path：'。/ dist'，filename：'[name] .js'}，devtool：'source -map'，devServer：{contentBase：'/ dist /'，inline：true，port：3333，host：'0.0.0.0'}，resolve：{//添加`.ts`和`.tsx`作为可解析延期。扩展名：[''，'。webpack.js'，'。web.js'，'。ts'，'。tsx'，'。js'，'。css'，'。html']，modulesDirectories：[' src'，'node_modules']}，module：{loaders：[//所有带有'.ts'或'.tsx'扩展名的文件将由'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：[//所有输出'.js'文件将由'source-map-loader'重新处理任何源图。 {test：/\.js$/,loader：'source-map-loader'}] / * loaders：[{test：/\。js $ /，exclude：/ node_modules /，loader：'babel-loader ！ts-loader'，查询：{presets：['es2015'，'react']}}] * /}，插件：[new ExtractTextPlugin（'[name] .css'，{allChunks：true}）]，postcss ：function（webpack）{return [postcssImport（{addDependencyTo：webpack}），cssnext（{browsers：'last 2 versions，ie> = 9'}）]} //导入路径匹配以下之一的模块时，只是假设存在相应的全局变量并使用它。 //这很重要，因为它允许我们避免捆绑所有//依赖项，这允许浏览器在构建之间缓存这些库。 / * externals：{'react'：'React'，'react-dom'：'ReactDOM'} * /} 安装了react-tap-event-plugin和Material-UI两种类型。 什么是错误？ 解决方案 @ types / material-ui 现在可用，从 DefinitelyTyped source 。 npm install @ types / material-ui --save-dev npm install @ types / react-tap-event-plugin --save-dev 之后，您可以执行以下操作： 从'react-tap-event-plugin'导入*作为injectTapEventPlugin; // onTouchTap需要 //检查此回购： // https://github.com/zilverline/react-tap-event-plugin injectTapEventPlugin（）; 然后像这样使用Material UI： import * as React from'reaction'; 从'material-ui / styles / getMuiTheme'导入getMuiTheme; 从material-ui / styles导入{MuiThemeProvider，lightBaseTheme}; const lightMuiTheme = getMuiTheme（lightBaseTheme）; class Root扩展了React.Component< any，any> { render（）{ return（< MuiThemeProvider muiTheme = {lightMuiTheme}> < MyComponent /> < / MuiThemeProvider> ）} } MyComponent将使用物料UI定义在文档中： 从'material-ui / RaisedButton'导入RaisedButton; const MyComponent =（props：MyComponentProps）=> { return（< RaisedButton label =Default/> ）} 导出默认MyComponent; 2016-08-08：由于州的状态变化，答案已更新包。 2017-01-03：添加参考号。到@types / qvazzler I've run in some problems add Material UI to my React project, which is programmed with Typescript.According to the tutorial, I start with adding the react-tab-event-plugin first.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-plugininjectTapEventPlugin();Doing this, I get an error about the missing default export.ERROR in ./src/index.tsx(4,8): error TS1192: Module ''react-tap-event-plugin'' has no default export.Adding Material UIimport getMuiTheme from 'material-ui/styles/getMuiTheme';import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';Throws following build errorERROR 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'.My Webpack Config is quite easy and did work with every React npm modul when I added the typings, until now.var cssnext = require('postcss-cssnext')var postcssImport = require('postcss-import')var ExtractTextPlugin = require('extract-text-webpack-plugin')// noinspection JSUnresolvedVariablemodule.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' } */}Typing for both, react-tap-event-plugin and Material-UI are installed.What's wrong? 解决方案 @types/material-ui is now available, exported from its DefinitelyTyped source.npm install @types/material-ui --save-devnpm install @types/react-tap-event-plugin --save-devAfterwards, you can do following:import * as injectTapEventPlugin from 'react-tap-event-plugin';// Needed for onTouchTap// Check this repo:// https://github.com/zilverline/react-tap-event-plugininjectTapEventPlugin();Then use Material UI like this: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> ) }}The MyComponent would consume Material UI as defined in the docs:import RaisedButton from 'material-ui/RaisedButton';const MyComponent = (props:MyComponentProps) => { return ( <RaisedButton label="Default" /> )}export default MyComponent;2016-08-08: Answer updated due to state change of the package.2017-01-03: Add ref. to @types /qvazzler 这篇关于如何使用Typescript设置React的Material-UI？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！