調色盤

使用少數顏色工具類別，透過顏色傳達意義。也包含支援使用 hover 狀態設定連結樣式。

顏色

primary.main

secondary.main

error.main

warning.main

info.main

success.main

text.primary

text.secondary

text.disabled

<Box sx={{ color: 'primary.main' }}>…
<Box sx={{ color: 'secondary.main' }}>…
<Box sx={{ color: 'error.main' }}>…
<Box sx={{ color: 'warning.main' }}>…
<Box sx={{ color: 'info.main' }}>…
<Box sx={{ color: 'success.main' }}>…
<Box sx={{ color: 'text.primary' }}>…
<Box sx={{ color: 'text.secondary' }}>…
<Box sx={{ color: 'text.disabled' }}>…

背景顏色

primary.main

secondary.main

error.main

warning.main

info.main

success.main

text.primary

text.secondary

text.disabled

<Box sx={{ bgcolor: 'primary.main' }}>…
<Box sx={{ bgcolor: 'secondary.main' }}>…
<Box sx={{ bgcolor: 'error.main' }}>…
<Box sx={{ bgcolor: 'warning.main' }}>…
<Box sx={{ bgcolor: 'info.main' }}>…
<Box sx={{ bgcolor: 'success.main' }}>…
<Box sx={{ bgcolor: 'text.primary' }}>…
<Box sx={{ bgcolor: 'text.secondary' }}>…
<Box sx={{ bgcolor: 'text.disabled' }}>…

API

import { palette } from '@mui/system';

匯入名稱	Prop	CSS 屬性	主題鍵
`color`	`color`	`color`	`palette`
`bgcolor`	`bgcolor`	`backgroundColor`	`palette`