web-dev-qa-db-fra.com

Comment configurer Material-UI pour React avec Typescript?

J'ai eu quelques problèmes, ajoutez Material UI à mon projet React, qui est programmé avec TypeScript.

Selon le tutoriel, je commence par ajouter le plug-in 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();

En faisant cela, j'obtiens une erreur concernant l'exportation par défaut manquante.

ERROR in ./src/index.tsx
(4,8): error TS1192: Module ''react-tap-event-plugin'' has no default export.

Ajout de l'interface utilisateur

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

Lance l'erreur de construction suivante

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'.

Ma configuration Webpack est relativement simple et fonctionnait avec tous les modules React npm lorsque j’ai ajouté les saisies jusqu’à maintenant.

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'
   }
   */
}

En tapant à la fois, react-tap-event-plugin et Material-UI sont installés.

Qu'est-ce qui ne va pas?

javascriptreactjstypescriptmaterial-ui
22
René Stalder

@ types/material-ui est maintenant disponible, exporté depuis sa source DefinitelyTyped . 

npm install @types/material-ui --save-dev

npm install @types/react-tap-event-plugin --save-dev

Ensuite, vous pouvez faire ce qui suit:

import * as injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

Ensuite, utilisez l’interface matérielle comme ceci:

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>
    )
  }
}

Le MyComponent consomme l’UI de matériau comme défini dans la documentation:

import RaisedButton from 'material-ui/RaisedButton';

const MyComponent = (props:MyComponentProps) => {
  return (
      <RaisedButton label="Default" />
  )
}

export default MyComponent;

2016-08-08: Réponse mise à jour en raison du changement d'état du package.

2017-01-03: Ajouter la réf. à @types/qvazzler

38
René Stalder

Votre commentaire a déjà souligné le problème principal. Les saisies ne sont pas à jour, ou en d'autres termes: complètement éteintes.

En résumé, il semble que la structure de material-ui ait changé et que tout soit en camelcase (au lieu de tirets) et en racine, pas dans le dossier lib pour le moment.

Pour résoudre ce problème, ouvrez votre fichier material-ui/index.d.ts et commencez à tout changer à partir de

declare module 'material-ui/lib/text-field' {

à

declare module 'material-ui/TextField' {

En cas de doute, consultez votre dossier node_modules/material-ui pour voir la structure du fichier. Le nom du module ambiant doit correspondre à la structure de fichier sous-jacente.

Cela ne réglera probablement pas tous vos problèmes, mais cela pourrait être un début.

1
neo post modern

Ajoutez ces deux dépendances à votre fichier package.json et exécutez l’installation de npm, puis démarrez . Cela a fonctionné pour moi.

"@types/material-ui": "^0.21.1", "material-ui": "^0.20.0",

0
Ratnesh Chauhan

Les types sont maintenant fournis directement à Material-ui. Il n'est donc pas nécessaire d'installer @types/material-ui package.

Au lieu de cela, vous pouvez simplement installer le paquet @material-ui/core comme d'habitude et cela devrait fonctionner.

Voir l'exemple officiel Material-UI + TypeScript avec l'application create react ici: https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-TypeScript

0
bhish