Next.js中flowbite-react Tabs组件颜色修改问题求助

方法1：通过theme属性自定义组件样式 #

flowbite-react的Tabs组件支持通过theme属性精细控制各部分样式，直接给Tab组和Tab项指定自定义Tailwind类：

import { Tabs } from 'flowbite-react';

export default function CustomColoredTabs() {
  return (
    <Tabs.Group
      theme={{
        // 控制整个Tab栏的背景
        tablist: 'bg-slate-100 p-1 rounded-lg',
        tabs: {
          // 激活态Tab的样式
          active: {
            tab: 'bg-green-500 text-white rounded-md px-4 py-2',
          },
          // 未激活态Tab的样式
          inactive: {
            tab: 'text-slate-700 hover:bg-green-100 rounded-md px-4 py-2',
          },
        },
      }}
    >
      <Tabs.Item title="首页">首页内容</Tabs.Item>
      <Tabs.Item title="设置">设置内容</Tabs.Item>
      <Tabs.Item title="关于">关于内容</Tabs.Item>
    </Tabs.Group>
  );
}

方法2：全局覆盖CSS变量 #

flowbite的样式基于CSS变量实现，在全局CSS文件（比如globals.css）里添加以下代码，就能全局修改Tabs组件的颜色：

:root {
  /* 激活态Tab的文本色 */
  --tabs-active-color: #ffffff;
  /* 激活态Tab的背景色 */
  --tabs-active-bg-color: #8b5cf6;
  /* 鼠标悬停时的文本色 */
  --tabs-hover-color: #6d28d9;
  /* 鼠标悬停时的背景色 */
  --tabs-hover-bg-color: #ede9fe;
}

方法3：自定义Tailwind类复用样式 #

如果需要在多个Tabs组件复用同一种颜色样式，可以先在CSS里定义自定义类：

/* 在自定义CSS文件中 */
.tab-custom-active {
  @apply bg-orange-500 text-white font-medium rounded-md;
}

.tab-custom-inactive {
  @apply text-gray-600 hover:bg-orange-100 rounded-md;
}

然后在Tabs组件的theme属性中引用这些类：

<Tabs.Group
  theme={{
    tabs: {
      active: { tab: 'tab-custom-active px-4 py-2' },
      inactive: { tab: 'tab-custom-inactive px-4 py-2' },
    },
  }}
>
  {/* Tab项内容 */}
</Tabs.Group>

补充说明 #

官方提供的color属性仅支持预设的枚举值（如primary、secondary），如果需要自定义颜色值，该属性无法生效，所以优先使用上述三种方法。

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