如何调整Antd Tabs组件样式？实现Tab项宽度均分布局

问题说明 #

尝试给Antd Tabs组件设置display: flex、justify-content: space-between，并给TabPane设置width: 50%，想要实现标签项左右展开铺满容器的效果，但样式未生效：

• 当前效果：标签项集中在容器左侧，未铺满宽度
• 期望效果：两个标签项分别靠向容器两端，或各占50%宽度铺满容器

原因分析 #

Antd Tabs组件内部存在多层嵌套结构：直接给Tabs组件添加的flex样式无法作用到实际承载标签项的ant-tabs-nav容器；同时给TabPane设置的width是控制标签内容面板的宽度，而非标签头本身。

解决方案 #

方案1：使用tabBarStyle属性直接设置标签栏样式 #

利用Antd Tabs提供的tabBarStyle属性，直接给标签导航栏设置样式：

const App = () => (
  <Tabs
    defaultActiveKey="1"
    onChange={onChange}
    tabBarStyle={{
      width: '100%',
      display: 'flex',
      justifyContent: 'space-between'
    }}
  >
    <TabPane tab="Details" key="1">
      Content of Tab Pane 1
    </TabPane>
    <TabPane tab="Updates" key="2">
      Content of Tab Pane 2
    </TabPane>
  </Tabs>
);

方案2：自定义标签项宽度（实现各占50%效果） #

如果需要每个标签项固定占50%宽度，可自定义标签头的样式，结合标签栏的flex布局：

const App = () => (
  <Tabs
    defaultActiveKey="1"
    onChange={onChange}
    tabBarStyle={{
      width: '100%',
      display: 'flex'
    }}
  >
    <TabPane 
      tab={<div style={{ width: '50%', textAlign: 'center' }}>Details</div>} 
      key="1"
    >
      Content of Tab Pane 1
    </TabPane>
    <TabPane 
      tab={<div style={{ width: '50%', textAlign: 'center' }}>Updates</div>} 
      key="2"
    >
      Content of Tab Pane 2
    </TabPane>
  </Tabs>
);

方案3：CSS类名控制（适合全局样式场景） #

给Tabs组件添加自定义类名，通过CSS选择器定位标签栏和标签项：

const App = () => (
  <Tabs
    defaultActiveKey="1"
    onChange={onChange}
    className="custom-tabs"
  >
    <TabPane tab="Details" key="1">
      Content of Tab Pane 1
    </TabPane>
    <TabPane tab="Updates" key="2">
      Content of Tab Pane 2
    </TabPane>
  </Tabs>
);

对应的CSS：

.custom-tabs .ant-tabs-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/* 若需要标签项平分宽度，添加以下样式 */
.custom-tabs .ant-tabs-tab {
  flex: 1;
  text-align: center;
}

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