flowbite-react
flowbite-react copied to clipboard
Sidebar.Item does not show correct active background color
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