資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 Material UI 中更改複選框的大小和顏色？
複選框是在需要從選項列表中選擇多個選項時的一個關鍵元件。為了控制複選框的大小並使其與網頁設計相匹配，請確保已添加了合適的大小和顏色。
在本文中，我們將學習如何在 Material UI 中更改複選框的大小和顏色。在繼續本文之前，建立 React 專案並將 Material UI 新增到其中是先決條件。讓我們開始並瞭解如何全面修改複選框的大小和顏色。
修改複選框大小和顏色的步驟
以下是使用 React 在 Material UI 中修改複選框的大小和顏色的完整步驟：
步驟 1：建立一個新的 React 應用並安裝 MUI
首先，我們必須先有一個安裝了 Material UI 的 React 應用。讓我們建立一個新的 React 應用並透過執行以下命令安裝 Mui：
npx create-react-app myproject cd myproject npm install @mui/material @emotion/react @emotion/styled
步驟 2：將所需的元件匯入到 React 中
現在，當建立新的 React 應用時，在 src 資料夾中有一個主要的 App.js 檔案。開啟它並將 Checkbox 元件匯入以更改複選框的大小和顏色。
import React from "react";
import { Checkbox } from '@mui/material
export default function App() {
return (
…
)
}
步驟 3：修改複選框大小和顏色
以下是使用 Material UI 如何在 React 中更改複選框的大小和顏色的方法。稍後，我們將檢視一些顯示各種複選框標籤方法的示例。
<Checkbox {...label} size="small" color="primary" />
<Checkbox {...label} defaultChecked color="success" />
現在，我們已經看到了使用 React 在 Material UI 中修改或更改複選框的大小和顏色的完整步驟。讓我們看一些使用不同方法來完成此操作的示例。
複選框標籤 API
<Checkbox> - 此 API 用於使用 Material UI 向專案新增複選框元件功能。
屬性
checked - 當為 true 時，此屬性用於選中複選框。
checkedIcon - 此屬性用於在選中時顯示圖示。
classes - 此屬性用於覆蓋或向元素新增樣式。
color - 此屬性用於向複選框新增顏色。它包括 primary、secondary、success、info、error、warning 等。
defaultChecked - 此屬性用於在使用者未控制時選中複選框。
disabled - 此屬性用於停用複選框。
disableRipple - 此屬性用於停用複選框的波紋效果。
icon - 此屬性用於在未選中時顯示圖示。
id - 此屬性用於定義複選框 ID。
Inderterminate - 此屬性用於使複選框處於不確定狀態。
indeterminateIcon - 此屬性用於在複選框中顯示不確定狀態圖示。
inputProps - 此屬性用於向輸入元素新增屬性。
inputRef - 此屬性用於將 ref 傳遞給複選框。
onChange - 此屬性用於觸發回撥函式。
required - 此屬性用於為輸入元素新增必填值。
size - 此屬性用於更改複選框大小。
sx - 此屬性用於向 Material UI 元件新增自定義樣式。
value - 此屬性用於定義元件值。
示例
在此示例中，我們設計了一些具有不同大小的複選框。您可以使用“size”屬性調整複選框大小，該屬性提供中等和大型選項。
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<Checkbox size="small" />
<Checkbox size="medium" />
<Checkbox size="large" />
</div>
);
}
輸出
示例
在此示例中，我們還建立了具有顏色的複選框。透過使用“color”屬性，您可以將複選框顏色更改為 info、warning、success、default 或 error。
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<Checkbox size="medium" color="default" />
<Checkbox size="medium" color="error" />
<Checkbox size="medium" color="info" />
<Checkbox size="medium" color="success" />
<Checkbox size="medium" color="primary" />
<Checkbox size="medium" color="secondary" />
<Checkbox size="medium" color="warning" />
</div>
);
}
輸出
示例
此外，為了向我們的複選框新增標籤並進一步自定義其顏色，我們使用了 FormControlLabel 元件。與之前一樣，您可以透過使用前面提到的“color”屬性來修改複選框顏色。
import { FormControlLabel, FormGroup } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel control={<Checkbox color="primary" />} label="Primary checkbox" />
<FormControlLabel control={<Checkbox color="secondary" />} label="Secondary checkbox" />
<FormControlLabel control={<Checkbox color="info" />} label="info checkbox" />
<FormControlLabel control={<Checkbox color="error" />} label="error checkbox" />
<FormControlLabel control={<Checkbox color="warning" />} label="warning checkbox" />
<FormControlLabel control={<Checkbox color="success" />} label="success checkbox" />
</FormGroup>
</div>
);
}
輸出
示例
在此示例中，為了在大小和顏色變化（包括 primary、secondary info、warning、success、default 和 error）方面提供自定義選項，我們在使用 FormControlLabel 建立帶標籤的複選框時組合了“size”和“color”屬性。
import { FormControlLabel, FormGroup } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel control={<Checkbox color="primary" size="small"/>}label="Primary checkbox"/>
<FormControlLabel control={<Checkbox color="secondary" size="small"/>}label="Secondary checkbox"/>
<FormControlLabel control={<Checkbox color="info" size="medium"/>}label="info checkbox"/>
<FormControlLabel control={<Checkbox color="error" size="medium"/>}label="error checkbox"/>
<FormControlLabel control={<Checkbox color="warning" size="large"/>}label="warning checkbox"/>
<FormControlLabel control={<Checkbox color="success"size="large"/>}label="success checkbox"/>
</FormGroup>
</div>
);
}
輸出
示例
在此示例中，我們藉助 FormControlLabel 建立了自定義複選框和標籤，該元件使用‘sx’屬性更改大小和顏色。
import { FormControlLabel, FormGroup } from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel
label="custom checkbox"
control={
<Checkbox
sx={{
"& .MuiSvgIcon-root": {
fill: "pink",
fontSize: 80,
},
}}
/>
}
sx={{
'& .MuiFormControlLabel-label': {
color: 'pink',
fontSize: 40,
},
}}
/>
<FormControlLabel
label="custom checkbox"
control={
<Checkbox
sx={{
"& .MuiSvgIcon-root": {
fill: "orange",
fontSize: 100,
},
}}
/>
}
sx={{
'& .MuiFormControlLabel-label': {
color: 'orange',
fontSize: 60,
},
}}
/>
<FormControlLabel
label="custom checkbox"
control={
<Checkbox
sx={{
"& .MuiSvgIcon-root": {
fill: "violet",
fontSize: 120,
},
}}
/>
}
sx={{
'& .MuiFormControlLabel-label': {
color: 'violet',
fontSize: 80,
},
}}
/>
</FormGroup>
</div>
);
}
輸出
2K+ 次瀏覽
