Подтвердить что ты не робот

Как настроить Material-UI для взаимодействия с Typescript?

У меня возникли проблемы с добавлением Material UI в проект React, который запрограммирован с помощью Typescript.

В соответствии с учебным пособием, я начинаю сначала добавлять плагин action-tab-event-plug-in.

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.

Добавление пользовательского интерфейса материала

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

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

Ответ 1

@types/material-ui теперь доступен, экспортируется из Определеннопостроенный источник.

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 будет потреблять материальный интерфейс, определенный в документах:

import RaisedButton from 'material-ui/RaisedButton';

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

export default MyComponent;

2016-08-08: Ответ обновлен из-за изменения состояния пакета.

2017-01-03: Добавить ref. to @types/qvazzler

Ответ 2

Ваш comment уже указал на основную проблему. Типичные данные не являются актуальными или, другими словами: полностью выключены.

Короче говоря, похоже, что структура material-ui изменилась, и теперь все - верблюд (вместо тире) и в корне, а не в папке lib.

Чтобы исправить это, откройте файл material-ui/index.d.ts и начните изменять все, начиная с

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

к

declare module 'material-ui/TextField' {

Если вы не уверены, проверьте свою папку node_modules/material-ui, чтобы увидеть структуру файла. Имя окружающего модуля должно соответствовать базовой структуре файла.

Вероятно, это не устранит все ваши проблемы, но это может быть начало.

Ответ 3

Добавьте эти две зависимости в ваш файл package.json и запустите npm install, а затем запустите. У меня сработало

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

Ответ 4

Типы теперь связаны напрямую с Material-ui, поэтому нет необходимости устанавливать @types/material-ui package.

Вместо этого вы можете просто установить пакет @material-ui/core как обычно, и он должен работать.

См. Официальный пример Material-UI + Typescript с приложением create response здесь: https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript

Ответ 5

  • Загрузить Material-UI
  • Извлечение в любую папку
  • Откройте Command Prompt и установите путь к /examples/webpack-example
  • Запустите команду npm install в cmd

Примечание # 1:. Прежде чем это сделать, вы должны установить node js в своей системе

Для корпоративного, вам также нужно установить прокси-сервер

npm config set proxy http://proxy.company.com:8080 

npm config set https-proxy http://proxy.company.com:8080

Для справки см. этот Есть ли способ сделать npm install (команда) работать за прокси?

  1. Затем запустите npm start, чтобы он запускал сервер в localhost:3000

Примечание # 2: вы также измените номер своего порта в webpack-dev-server.config.js в корневой папке

Надеюсь, это поможет. Если у вас возникли проблемы с установкой, прокомментируйте здесь