antd5 Tabs 标签头的文本颜色和背景颜色修改

 一 需求说明

        在项目中使用Tabs标签页，由于设计和antd原始样式的差异，需要对标签头部的背景颜色和字体做修改。

        原始标签页在激活状态时是  白底-蓝字，如下图：

        

        而设计要求效果是   蓝底-白字 。这个时候就需要我们去修改样式。

二 效果实现

        首先，修改背景颜色。修改背景颜色，我自己调用的antd内部的css文件(这里需要注意要使用global包裹，不要影响了全局样式)，代码如下：

.activeTab {
  :global {
    .ant-tabs-nav .ant-tabs-tab-active {
      background-color:#1057E5;
    }
  }
}

        然后，修改字体颜色。我最初在上面css中直接写color：“white”，完全没用，由于是antd5，参照css in js使用方法，并看到有相关的token：itemSelectedColor，所以，就用了token才实现(不用token的方法我没有研究过)。代码如下：

<ConfigProvider
        theme={{
          components: {
            Tabs: {
              itemSelectedColor: "white",
            },
          },
        }}
      >
        <Tabs
          type="editable-card"
          size={"small"}
          className={headerStyle.activeTab}
          hideAdd
          onChange={onChange}
          activeKey={activeKey}
          onEdit={onEdit}
          items={items}
          tabBarExtraContent={OperationsSlot}
        />

</ConfigProvider>

        最终实现效果如下图：