我在将 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.
添加 Material 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。
怎么了?
最佳答案
@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
关于javascript - 如何使用 Typescript 为 React 设置 Material-UI?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37186500/