如何更改 Ant Design TabPane 的文本颜色？

Question

我在我的代码中使用了带有一些 TabPane 的选项卡，但文本始终为蓝色，我想将其更改为灰色。我尝试了几件事，但没有任何作用。

我尝试：

这用于将文本颜色应用于父级：

<Tabs style={{ height: "fit-content",font: "#363636" }}  >

和

<Tabs style={{ height: "fit-content",color: "#363636" }}  >

这对于每个孩子：

<TabPane tab={t("tabPanelGeneral/name")} key="1" style={{ color: "#363636" }}>

和

<TabPane tab={t("tabPanelGeneral/name")} key="1" style={{ font: "#363636" }}>

Answer 1

如果你改变选项卡文本的颜色然后像这样放置CSS

演示代码和盒子链接您查看演示

.ant-tabs-tab {
  color: #363636 !important;
}

.ant-tabs-tab-active {
  color: #363636 !important;
}

Answer 2

如果有人还需要它就放在这里你可以使用tabBarStyleprop 添加自定义 css。来源

要更改活动选项卡的颜色，您需要更新color按钮：

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
   color: #363636 !important; 
   font-weight: 500;
}

要更改蓝色底栏的颜色：

.ant-tabs-ink-bar {
   position: absolute;
   background: #000000;
   pointer-events: none;
}