You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
The Sidebar.Item component does not display custom tailwind css active background color after mouse click has been released, and displays the default bg-gray-100.
example:
<Sidebar.Item
active={true}
className={'active:bg-green-500 dark:active:bg-green-500'}
>
This is a test item
</Sidebar.Item>
the background color of this item should be bg-green-500 because the active prop is true, but the displayed color is bg-gray-100. the bg-green-500 only shows when a mouse click is held on the item, and returns to gray as soon as the click is released
To Reproduce
declare a Sidebar with a Sidebar.Item
set the Sidebar.Item active prop to true
use the tailwind css className to set a custom active bg color.
Expected behavior
that the active color enumerated in the tailwind css classname should be displayed when the active prop is true regardless of whether or not there is an active mouse click event
Desktop (please complete the following information):
OS: Ubuntu 20.04 and MacOs Ventura 13.6.1
Browsers: Chromium 123.0, Firefox 124.0
The text was updated successfully, but these errors were encountered:
currently the className you're passing to the Sidebar.Item is being to the div element and it's not being used on the active item.
For this you can use Sidebar Theme in order to change the default bg color to your custom one. Below is a code snippet which can help you to change the bg-color of the active item.
importtype{CustomFlowbiteTheme}from"flowbite-react"// this is only required if you're using TypeScript in your React/Nextjs/Remix project// if TypeScript then use below code snippetconstcustomSidebarTheme: CustomFlowbiteTheme['sidebar']={// other Sidebar Theme Options based on themes link shared above,item: {active: "active:bg-green-500 dark:active:bg-green-500"}}// use below if you're using jsxconstcustomSidebarTheme={// other Sidebar Theme Options based on themes link shared above,item: {active: "active:bg-green-500 dark:active:bg-green-500"}}return(<Sidebartheme={customSidebarTheme}><Sidebar.Itemactive={true}>
This is a test item
</Sidebar.Item></Sidebar>)
this way you can change the default bg color to the one which you required.
Describe the bug
The Sidebar.Item component does not display custom tailwind css active background color after mouse click has been released, and displays the default bg-gray-100.
example:
the background color of this item should be bg-green-500 because the active prop is true, but the displayed color is bg-gray-100. the bg-green-500 only shows when a mouse click is held on the item, and returns to gray as soon as the click is released
To Reproduce
Expected behavior
that the active color enumerated in the tailwind css classname should be displayed when the active prop is true regardless of whether or not there is an active mouse click event
Desktop (please complete the following information):
The text was updated successfully, but these errors were encountered: