NextJS中NextUI的Tab组件深色模式字体颜色自定义问题

在使用NextUI组件库和Tailwind CSS的Next.js项目中，尝试给垂直布局的<Tab>组件自定义文本颜色，希望深色模式下文本显示为dark-orange色，但使用dark:text-dark-orange工具类无效。

相关代码如下：

组件代码 #

<Tabs radius={"none"} isVertical={isVertical} aria-label="Options">
    <Tab className="text-dark-blue" title="Website ">
        <Card className="py-4 bg-red-950 ">
            <CardBody className="overflow-visible py-2">
                <Image alt="Card background" className="object-cover rounded-xl" src="https://nextui.org/images/hero-card-complete.jpeg" width={270} height={0} />
            </CardBody>
            <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
                <h4 className="font-bold text-large">Frontend Radio</h4>
                <small className="text-default-500">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</small>
            </CardHeader>
        </Card>
    </Tab>
</Tabs>

tailwind.config.js #

const { nextui } = require("@nextui-org/theme");
/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: "class",
    content: ["./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "./node_modules/@nextui-org/theme/dist/components/(navbar|tabs).js"],
    theme: {
        extend: {
            backgroundImage: {
                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
                "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
            },
            fontFamily: {
                nexa: "nexa",
            },
            colors: {
                "dark-blue": "#101825",
                "dark-orange": "#e76928",
            },
        },
    },
    plugins: [nextui()],
};

NextUI的Tab组件标题样式会被组件内部CSS优先级覆盖，直接在Tab标签上添加Tailwind工具类无法生效，可通过以下方式解决：

方式1：扩展NextUI主题配置 #

在tailwind.config.js中针对深色模式自定义Tabs组件的标题样式：

const { nextui } = require("@nextui-org/theme");
/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: "class",
    content: ["./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "./node_modules/@nextui-org/theme/dist/components/(navbar|tabs).js"],
    theme: {
        extend: {
            backgroundImage: {
                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
                "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
            },
            fontFamily: {
                nexa: "nexa",
            },
            colors: {
                "dark-blue": "#101825",
                "dark-orange": "#e76928",
            },
        },
    },
    plugins: [
        nextui({
            themes: {
                dark: {
                    components: {
                        Tabs: {
                            styles: {
                                title: {
                                    color: "$dark-orange",
                                    "&:hover": {color: "$dark-orange"},
                                    "&.active": {color: "$dark-orange"}
                                }
                            }
                        }
                    }
                }
            }
        })
    ],
};

方式2：自定义Title元素 #

将Tab的title属性改为传入带样式的JSX元素，绕过组件内部样式覆盖：

<Tab 
    className="text-dark-blue"
    title={<span className="text-dark-blue dark:text-dark-orange">Website </span>}
>
    {/* 卡片内容... */}
</Tab>

方式3：全局CSS强制覆盖 #

在全局样式文件（如globals.css）中添加以下代码：

.dark .nextui-tab-title {
    color: #e76928 !important;
}
.dark .nextui-tab-title:hover {
    color: #e76928 !important;
}
.dark .nextui-tab-title.active {
    color: #e76928 !important;
}

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