我是Material UI和ReactJS的新手。我一直在玩Create-React-App (CRA)和reactstrap。 我的問題是,我可以使用Material UI和CRA一起構建應用程序嗎?使用Create-React-App和Material UI
11
A
回答
32
首先安裝material-ui
npm install --save material-ui react-tap-event-plugin
或
yarn add material-ui react-tap-event-plugin
這些文件,你應該換作material-ui
工作,CRA
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();
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;
總之,這些都是要做的事:
- 安裝必要的軟件包。
- 進口
injectTapEventPlugin
從react-tap-event-plugin
在index.js
並初始化它。injectTapEventPlugin
用於中 刪除iOS中的輕拍延遲。在App.js
- 進口
MuiThemeProvider
組件,請將應用格在MuiThemeProvider組件 - 現在你可以導入和使用任何組件在
material-ui
不像我以前RaisedButton這裏
0
有關安裝的第一步,我需要做到這一點,使其工作: npm安裝 - 保存材料 - ui axios react-tap-event-plugin
+0
爲什麼選擇axios? axios是一個承諾庫。與material-ui沒有任何關係 –
相關問題
- 1. 使用Material-ui和Electron
- 2. ReactJS + Material-UI:如何在每個TableRow中使用Material-UI的FlatButton和對話框?
- 3. 使Material-ui reactjs FloatingActionButton浮動
- 4. Material-UI BottomNavigationItem URL
- 5. Material UI Table Slow
- 6. AppBar與Material-UI
- 7. 使用Material-ui和Radium使用多種樣式的問題
- 8. 使用React Bootstrap/Material UI的Spring MVC?
- 9. 如何在電子中使用material-ui
- 10. 在React On Rails中使用Material UI
- 11. 如何使用Material-UI創建網站?
- 12. material ui v 1.0.0 DropDownMenu
- 13. text-align for material ui
- 14. Material UI GridTile高度
- 15. Material-ui in production css
- 16. React,Material-UI onKeyboardFocus值
- 17. material-ui textfield with japanese
- 18. React Material-UI on ASP.NET
- 19. Material UI SVG問題
- 20. Material UI v0.15.0-beta.1 material-ui-codemod不在NPM目錄中
- 21. 使用Material-ui複選框與reactjs和redux
- 22. 無法讀取未定義的'組件':使用material-ui和browserify
- 23. 使用React和Material-UI的開源項目?
- 24. Material UI - 一起使用v1和「next」版本
- 25. 在Reactjs和Material UI上懸停功能
- 26. Reactjs和material-ui庫導入錯誤
- 27. Angular UI和Angular Material是否互斥?
- 28. 使用Material Design Lite和React
- 29. 用於java應用程序的Material-UI?
- 30. Material UI組件引用不起作用
感謝您的支持。有沒有一種方法可以在不逐一導入所有組件的情況下使用? – FewFlyBy
這是一個來自人們入門的相當頻繁的問題。從根本上說,JS的模塊範例植根於分離的,可重用的組件。它們不是可以同時導入的更大生態系統的一部分。這是一個相當大的話題,但是,簡而言之,你不能在一個語句中導入所有的Material-UI。 –
「react-tap-event-plugin'的原因只是解決了iOS瀏覽器問題,而不是解決問題的關鍵,對吧? – WorldSEnder