如何修改Flowbite React Tabs组件样式（自定义选中态颜色）

一、为什么直接设置className无效？ #

Flowbite React组件的样式依赖内置Tailwind类和动态状态选择器（比如data-state="active"），这些样式的优先级高于你直接添加的自定义className。另外：

• 直接给Tabs或Tabs.Item加className时，选中状态的动态样式会覆盖你的自定义样式；
• 若尝试修改root属性崩溃，大概率是组件未暴露该属性，或传入了不符合要求的参数；
• Tabs.Item本身没有color属性，手动设置自然无效果。

二、修改选中状态颜色（#80143c）的两种有效方案 #

方案1：全局CSS覆盖（快速生效） #

在你的全局CSS文件中添加如下样式，精准覆盖选中状态的文本、图标和下划线颜色：

/* 覆盖选中Tab的文本与图标颜色 */
.flowbite-tabs-underline [data-state="active"] .flowbite-tabs-item-title,
.flowbite-tabs-underline [data-state="active"] .flowbite-tabs-item-icon {
    color: #80143c;
    fill: #80143c;
}

/* 覆盖选中Tab的下划线颜色 */
.flowbite-tabs-underline [data-state="active"]::after {
    background-color: #80143c;
}

如果样式仍未生效，可以在属性后加!important强制覆盖（仅在必要时使用）。

方案2：通过Tailwind主题配置（推荐，符合设计系统） #

Flowbite基于Tailwind CSS，可通过修改Tailwind配置替换全局主色，自动应用到Tabs组件的选中状态：

1. 打开tailwind.config.js，在theme.extend中添加自定义主色：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#80143c', // 替换成你的目标颜色
      },
    },
  },
  plugins: [
    require('flowbite/plugin'), // 确保Flowbite插件已引入
  ],
};

2. 重启开发服务器，此时Tabs的选中状态（文本、图标、下划线）会自动使用你定义的primary颜色。

三、修改其他颜色的思路 #

如果要修改未选中状态的颜色、hover状态颜色等，同样可以通过上述两种方式：

• 全局CSS：找到对应的状态选择器（比如[data-state="inactive"]、:hover），覆盖对应样式；
• Tailwind主题配置：在theme.extend.colors中添加更多自定义颜色，或修改Flowbite组件的默认主题变量。

内容的提问来源于stack exchange，提问作者bashlykov