Search code examples
tailwind-cssaccordionnextui

NextUI Accordion Background Color

I am working in NextUI V2.2.10 with Tailwind CSS. I have an accordion item that I want to custom style outside of the theme (I actually just want to flip the background color and text color on the item to make it pop on the page). The example code below changed the text color perfectly fine, but not the background color of the accordion. Whatever I try, I can't seem the change the background color of the accordion. Any suggestions?

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

I have looked through the NextUI documentation, but can't find an appropriate description of how to do this. I have also tried google (but can't find an example) and ChatGPT v4 (who can't offer a working example).

Solution

  • In developer tools, looking at the CSS applied to the HTML of the Accordion we see that some CSS that applies the background color is more specific than the bg-green-500 class:

    enter image description here

    We can increase the specificity of the bg-green-500 by adding !important to the applied declaration by prefixing the class name with ! so that the class name becomes !bg-green-500:

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

    With this change, the !bg-green-500 class takes precedence:

    enter image description here

    enter image description here

    See this solution working live in this StackBlitz.