Can't theme `<Accordion>` subcomponents directly

[nkabour]

• [x] I have searched the Issues to see if this bug has already been reported
• [x] I have tested the latest version

Steps to reproduce

1. create a basic accordion component
2. create a component custom theme
3. attach the custom theme to the accordion component

Current behavior

custom component theme doesn't change the accordion component styles

Expected behavior

custom component theme applies style changes to the accordion component

Context

What are you trying to accomplish? Small theme customization. Does this only happen on a specific browser, screen size, or operating system? (Chrome/Safari, MacOS)

Example

import {
  Accordion as AccordionComponent,
  DeepPartial,
  FlowbiteAccordionTheme,
} from "flowbite-react"
import { FC } from "react"
import { AccordionProps } from "./types"

const customTheme: DeepPartial<FlowbiteAccordionTheme> = {
  title: {
    base: "bg-blue-200 hover:bg-blue-100 hover:last-type:rounded-b-lg",
    open: {
      off: "",
      on: "hover:last-type:rounded-b-0",
    },
  },
}

export const Accordion: FC<AccordionProps> = ({ panels, alwaysOpen }) => (
  <AccordionComponent alwaysOpen={alwaysOpen} collapseAll theme={customTheme}>
    {panels.map((el) => (
      <AccordionComponent.Panel key={el.id}>
        <AccordionComponent.Title>
          {el.icon && <span className={`${customTheme.icon}`}>{el.icon}</span>}
          {el.title}
        </AccordionComponent.Title>
        <AccordionComponent.Content>{el.content}</AccordionComponent.Content>
      </AccordionComponent.Panel>
    ))}
  </AccordionComponent>
)

[dev-gush]

Having the same issue

[rluders]

@nkabour @dev-gush could you folks please confirm that you both are using the >= 0.5.0 version?

[nkabour]

@nkabour @dev-gush could you folks please confirm that you both are using the >= 0.5.0 version?

yes i'm using the latest version 0.6.0

[dev-gush]

I was using 0.5.0 but it is not working even after upgrading it to 0.6.0

[rluders]

Perfect. Thank you folks.

[dev-gush]

Well? Is there a workaround available?

[MateoWartelle]

I will take a look and share a pr.

[wjustice]

I'm having the same problem and same behavior but in attempting to them the Button component.

[dmytro-machulskyi]

I am using next.js and using props for arrow icon like that: arrowIcon={() => <Image {...ArrowDownIcon} />}

theme: title: { arrow: { base: "h-6 w-6 shrink-0", open: { off: "", on: "rotate-180", }, }, },

but rotate is not working ArrowDownIcon is just .svg file

[MarceCandil]

I came to confirm this problem :), any workaround?

[tulup-conner]

If you are still having this issue, I believe the problem is theme settings for child components (in this example, <Accordion.Title>) aren't applied when you set them from <Accordion theme={}>. Can anyone confirm if they work correctly when applied directly to each <Accordion.Title>? That's not the desired behavior if so.

[syntaxaire]

If you are still having this issue, I believe the problem is theme settings for child components (in this example, <Accordion.Title>) aren't applied when you set them from <Accordion theme={}>. Can anyone confirm if they work correctly when applied directly to each <Accordion.Title>? That's not the desired behavior if so.

@tulup-conner I can confirm. For example, this works to style the accordion, but nothing else does.

const titleTheme = {
  arrow: {
    base: "bg-black",
    open: {
      off: "bg-black",
      on: "bg-black",
    },
  },
  base: "bg-black",
  flush: {
    off: "bg-black",
    on: "bg-black",
  },
  heading: "bg-black",
  open: {
    off: "bg-black",
    on: "bg-black",
  },
}
<Accordion>
  {faqData.map((item) => (
    <Accordion.Panel key={item.question}>
      <Accordion.Title theme={titleTheme}>
          {item.question}
      </Accordion.Title>
      <Accordion.Content>
        {item.answer}
      </Accordion.Content>
    </Accordion.Panel>
  ))}
</Accordion>

[syntaxaire]

I came to confirm this problem :), any workaround?

@MarceCandil If you still need a workaround: Sorry if this is a bit raw, it's from a site I'm working on. But this will work. Note that the subkeys of the theme are passed into different accordion elements. You can't pass the whole theme at once.

The comments explaining the theme may be only partially correct, but there doesn't seem to be any real documentation to draw on.

const customTheme = {
  "root": {
    // style for the entire accordion container
    "base": "divide-y divide-gray-200 border-gray-200",
    "flush": {
      // "flush" options are added to base. "off" is default.
      "off": "",
      "on": ""
    }
  },
  "content": {
    // style for content block when expanded
    "base": "py-5 pr-[40px] last:rounded-b-lg first:rounded-t-lg"
  },
  "title": {
    "arrow": {
      "base": "h-6 w-6 shrink-0",
      "open": {
        "off": "",
        "on": "rotate-180"
      }
    },
    // style for button that encloses a collapsed, clickable title
    "base": "flex w-full items-center justify-between first:rounded-t-lg last:rounded-b-lg py-5 px-5 text-left hover:bg-gray-100 focus:ring-4 focus:ring-gray-200",
    "flush": {
      // "flush" options are added to base. off seems to be the default
      "off": "font-normal",
      "on": ""
    },
    // 'heading' styles both collapsed and uncollapsed headings and overrides base
    "heading": "",
    "open": {
      "off": "",
      // style for opened titles
      "on": "font-bold"
    }
  }
}

<Accordion theme={customTheme["root"]} className='border-none mx-auto max-w-[695px]'>
  {faqData.map((item) => (
    <Accordion.Panel key={item.question}>
      <Accordion.Title theme={customTheme["title"]} className='px-0 py-6 bg-white hover:bg-white focus:ring-0 focus:outline-none'>
        <LgText>
          {item.question}
        </LgText>
      </Accordion.Title>
      <Accordion.Content theme={customTheme["content"]} className='border-0'>
        {item.answer}
      </Accordion.Content>
    </Accordion.Panel>
  ))}
</Accordion>