React中移除MUI选中标签页底部边框并自定义样式

要实现你需要的Tabs样式（整体底部100%边框，选中标签移除底部边框并添加上、左、右边框），可以通过MUI的样式定制能力完成，以下是具体实现方案：

方案一：使用styled组件定制 #

通过styled工具封装Tabs组件，统一设置样式规则：

import { useState } from 'react';
import { Tabs, Tab, Box } from '@mui/material';
import { styled } from '@mui/material/styles';

const StyledTabs = styled(Tabs)(({ theme }) => ({
  // 设置Tabs容器的底部边框
  borderBottom: '1px solid #e0e0e0',
  '& .MuiTab-root': {
    // 默认Tab添加透明底部边框，避免选中时布局跳动
    borderBottom: '1px solid transparent',
    minHeight: '48px',
    // 选中状态的Tab样式
    '&.Mui-selected': {
      borderTop: '1px solid #e0e0e0',
      borderLeft: '1px solid #e0e0e0',
      borderRight: '1px solid #e0e0e0',
      // 用背景色覆盖底部边框，模拟"移除"效果
      borderBottom: `1px solid ${theme.palette.background.paper}`,
      // 可选：添加顶部圆角让样式更贴合示例
      borderRadius: '4px 4px 0 0',
      // 向上偏移1px，让Tab底部边框与容器边框重叠，消除缝隙
      marginBottom: '-1px',
    },
  },
}));

export default function CustomTabs() {
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <StyledTabs value={value} onChange={handleChange} aria-label="custom tabs example">
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
      </StyledTabs>
    </Box>
  );
}

方案二：直接使用sx属性快速定制 #

如果不需要复用组件，也可以直接通过sx属性内联样式：

import { useState } from 'react';
import { Tabs, Tab, Box } from '@mui/material';

export default function CustomTabs() {
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Tabs
        value={value}
        onChange={handleChange}
        sx={{
          borderBottom: '1px solid #e0e0e0',
          '& .MuiTab-root': {
            borderBottom: '1px solid transparent',
            '&.Mui-selected': {
              borderTop: '1px solid #e0e0e0',
              borderLeft: '1px solid #e0e0e0',
              borderRight: '1px solid #e0e0e0',
              borderBottom: '1px solid #fff',
              borderRadius: '4px 4px 0 0',
              mb: -1,
            },
          },
        }}
        aria-label="custom tabs example"
      >
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
      </Tabs>
    </Box>
  );
}

关键样式说明 #

• 给Tabs容器设置borderBottom，实现整体底部的100%边框效果。
• 默认Tab添加透明borderBottom，避免选中时因边框变化导致的布局跳动。
• 选中的Tab添加上、左、右边框，同时用背景色（或白色）设置borderBottom，覆盖容器的底部边框，达到"移除底部边框"的视觉效果。
• 通过marginBottom: -1px（或mb: -1）让Tab的底部边框与容器边框重叠，消除两者之间的缝隙。

你可以根据需求替换边框颜色、高度、圆角等样式参数，匹配你的设计要求。

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