NextUI 手风琴背景颜色

Question

我正在使用 Tailwind CSS 使用 NextUI V2.2.10。我有一个手风琴项目，我想在主题之外自定义样式（实际上我只想翻转项目上的背景颜色和文本颜色以使其在页面上弹出）。下面的示例代码完美地更改了文本颜色，但没有更改手风琴的背景颜色。无论我尝试什么，我似乎都无法改变手风琴的背景颜色。有什么建议吗？

<Accordion variant="splitted">
     <AccordionItem
         key="1"
         aria-label="Accordion 1"
         title="Title 1"
         className="text-green-500 bg-green-500"
     >
         Content 1
     </AccordionItem>
</Accordion>

我已经浏览了 NextUI 文档，但找不到如何执行此操作的适当描述。我也尝试过谷歌（但找不到示例）和 ChatGPT v4（无法提供有效的示例）。

Answer 1

在开发人员工具中，查看应用于 Accordion HTML 的 CSS，我们发现一些应用背景颜色的 CSS 比

bg-green-500

类更具体：

我们可以通过在应用声明中添加

bg-green-500

来增加

!important

的特异性，方法是在类名前加上

!

前缀，使类名变成

!bg-green-500

:

<AccordionItem
  …
  className="text-green-500 !bg-green-500"
>

通过此更改，

!bg-green-500

类优先：

在 这个 StackBlitz 中查看此解决方案的实际运行情况。

Answer 2

用classNames自定义样式效果更好。

例如：

<AccordionItem 
 ...
 classNames={{
    title: "text-white",
    trigger: "bg-green-500",
  }}
/>