Open Mnehaal2000 opened 2 weeks ago
yes I also have same issue, on focus for example...
Hey @Mnehaal2000 ,
are you using TypeScript
or JavaScript
?
also, for your above code snippet, try below one code snippet:
const customFloorAccordionTheme: CustomFlowbiteTheme = {
accordion: {
// your remaining code
}
}
or you can have other option as well:
const customFloorAccordionTheme: CustomFlowbiteTheme['accordion'] = {
// your remaining code
}
either of this code snippet should work, can you try this @Mnehaal2000
Hey @Mnehaal2000 ,
are you using
TypeScript
orJavaScript
?also, for your above code snippet, try below one code snippet:
const customFloorAccordionTheme: CustomFlowbiteTheme = { accordion: { // your remaining code } }
or you can have other option as well:
const customFloorAccordionTheme: CustomFlowbiteTheme['accordion'] = { // your remaining code }
either of this code snippet should work, can you try this @Mnehaal2000
I am using a combination and I have already tried your suggestion. Nothing seems to work. I am using other custom Themes in the project too using the same method and everything else works except this accordion theme So I am confused.
I'm encountering the same problem as well. But another solution I tried was to provide the title
and content
parts of the theme directly to the Accordion.Title
and Accordion.Content
components, since the Docs say passing theme directly to any component, "will override the theme for that component, but not its children":
const accordionTheme = {
root: {
base: 'divide-y-2 border-2 divide-gray-200 border-gray-200 dark:divide-gray-600 dark:border-gray-600',
},
content: {
base: 'p-5 first:rounded-t-lg last:rounded-b-lg dark:bg-gray-700',
},
title: {
base: 'flex w-full items-center justify-between p-5 text-left font-medium text-gray-500 first:rounded-t-lg last:rounded-b-lg dark:text-gray-400',
flush: {
off: 'hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-600 dark:focus:ring-gray-600',
on: 'bg-transparent dark:bg-transparent',
},
open: {
off: '',
on: 'bg-gray-100 text-gray-900 dark:bg-gray-600 dark:text-white',
},
},
};
// ...
<Accordion theme={accordionTheme}>
{resourceData.map((resource) => (
<Accordion.Panel theme={accordionTheme}>
<Accordion.Title theme={accordionTheme.title}>
{/* ... */}
</Accordion.Title>
<Accordion.Content theme={accordionTheme.content}>
{/* ... */}
</Accordion.Content>
</Accordion.Panel>
))}
</Accordion>
That worked for applying the required styles to the title and content components, but unfortunately the required styles still did not apply for the root accordion component itself.
As a workaround, I just applied those remaining styles using className
to the root Accordion
component
Current behavior
Custom Theme not applying on Flowbite Accordion