如何在Material UI的Tab组件中覆盖ButtonBase样式？

要覆盖Tab底层ButtonBase的样式，关键是正确使用buttonBaseProps属性传递样式类，同时解决TypeScript的类型报错问题，下面分步骤说明：

1. 定义ButtonBase的自定义样式 #

首先在makeStyles中添加针对ButtonBase的样式类，比如修改背景色、hover状态等：

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiSvgIcon-root": { marginRight: "8px" }
  },
  // Tab相关样式
  tabWrapper: { flexDirection: "row" },
  tabSelected: { color: theme.palette.primary.main },
  tabLabelIcon: theme.mixins.toolbar,
  // ButtonBase自定义样式
  customButtonBase: {
    backgroundColor: theme.palette.grey[100],
    borderRadius: theme.shape.borderRadius,
    "&:hover": {
      backgroundColor: theme.palette.grey[200],
      transition: "background-color 0.2s ease"
    },
    // 也可以覆盖ButtonBase的内置状态类
    "&.Mui-disabled": {
      backgroundColor: theme.palette.grey[50]
    }
  }
}));

2. 正确配置buttonBaseProps传递样式 #

Tab组件的buttonBaseProps会把所有属性透传给底层的ButtonBase组件，所以有两种方式传递样式：

方式一：通过classes覆盖ButtonBase的内置类 #

ButtonBase的根样式类是root，所以直接在buttonBaseProps.classes中指定：

<Tab
  value="/"
  classes={{
    wrapper: classes.tabWrapper,
    selected: classes.tabSelected,
    labelIcon: classes.tabLabelIcon
  }}
  icon={<DashboardIcon />}
  label="Home"
  // 正确传递ButtonBase的样式类，解决TypeScript报错
  buttonBaseProps={{
    classes: {
      root: classes.customButtonBase
    }
  }}
/>

方式二：直接传递className #

如果只是添加自定义样式而非覆盖内置类，直接用className更简单，TypeScript也不会报错：

<Tab
  // 其他属性...
  buttonBaseProps={{
    className: classes.customButtonBase
  }}
/>

3. 解决TypeScript报错问题 #

如果使用TypeScript，报错通常是因为buttonBaseProps的类型需要匹配ButtonBase的Props类型。你可以：

• 直接使用className（推荐，类型兼容性更好）
• 或者导入ButtonBase的Classes类型来明确类型：

import { ButtonBaseClasses } from "@material-ui/core/ButtonBase";
import { Theme } from "@material-ui/core/styles";

const useStyles = makeStyles<Theme, { customButtonBase: keyof ButtonBaseClasses }>(theme => ({
  customButtonBase: {
    // 样式定义
  }
}));

补充：关于Tab底部指示器的修改 #

虽然你提到最初的场景是修改底部边框，但还是提一下：Tab的底部"边框"实际是Tabs组件的indicator元素，而非ButtonBase的边框，要修改它的高度可以直接在Tabs组件上自定义样式：

const useStyles = makeStyles(theme => ({
  customIndicator: {
    height: 4, // 增加指示器高度
    backgroundColor: theme.palette.primary.main
  }
}));

// 使用时
<Tabs classes={{ indicator: classes.customIndicator }}>
  <Tab ... />
</Tabs>

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