Question

我在代码中使用带有某些TabPane的Tabs，但是文本始终保持为蓝色，我想将其更改为灰色。我尝试了几种方法，但没有任何作用。

我尝试：

此选项可将文字颜色应用于父级：

<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

您只需将className添加到您的组件并将其样式添加到样式表中：

#include <stdio.h>
#include <string.h>
#include <stdlib.h>

int main() {
    printf("-----------------------------------");
    printf("-----------REGISTER----------------");
    char username[11], pwd[7];
    char check_usn[11], check_pwd[7];

    printf("\nEnter your username\n");
    scanf("%10s", username);

    printf("Enter your password (length should be 6\n");
    scanf("%6s", pwd);

    printf("-----------------------------------");
    printf("-------------LOG IN--------------");
    printf("\nEnter your username\n");
    scanf("%10s", check_usn);
    printf("Enter your password (length should be 6\n");
    scanf("%6s", check_pwd);

    if(strcmp(username, check_usn) == 0 && strcmp(pwd, check_pwd) == 0)
    {
        printf("Valid password");
    }
    else
    {
        printf("Wrong password");
    }
    return 0;
}

和样式表：

<Tabs className="custom-tab"  >

Answer 2

如果有人仍需要将其放在这里您可以使用tabBarStyle属性添加自定义CSS。 source

要更改活动标签的颜色，您需要更新按钮的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;
}

Answer 3

您可以将CSS应用于活动标签。

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

Answer 4

如果您更改标签文本的颜色，则将CSS这样放置

演示codesandbox link，您将观看演示

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

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

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

4 个答案: