[英]Use Create-React-App with Material UI
I'm new to Material UI and ReactJS. 我是Material UI和ReactJS的新手。 I've been playing around with Create-React-App (CRA) and reactstrap .
我一直在玩Create-React-App(CRA)和reactstrap 。 My question is, can I use Material UI and CRA together to build an app?
我的问题是,我可以同时使用Material UI和CRA来构建应用程序吗?
First install material-ui
首先安装
material-ui
npm install --save material-ui
or 要么
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. 安装必要的软件包。
import MuiThemeProvider
component in App.js
, Enclose the app div in MuiThemeProvider component 在
App.js
导入MuiThemeProvider
组件,在MuiThemeProvider
组件中App.js
app div
material-ui
like I used RaisedButton here material-ui
导入和使用任何组件 Versions of material-ui before 0.19.1 required react-tap-event-plugin
0.19.1之前的material-ui版本需要
react-tap-event-plugin
For those versions, you had to do make this change in index.js 对于那些版本,您必须在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();
injectTapEventPlugin
from react-tap-event-plugin
in index.js
and initialise it. index.js
react-tap-event-plugin
导入injectTapEventPlugin
并将其初始化。 injectTapEventPlugin
is used inorder to remove tap delay in iOS. injectTapEventPlugin
来消除iOS中的点击延迟。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.