[英]How to setup Material-UI for React with Typescript?
我遇到了一些問題,將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.
添加材質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源導出。
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
你的評論已經指出了核心問題。 打字不是最新的,換句話說:完全關閉。
長話短說,似乎material-ui
的結構material-ui
已經改變,一切都是camelcase(而不是破折號)和root,而不是現在的lib
文件夾。
要解決此問題,請打開material-ui/index.d.ts
文件並開始更改所有內容
declare module 'material-ui/lib/text-field' {
至
declare module 'material-ui/TextField' {
如果不確定,請檢查node_modules/material-ui
文件夾以查看文件結構。 環境模塊名稱必須與基礎文件結構匹配。
這可能不會解決你所有的問題,但它可能是一個開始。
類型現在直接與Material-ui捆綁在一起,因此無需安裝@types/material-ui package
。
相反,您可以正常安裝@material-ui/core
軟件包,它應該可以正常工作。
在這里使用create react app查看官方的Material-UI + Typescript示例: https : //github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript
將這兩個依賴項添加到package.json文件並運行npm install然后啟動。 它對我有用
"@types/material-ui": "^0.21.1", "material-ui": "^0.20.0",
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.