更改NextJS中Tab组件的字体颜色

Question

我正在开发一个 Next.js 项目，使用 NextUI 作为组件，使用 Tailwind CSS 进行样式设置。我一直在尝试在垂直设置中自定义组件的文本颜色。具体来说，我希望文本在深色模式下显示为深橙色。然而，我尝试使用 Tailwind 的实用程序类（例如 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>
    </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()],
    };
`

Answer 1

返回一个对象作为标签上的 title 属性而不是字符串。 然后你可以添加任何你想要的样式。

<Tab title={<span className="text-dark-blue">Website</span>}>

您当前方法的问题在于，NextUI 将您赋予它的类添加到默认设置文本颜色的元素之上的元素，因此您的文本颜色样式被覆盖。 查看此文档以更好地了解其工作原理。