我遇到了一些问题,将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。
怎么了?
@ 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