MUI6中如何基于现有变体扩展新Tabs组件变体？

问题原因 #

你之前的配置只在styleOverrides.root.variants中添加了自定义样式，但MUI的Tabs组件仅当variant为"scrollable"时才会触发滚动箭头渲染、滚动行为等核心逻辑，自定义的"scrollable-pill"变体不会自动继承这些逻辑，导致箭头丢失。

解决方案 #

通过Theme配置同时处理行为继承和样式叠加，无需包裹组件：

1. 让自定义变体触发滚动逻辑：在Tabs的defaultProps中，针对"scrollable-pill"自动设置滚动相关属性，模拟原生scrollable变体的行为。
2. 继承并叠加样式：在自定义变体的样式中，先复用scrollable的滚动基础样式，再添加你的pill自定义样式。

具体代码示例：

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

// 你的pill样式逻辑
const pillTabStyles = ({ theme, palette }) => ({
  '& .MuiTab-root': {
    borderRadius: theme.shape.borderRadius,
    padding: '8px 16px',
    backgroundColor: palette.grey[100],
    transition: theme.transitions.create(['background-color', 'color']),
    '&.Mui-selected': {
      backgroundColor: palette.primary.main,
      color: palette.common.white,
    },
    '&:hover:not(.Mui-selected)': {
      backgroundColor: palette.grey[200],
    },
  },
});

const theme = createTheme({
  components: {
    MuiTabs: {
      // 自动给scrollable-pill变体设置滚动相关属性
      defaultProps: {
        scrollButtons: ({ variant }) => variant === 'scrollable-pill' ? 'auto' : undefined,
        allowScrollButtonsMobile: ({ variant }) => variant === 'scrollable-pill' ? true : undefined,
      },
      // 定义自定义变体的样式：继承滚动样式+叠加pill样式
      variants: [
        {
          props: { variant: 'scrollable-pill' },
          style: (theme) => ({
            // 复用scrollable变体的核心滚动样式
            overflowX: 'auto',
            '&::-webkit-scrollbar': { display: 'none' },
            msOverflowStyle: 'none',
            scrollbarWidth: 'none',
            // 叠加你的pill自定义样式
            ...pillTabStyles({ theme, palette: theme.palette }),
          }),
        },
      ],
    },
  },
});

关键说明 #

• scrollButtons="auto"会强制Tabs渲染滚动箭头，和原生scrollable变体逻辑一致；
• allowScrollButtonsMobile确保移动端也能显示箭头；
• 样式中先添加scrollable的滚动基础样式，保证滚动行为正常，再叠加pill的Tab样式。

这样使用<Tabs variant="scrollable-pill" />时，就能同时拥有scrollable的滚动功能和自定义pill样式，无需包裹组件。

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