如何使用Typescript设置React的Material-UI? [英] How to setup Material-UI for React with Typescript?
问题描述
我遇到了一些问题,将材质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-plugin
injectTapEventPlugin();
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 UI
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
Throws following build error
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'.
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 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'
}
*/
}
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-dev
npm install @types/react-tap-event-plugin --save-dev
Afterwards, 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-plugin
injectTapEventPlugin();
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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!