Я новичок в Material UI и ReactJS. Я играл с Create-React-App (CRA) и реакцией. Мой вопрос в том, могу ли я использовать материальный интерфейс и CRA для создания приложения?
Использование Create-React-App с материальным интерфейсом
Ответ 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;
Таким образом, это то, что нужно сделать:
-
Установите необходимые пакеты.
-
импортировать компонент
MuiThemeProvider
вApp.js
,App.js
приложение div в компонент MuiThemeProvider - Теперь вы можете импортировать и использовать любой компонент в
material-ui
как я использовал RaisedButton здесь
Версии материала-ui до 0.19.1 требовали плагина-ответ 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();
- импортируйте
injectTapEventPlugin
изinjectTapEventPlugin
react-tap-event-plugin
вindex.js
и инициализируйте его.injectTapEventPlugin
используется для удаления задержки отвода в iOS.
Ответ 2
Для первого этапа установки мне нужно сделать это, чтобы он работал: npm install --save material-ui axios action-tap-event-plugin