一、安裝Material UI

首先我們創建React工程。然后安裝樣式和字體。下面使用yarn安裝

//Material UI
yarn add @mui/material @emotion/react @emotion/styled
//styled-components
yarn add @mui/material @mui/styled-engine-sc styled-components
//安裝Roboto字體
yarn add @fontsource/roboto
//安裝MUI圖標
yarn add @fontsource/roboto//在public index.html引入google字體樣式
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/>
//在public index.html引入google MUI字體樣式
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

二、 組件

我們先學習MUI的組件

1、Button組件

1、基礎按鈕

最基本的button按鈕定義：

import {Button} from "@mui/material";
function App() {return (<div><Button>這是一個按鈕</Button></div>);
}
export default App;

可以看出，最基本的按鈕沒有邊框，字體默認是藍色的，其鼠標點擊上去有背景顏色，是淡藍色。其他的就沒有什么了。

2、variant屬性

序號	屬性值	含義
1	text	文本按鈕，這個是按鈕的默認屬性。文本按鈕 通常用于不太明顯的動作，包括那些位于對話框、卡片中的動作。 在卡片中，文本按鈕有助于保持卡片內容的重點。
2	contained	包含按鈕。包含按鈕 是高度強調的，以其使用的抬高和填充來區分。 它們包含對你的應用來說是主要的操作。
3	outlined	輪廓按鈕。輪廓按鈕也是包含按鈕的一種較低強調度的選擇， 或者更強調文本按鈕的替代品。

代碼演示：

<Button variant='text'>這是一個文本按鈕</Button>
<Button variant='contained'>這是包含按鈕</Button>
<Button variant='outlined'>這是輪廓按鈕</Button>

3、禁用按鈕

加上disabled屬性可以禁用按鈕。默認是true。false就不是禁用了。

<Button variant='text' disabled>禁用文本按鈕</Button>

4、可跳轉的按鈕

加尚href屬性，可以進行跳轉

<Button variant='text' href="#">禁用文本按鈕</Button>

import {Button} from "@mui/material";
function App() {return (<div><Button variant='text'>這是一個文本按鈕</Button><Button variant='text' disabled>禁用文本按鈕</Button><Button variant='text' href="#">禁用文本按鈕</Button></div>);
}
export default App;

5、disableElevation屬性

disableElevation是禁用陰影的意思。加上此屬性，那么點擊按鈕沒有陰影。
默認的按鈕點擊之后都存在陰影，左邊的按鈕是默認的按鈕，右邊的加了disableElevation屬性，因此右邊的點擊沒有陰影

6、按鈕的點擊事件onClick

import {Button} from "@mui/material";function App() {const showData = () => {alert('按鈕被點擊了');}return (<div><Button onClick={showData} variant='contained'>按鈕</Button></div>);
}export default App;

上面的代碼也可以簡寫：

import {Button} from "@mui/material";
function App() {return (<div><Button onClick={()=>{alert("按鈕被點擊")}} variant='contained'>按鈕</Button></div>);
}
export default App;

2、Button按鈕的顏色和尺寸

1、Button按鈕的顏色

按鈕使用color屬性即可設置值：color=“primary”
默認的按鈕屬性值有7個

序號	屬性值	含義
1	color=“inherit”	按鈕文字的顏色取決于父組件的顏色
2	color=“primary”	強調重要行為的按鈕
1	color=“secondary”	次要行為的按鈕
1	color=“success”	顯示操作成功的按鈕
1	color=“error”	顯示操作錯誤的按鈕
1	color=“info”	陳述按鈕
1	color=“warning”	警告按鈕

|

2、按鈕自定義顏色

使用Theme自定義顏色
創建Theme.jsx文件，編寫自定義的樣式

import {createTheme} from "@mui/material";
export const  theme = createTheme({palette: {primary: {main: '#000000',},secondary: {main: '#F5EBF7',light: '#F5EBFF',contrastText: '#47008F',},},
});

在index中使用ThemeProvider引入theme

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {ThemeProvider} from "@mui/material";
import {theme} from './Theme'const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><ThemeProvider theme={theme}><App /></ThemeProvider></React.StrictMode>
);reportWebVitals();

最后在按鈕中應用

import {Button, Stack} from "@mui/material";function App() {return (<div ><Stack spacing={3}><Button variant='contained' color="primary">主要的按鈕</Button></Stack></div>);
}
export default App;

由于自定義的primary為黑色，所以最終按鈕呈現黑色

疑惑點：Button好像顏色屬性只能從那7個屬性值去選擇。雖然可以自定義7個屬性值的顏色。但是無法使用main、light、dark更為詳細的定義。Box就可以定義具體的色調

export const  theme = createTheme({palette: {primary: {main: '#000000',light: '#F5EBF7',contrastText: '#80ff80',/*文本顏色*/},secondary: {main: '#F5EBF7',light: '#F5EBFF',contrastText: '#47008F',},},
});

也就是說Button組件默認就是main。不知道如何使用light。

3、Button按鈕的尺寸

使用size屬性申明

序號	屬性	含義
1	size=“small”	小按鈕
2	size=“medium”	中按鈕
3	size=“large”	大按鈕

import {Button, Stack} from "@mui/material";function App() {return (<div ><Stack spacing={3}><Button variant='contained' size="small">按鈕1</Button><Button variant='contained' size="medium">按鈕2</Button><Button variant='contained' size="large">按鈕3</Button></Stack></div>);
}
export default App;

3、圖標按鈕

使用圖標，可以直接在Material Icons中選擇，前提是安裝icon庫

yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react

1、帶有圖標的按鈕

序號	屬性	含義
1	startIcon={<圖標組件/>}	在按鈕文字前面的圖標
2	endIcon={<圖標組件 />}	在按鈕文字之后的圖標

import {Button, Stack} from "@mui/material";
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';function App() {return (<div ><Stack spacing={3}><Button variant="outlined" startIcon={<DeleteIcon />}>Delete</Button><Button variant="contained" endIcon={<SendIcon />}>Send</Button></Stack></div>);
}
export default App;

上面的代碼引入了兩個圖標組件DeleteIcon 、SendIcon 。圖標可以自定搜索