themesberg / themesberg/flowbite-react
Can't theme `<Accordion>` subcomponents directly
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.1k
- Forks
- 506
- PR merge metrics
- No merged PRs in 30d
Description
- I have searched the Issues to see if this bug has already been reported
- I have tested the latest version
Steps to reproduce
- create a basic accordion component
- create a component custom theme
- 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>
)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue using the Accordion example and the linked custom-theme documentation. Trace how the Accordion theme reaches its subcomponents, then verify that the custom title styles are applied when the Accordion is rendered. Confirm the result against the expected behavior described in the issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100