Reactjs 将创建反应应用程序与材质UI一起使用

我不熟悉材质UI和ReactJS。我一直在和他玩。

---

我的问题是，我可以一起使用Material UI和CRA来构建应用程序吗？

首先安装

Material UI

npm install --save material-ui

或

src/App.js

import React, { Component } from 'react';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton'; // add

import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (

      <MuiThemeProvider>

      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        <RaisedButton label="Material UI" />

      </div>

      </MuiThemeProvider>

    );
  }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';

import injectTapEventPlugin from 'react-tap-event-plugin';   // add

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

injectTapEventPlugin();  // add

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

总之，以下是需要做的事情：

• 安装必要的软件包

• 在

  App.js

  中导入

  MuiThemeProvider

  组件，将App div括在MuiThemeProvider组件中

• 现在，您可以导入和使用

  材质ui

  中的任何组件，就像我在这里使用的RaisedButton一样

---

需要0.19.1之前的材质ui版本

react tap event plugin

对于这些版本，您必须在index.js中进行此更改

src/index.js

import React, { Component } from 'react';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton'; // add

import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (

      <MuiThemeProvider>

      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        <RaisedButton label="Material UI" />

      </div>

      </MuiThemeProvider>

    );
  }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';

import injectTapEventPlugin from 'react-tap-event-plugin';   // add

import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

injectTapEventPlugin();  // add

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
从“react-tap事件插件”导入injectTapEventPlugin；//添加
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
injectTapEventPlugin（）；//添加
ReactDOM.render（，document.getElementById（'root'））；
registerServiceWorker（）；

• 从

  index.js中的
  react-tap事件插件导入
  injectTapEventPlugin
  ，并对其进行初始化<按顺序使用代码>injectTapEventPlugin
  删除iOS中的点击延迟

---

谢谢你。有没有一种方法可以使用所有组件而不逐个导入它们？这是入门人员经常遇到的问题。从根本上说，JS的模块范例植根于隔离的、可重用的组件。它们不是可以一次导入的更大生态系统的一部分。这是一个相当大的话题，但简言之，不，你不能在一个语句中导入所有的材料UI。

react-tap-event-plugin

的原因只是解决iOS浏览器问题，而不是解决问题的关键，对吗？根据官方NPM页面，如果您使用的是0.19.0或更高版本，则不需要使用反应点击事件插件。当前文档（2019年9月）显示了如何使用以下方式进行安装：npm install--save@material ui/core。在尝试MaterialUI示例时，使用上述方法会给我带来错误