如何在新版Ant Design Tabs组件中为TabPane设置样式？

问题背景 #

在旧版Ant Design Tabs实现中，我们可以手动遍历tabList并给每个<Tabs.TabPane>直接设置样式：

const tabList = [
  {
    key: "tab1",
    label: "Tab1",
    children: <Tab1 />,
  },
  {
    key: "tab2",
    label: "Tab2",
    children: <Tab2 />,
  },
];

<Tabs onChange={onTabChange} activeKey={selectedTab}>
  {tabList.map((tab) => {
    const { key, label, children } = tab;
    return (
      <Tabs.TabPane
        key={key}
        tab={label}
        style={{ margin: "1.5rem auto 1.5rem" }}
      >
        {children}
      </Tabs.TabPane>
    );
  })}
</Tabs>;

升级到Ant Design 4.23.0+后，使用items属性简化代码：

<Tabs items={tabList} />

但直接给每个tab项的children加样式会带来两个问题：

• 需要为每个tab重复编写样式代码
• 要求所有Tab子组件必须额外用div接收并展开props

优化方案 #

方案1：批量处理tabList，统一包裹带样式的容器 #

无需修改原有Tab组件，直接遍历原tabList，给每个子组件外层包裹一个带样式的div：

const formattedTabList = tabList.map(tab => ({
  ...tab,
  children: <div style={{ margin: "1.5rem auto 1.5rem" }}>{tab.children}</div>
}));

<Tabs items={formattedTabList} />

该方案一次性给所有TabPane内容加上统一样式，无需修改Tab1、Tab2等子组件。

方案2：利用tabPaneProps直接给TabPane设置样式 #

Ant Design的items数组项支持tabPaneProps字段，可直接对应旧版中给<Tabs.TabPane>设置的属性，完美复现旧版的样式逻辑：

const formattedTabList = tabList.map(tab => ({
  ...tab,
  tabPaneProps: {
    style: { margin: "1.5rem auto 1.5rem" }
  }
}));

<Tabs items={formattedTabList} />

此方案无需额外包裹容器，直接给TabPane本身设置样式，逻辑和旧版完全对齐。

方案3：全局/局部CSS样式控制 #

如果需要多个Tabs组件复用该样式，可通过CSS直接针对Ant Design的TabPane类名设置：

/* 全局生效 */
.ant-tabs-tabpane {
  margin: 1.5rem auto 1.5rem;
}

如果仅需给特定Tabs组件生效，可给Tabs添加自定义类名做样式限定：

<Tabs items={tabList} className="custom-margin-tabs" />

.custom-margin-tabs .ant-tabs-tabpane {
  margin: 1.5rem auto 1.5rem;
}

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