React使用Material UI元件函式庫(component library)。
範例環境:
- node v16.5.0
- npm 7.19.1
- react@18.2.0
- @mui/material@5.11.2
事前要求
參考「React 使用Create React App建立React應用程式」建立React應用程式。
安裝 Material UI
在專案目錄/app
下輸入npm install @mui/material @emotion/react @emotion/styled
安裝Material UI相關套件。
~/.../react-demo/app % npm install @mui/material @emotion/react @emotion/styled
up to date, audited 2017 packages in 17s
157 packages are looking for funding
run `npm fund` for details
47 vulnerabilities (1 low, 3 moderate, 30 high, 13 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details
使用 Material UI
開啟App.js
修改內容如下。在function App()
返回Material UI的Button
元件。
App.js
import './App.css';
import * as React from 'react';
import Button from '@mui/material/Button';
function App() {
return <Button variant="contained">Hello, world!</Button>
}
export default App;
測試
啟動專案顯示如下。
沒有留言:
張貼留言