更改 flowbite-react Tabs 组件的颜色 (Next.js)

Question

我正在寻找如何更改 flowbite-react 组件中选项卡的颜色，我正在使用 Next.js。我已经按照此处的文档进行设置https://flowbite.com/docs/getting-started/next-js/

我还意识到 Tabs 组件中没有

ClassName

属性，因此我尝试使用

color

属性，但没有任何反应。

这是SS：

ClassName

没有Tabs.Group

属性

ClassName

没有Tabs.Item

属性

未使用

color

属性更改颜色

Answer 1

你是对的，className 属性并不直接应用于 flowbite-react 中的 Tabs 组件。 但是，您仍然可以使用以下两个选项设置选项卡的样式：

选项 A：使用 CSS 选择器 您可以使用 CSS 定位选项卡组件中使用的角色属性 像这样：

/* Target all tabs */
div[role="tablist"] button[role="tab"] {
  background-color: red; /* Default background for all tabs */
  color: white; /* Default text color */
}

/* Style the active (selected) tab */
div[role="tablist"] button[role="tab"][aria-selected="true"] {
  background-color: green; /* Background for the active tab */
  color: white; /* Text color for the active tab */
}

将此 CSS 放置在全局样式表中（例如，Next.js 的 globals.css）或 CSS 模块中（如果您正在确定样式范围）。

这是您在 StackOverflow 上的答案的结构良好的版本：

答案：

你是对的，className 属性并不直接应用于 flowbite-react 中的 Tabs 组件。但是，您仍然可以使用以下两个选项设置选项卡的样式： 选项 A：使用 CSS 选择器

您可以使用 CSS 来定位 Tabs 组件中使用的角色属性。例如：

/* Target all tabs */
div[role='tablist'] button[role='tab'] {
    background-color: red; /* Default background for all tabs */
    color: white; /* Default text color */
}

/* Style the active (selected) tab */
div[role='tablist'] button[role='tab'][aria-selected='true'] {
    background-color: green; /* Background for the active tab */
    color: white; /* Text color for the active tab */
}

将此 CSS 放置在全局样式表中（例如，Next.js 的 globals.css）或 CSS 模块中（如果您正在确定样式范围）。

选项 B：使用 Flowbite 的自定义主题

Flowbite 提供了一种通过主题属性自定义其组件的方法。您可以为项目中的选项卡组件定义自定义主题。

具体操作方法如下：

定义您的自定义主题：

const customTheme = {
    base: 'flex flex-col',
    tablist: {
        base: 'flex space-x-2 border-b border-gray-200',
    },
    tab: {
        base: 'p-4 rounded-t-lg',
        active: 'bg-green-500 text-white',
        inactive: 'bg-red-500 text-white',
    },
};

应用自定义主题：

<Tabs.Group theme={customTheme}>
    <Tabs.Item title="Tab 1">Content for Tab 1</Tabs.Item>
    <Tabs.Item title="Tab 2">Content for Tab 2</Tabs.Item>
    <Tabs.Item title="Tab 3">Content for Tab 3</Tabs.Item>
</Tabs.Group>