MUI-5中创建自定义Divider变体时，如何指定基础变体？

问题描述 #

我希望自定义的Divider变体与内置的'middle'变体样式一致，但更粗更短。目前该自定义变体似乎默认以'fullWidth'变体为基础进行样式合并，文档中未找到相关解决方案，请问如何指定其他变体作为基础？

用户当前代码：

const theme = createTheme({
  components: {
    MuiDivider: {
      variants: [
        {
          props: { variant: 'thick-short' },
          style: {
            //This style got merged with 'fullWidth' one
            //but I would like to have 'middle'
            borderBottomWidth: '16px',
            width: '20%',
          },
        },
      ],
    },
  },
})

解决方案 #

MUI组件的变体默认会继承默认变体的样式（Divider的默认变体是fullWidth），官方没有提供直接指定基础变体的配置项，我们可以通过手动复用目标变体的样式来实现需求，有两种可行方案：

方案一：硬编码复用middle样式 #

直接复制middle变体的核心样式，再叠加自定义的粗度和宽度：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiDivider: {
      variants: [
        {
          props: { variant: 'thick-short' },
          style: {
            // 复用middle变体的核心样式：水平居中
            marginLeft: 'auto',
            marginRight: 'auto',
            // 自定义样式：更粗、更短
            borderBottomWidth: '16px',
            width: '20%',
          },
        },
      ],
    },
  },
});

方案二：动态获取内置middle样式（推荐） #

通过主题对象获取内置的middle变体样式，再合并自定义属性，这样能适配MUI版本更新时的样式变化：

import { createTheme } from '@mui/material/styles';

// 先创建基础主题
const theme = createTheme();

// 从主题中提取middle变体的样式
const middleDividerStyle = theme.components.MuiDivider.variants
  .find(variant => variant.props.variant === 'middle')?.style || {};

// 添加自定义变体，合并middle样式和自定义属性
theme.components.MuiDivider.variants.push({
  props: { variant: 'thick-short' },
  style: {
    ...middleDividerStyle,
    borderBottomWidth: '16px',
    width: '20%',
  },
});

说明 #

两种方案都能让自定义变体基于middle的样式扩展，方案二更灵活，避免硬编码带来的维护问题。

内容的提问来源于stack exchange，提问作者vatosarmat