如何使用Antd的Tabs组件进行样式的设置？ -火山引擎

Antd 的 Tabs 组件提供了多种自定义样式的方式，以下是几种示例。

可以通过在 Tabs 上设置 tabBarStyle 来设置选项卡的样式，包括背景色和文字颜色。

import { Tabs } from 'antd';
const { TabPane } = Tabs;
const tabList = [
    key: '1',
    tab: 'Tab 1',
    key: '2',
    tab: 'Tab 2',
<Tabs tabBarStyle={{ background: '#f0f2f5', color: '#1890ff' }}>
  {tabList.map(item => (
    <TabPane tab={item.tab} key={item.key}>
      <p>{item.content}</p>
    </TabPane>
</Tabs>;
修改选中选项卡的样式
可以通过在 Tabs 上设置 activeKey 和 tabBarExtraContent 来设置选项卡选中后的样式。
import { Tabs } from 'antd';
const { TabPane } = Tabs;
const tabList = [
    key: '1',
    tab: 'Tab 1',
    key: '2',
    tab: 'Tab 2',
<Tabs activeKey={currentTab} tabBarExtraContent={<Button>Extra Component</Button>}>
  {tabList.map(item => (
    <TabPane tab={item.tab} key={item.key}>
      <p>{item.content}</p>
    </TabPane>
</Tabs>;
修改选项卡的位置
可以通过在 Tabs 上设置 tabPosition 来设置选项卡的位置，包括 top、bottom、left、right 四个位置。
import { Tabs } from 'antd';
const { TabPane } = Tabs;
const tabList = [
    key: '1',
    tab: 'Tab 1',
    key: '2',
    tab: 'Tab 2',
<Tabs tabPosition="left">
  {tabList