主题化组件
您可以使用主题内的组件键来自定义组件的样式、默认 props 以及更多内容。
主题中的 components 键有助于在您的应用程序中实现样式一致性。但是，主题不可进行 tree-shaking，对于大量的自定义，请优先创建新组件。
主题默认 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 需要一个插槽名称作为键（使用 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 覆盖样式，您可以使用特定插槽中的 variants 键，该插槽包含 props 和 style 键。当组件的 props 匹配时，将应用 style。
覆盖定义被指定为一个数组。此外，请确保任何应该优先的样式都列在最后。
基于现有 props 覆盖样式
下面的示例演示了增加 outlined Card 的边框粗细
const theme = createTheme({
components: {
MuiCard: {
styleOverrides: {
root: {
variants: [
{
props: { variant: 'outlined' },
style: {
borderWidth: '3px',
},
},
],
},
},
},
},
});
基于新值添加样式
下面的示例演示了向 Button 组件添加新的变体 dashed
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 的 variant 为 dashed（新变体）且 color 为 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]}`,
},
},
],
},
},
},
},
});
插槽 ownerState 回调（已弃用）
使用回调访问插槽的 ownerState 已被弃用，请改用变体。
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
- root: ({ ownerState, theme }) => ({ ... }),
+ root: {
+ variants: [...],
},
},
},
},
});
sx 语法（实验性）
sx prop 充当定义访问主题对象的自定义样式的快捷方式。此 prop 允许您使用 CSS 的超集编写内联样式。了解更多关于 sx prop 背后的概念 以及 sx 与 styled utility 的区别。
您可以在 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 覆盖它们，因为它具有更高的 CSS 特异性，即使您在主题内使用实验性的 sx 语法。
主题变量
覆盖所有组件实例外观的另一种方法是调整主题配置变量。
const theme = createTheme({
typography: {
button: {
fontSize: '1rem',
},
},
});