Ich habe einige Probleme beim Hinzufügen von Material UI zu meinem React-Projekt, das mit TypeScript programmiert ist, ausgeführt.
Laut Tutorial füge ich zuerst das React-Tab-Event-Plugin hinzu.
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();
Dabei erhalte ich eine Fehlermeldung über den fehlenden Standardexport.
ERROR in ./src/index.tsx
(4,8): error TS1192: Module ''react-tap-event-plugin'' has no default export.
Hinzufügen der Material-Benutzeroberfläche
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
Löst folgenden Build-Fehler aus
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'.
Mein Webpack Config ist ziemlich einfach und hat bisher mit jedem React npm-Modul gearbeitet, als ich die Eingaben hinzugefügt habe.
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 für beide, das Reaction-Tap-Event-Plugin und die Material-UI sind installiert.
Was ist falsch?
@ types/material-ui ist jetzt verfügbar, exportiert aus seiner DefinitelyTyped-Quelle .
npm install @types/material-ui --save-dev
npm install @types/react-tap-event-plugin --save-dev
Danach können Sie Folgendes tun:
import * as injectTapEventPlugin from 'react-tap-event-plugin';
// Needed for onTouchTap
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();
Dann verwenden Sie die Material-UI wie folgt:
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>
)
}
}
Die MyComponent würde die in den Dokumenten definierte Material-Benutzeroberfläche verwenden:
import RaisedButton from 'material-ui/RaisedButton';
const MyComponent = (props:MyComponentProps) => {
return (
<RaisedButton label="Default" />
)
}
export default MyComponent;
2016-08-08: Antwort aufgrund der Zustandsänderung des Pakets aktualisiert.
2017-01-03: hinzufügen ref. zu @types/qvazzler
Ihr Kommentar hat bereits auf das Kernproblem hingewiesen. Die Typisierungen sind nicht auf dem neuesten Stand oder mit anderen Worten: vollständig aus.
Um es kurz zu machen, scheint die Struktur von material-ui
sich geändert zu haben und alles ist camelcase (anstelle von Bindestrichen) und in root, nicht jetzt im lib
-Ordner.
Um dies zu beheben, öffnen Sie Ihre material-ui/index.d.ts
-Datei und beginnen Sie, alles zu ändern
declare module 'material-ui/lib/text-field' {
zu
declare module 'material-ui/TextField' {
Wenn Sie sich nicht sicher sind, überprüfen Sie Ihren node_modules/material-ui
-Ordner, um die Dateistruktur zu sehen. Der Umgebungsmodulname muss zur zugrunde liegenden Dateistruktur passen.
Dies wird wahrscheinlich nicht alle Ihre Probleme beheben, aber es könnte ein Anfang sein.
Fügen Sie diese beiden Abhängigkeiten zu Ihrer package.json-Datei hinzu, und führen Sie npm install aus und starten Sie dann . Es hat für mich funktioniert
"@types/material-ui": "^0.21.1",
"material-ui": "^0.20.0",
Typen werden jetzt direkt mit Material-ui gebündelt, sodass @types/material-ui package
nicht installiert werden muss.
Stattdessen können Sie das @material-ui/core
-Paket wie gewohnt installieren und es sollte funktionieren.
Sehen Sie sich das offizielle Material-UI + TypeScript-Beispiel mit der Create-Rea-App hier an: https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-TypeScript