通过材料界面使用Create-React-App [英] Use Create-React-App with Material UI

问题描述

我是Material UI和ReactJS的新手.我一直在玩创建-反应-应用(CRA)和 reactstrap . 我的问题是，我可以同时使用Material UI和CRA来构建应用吗?

I'm new to Material UI and ReactJS. I've been playing around with Create-React-App (CRA) and reactstrap. My question is, can I use Material UI and CRA together to build an app?

推荐答案

首先安装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;

总而言之，这些是要完成的事情:

In summary, these are the things to be done:

• 安装必要的软件包.

• Install necessary packages.

在App.js中导入MuiThemeProvider组件，将app div包含在MuiThemeProvider组件中

import MuiThemeProvider component in App.js, Enclose the app div in MuiThemeProvider component

需要在0.19.1之前的Material-ui版本react-tap-event-plugin

Versions of material-ui before 0.19.1 required react-tap-event-plugin

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

For those versions, you had to do make this change in 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中的点击延迟.
• import injectTapEventPlugin from react-tap-event-plugin in index.js and initialise it. injectTapEventPlugin is used inorder to remove tap delay in iOS.

这篇关于通过材料界面使用Create-React-App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！