将 Create-React-App 与 Material UI 一起使用

Question

我是 Material UI 和 ReactJS 的新手。我一直在玩 Create-React-App (CRA) and reactstrap。我的问题是，我可以同时使用 Material UI 和 CRA 来构建应用程序吗？

Answer 1

首先安装material-ui

npm install --save material-ui

或

yarn add 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;

总而言之，这些是要做的事情：

安装必要的包。
在App.js中导入MuiThemeProvider组件，在MuiThemeProvider组件
[=50=中封装appdiv ]
现在您可以导入和使用 material-ui 中的任何组件，就像我在此处使用 RaisedButton

0.19.1 之前的 material-ui 版本 required react-tap-event-plugin

对于那些版本，您必须在 index.js

中进行此更改

src/index.js

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();

从 index.js 中的 react-tap-event-plugin 导入 injectTapEventPlugin 并初始化它。 injectTapEventPlugin按顺序使用删除 iOS.

将 Create-React-App 与 Material UI 一起使用

Use Create-React-App with Material UI

reactjs

material-ui

create-react-app