Can't theme `<Accordion>` subcomponents directly

[nkabour]

• I have searched the Issues to see if this bug has already been reported
• 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>