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

Question

我在代码中使用了一些 TabPane 的 Tabs，但文字始终是蓝色的，我想将其更改为灰色。我尝试了几种方法，但都没有起作用。

我尝试过以下方式来应用父元素的文本颜色：

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

"and"

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

这是针对每个子元素的代码：

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

"and"。

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

- Ben

---

你能详细解释一下你实际需要的是什么吗？ - Amit Kadivar

Answer 1

如果有人仍需要此功能，可以使用tabBarStyle属性添加自定义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;
}

- Osama Bin Saleem

---

谢谢！好的解决方案。不过，“!important”部分并不是必要的。没有它对我也能起作用。 - Sophie Cooperman

Answer 2

如果您想更改选项卡文本的颜色，则可以像这样使用CSS：

示例代码沙箱链接，您可以查看演示。

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

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

- Amit Kadivar

Answer 3

你可以设置。

.ant-tabs-ink-bar {
   background: none;
}

使用自定义选项卡。

.custom-tab{
   height : fit-content;
   color:#363636;
}

- Tajudeen Abdulgafar

Answer 4

您可以为活动选项卡应用 CSS。

.ant-tabs-nav .ant-tabs-tab-active {
   color: '#363636';
}

- user11910739

Answer 5

奥萨马的答案很好，但我想要改变底部栏的颜色，他的答案没有起作用。

如果你想要改变边框的颜色，下面的代码是有效的：

.ant-tabs-ink-bar {
    border-bottom: 1px solid #ae9572;
}

- Anuran Barman

Answer 6

你可以简单地为你的组件添加 classNames，并在你的样式表中添加它们的样式：

<Tabs className="custom-tab"  >

还有样式表：

.custom-tab{
   height : fit-content;
   color:#363636;
}

- Eslam Abu Hugair

---

这是你正在展示的主类。不幸的是，这并不是问题的答案。 - Ugur