主題化元件
您可以使用主題中的元件金鑰來自訂元件的樣式、預設 props 和更多內容。
主題中的 components 金鑰有助於在您的應用程式中實現樣式一致性。然而，主題無法 tree-shake，對於大量自訂，請優先建立新元件。
主題預設 props
每個 Material UI 元件的每個 prop 都有預設值。若要變更這些預設值，請使用主題的 components 金鑰中公開的 defaultProps 金鑰
const theme = createTheme({
components: {
// Name of the component
MuiButtonBase: {
defaultProps: {
// The props to change the default for.
disableRipple: true, // No more ripple, on the whole application 💣!
},
},
},
});
如果您使用 TypeScript 和lab 元件，請查看這篇文章以瞭解如何覆寫其樣式。
主題樣式覆寫
主題的 styleOverrides 金鑰可讓您變更任何 Material UI 元件的預設樣式。
styleOverrides 需要 slot 名稱作為金鑰（使用 root 來鎖定最外層的元素），以及具有 CSS 屬性的物件作為值。巢狀 CSS 選擇器也支援作為值。
const theme = createTheme({
components: {
// Name of the component
MuiButton: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
fontSize: '1rem',
},
},
},
},
});
變體
大多數元件都包含與設計相關的 props，會影響其外觀。例如，Card 元件支援 variant prop，您可以在其中選擇 outlined 作為值，以新增邊框。
如果您想要根據特定 prop 覆寫樣式，您可以使用包含 props 和 style 金鑰的特定 slot 中的 variants 金鑰。當元件的 props 符合時，將套用 style。
覆寫定義指定為陣列。此外，請確保任何應優先採用的樣式都列在最後。
根據現有 props 覆寫樣式
以下範例示範增加 outlined Card 的邊框粗細
const theme = createTheme({
components: {
MuiCard: {
styleOverrides: {
root: {
variants: [
{
props: { variant: 'outlined' },
style: {
borderWidth: '3px',
},
},
],
},
},
},
},
});
根據新值新增樣式
以下範例示範將新的變體 dashed 新增至 Button 元件
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
variants: [
{
// `dashed` is an example value, it can be any name.
props: { variant: 'dashed' },
style: {
textTransform: 'none',
border: `2px dashed ${blue[500]}`,
},
},
],
},
},
},
},
});
根據現有和新的 props 覆寫樣式
以下範例示範當 Button 的變體為 dashed（新的變體）且色彩為 secondary（現有的色彩）時，覆寫樣式
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
variants: [
{
props: { variant: 'dashed', color: 'secondary' },
style: {
border: `4px dashed ${red[500]}`,
},
},
],
},
},
},
},
});
如果您使用 TypeScript，則需要使用模組擴充來指定新的變體/色彩。
declare module '@mui/material/Button' {
interface ButtonPropsVariantOverrides {
dashed: true;
}
}
變體 props 也可以定義為回呼，讓您可以根據條件套用樣式。這對於在屬性沒有特定值時設定樣式非常有用。
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
variants: [
{
props: (props) =>
props.variant === 'dashed' && props.color !== 'secondary',
style: {
textTransform: 'none',
border: `2px dashed ${blue[500]}`,
},
},
],
},
},
},
},
});
Slot ownerState 回呼（已停用）
使用回呼來存取 slot 的 ownerState 已停用，請改用變體。
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
- root: ({ ownerState, theme }) => ({ ... }),
+ root: {
+ variants: [...],
},
},
},
},
});
sx 語法（實驗性）
sx prop 作為定義自訂樣式的捷徑，可存取主題物件。此 prop 可讓您使用 CSS 的超集來撰寫內嵌樣式。深入瞭解 sx prop 背後的概念以及 sx 與 styled 公用程式有何不同。
您可以在 styleOverrides 金鑰內使用 sx prop，以使用簡寫 CSS 標記法修改主題內的樣式。如果您已將 sx prop 與元件搭配使用，這會特別方便，因為您可以在主題中使用相同的語法，並在兩者之間快速轉換樣式。
const finalTheme = createTheme({
components: {
MuiChip: {
styleOverrides: {
root: ({ theme }) =>
theme.unstable_sx({
px: 1,
py: 0.25,
borderRadius: 1,
}),
label: {
padding: 'initial',
},
icon: ({ theme }) =>
theme.unstable_sx({
mr: 0.5,
ml: '-2px',
}),
},
},
},
});
優先性
如果您使用主題方法來自訂元件，您仍然可以使用 sx prop 覆寫它們，因為即使您在主題內使用實驗性 sx 語法，它也具有更高的 CSS 優先性。
主題變數
覆寫所有元件執行個體外觀的另一種方法是調整主題設定變數。
const theme = createTheme({
typography: {
button: {
fontSize: '1rem',
},
},
});