sidebar bgcolor not change with class name

[nishant-vagh]

• I have searched the Issues to see if this bug has already been reported)
• I have tested the latest version

<Sidebar collapsed={isCollapsed} className="bg-gray-400" >
    <Sidebar.Items className="bg-gray-400">
        <Sidebar.ItemGroup>
            <Sidebar.Item className="" href="#" icon={HiChartPie}  onClick={() => {toggleCollapse()}}>
                 Dashboard
            </Sidebar.Item>
            <Sidebar.Item href="#" icon={HiViewBoards} >
                Kanban
            </Sidebar.Item>
            <Sidebar.Item href="#" icon={HiInbox} >
                Inbox
            </Sidebar.Item>
            <Sidebar.Item href="#" icon={HiUser}>
                Users
            </Sidebar.Item>
            <Sidebar.Item href="#" icon={HiShoppingBag}>
                Products
            </Sidebar.Item>
            <Sidebar.Item href="#" icon={HiArrowSmRight}>
                Sign In
            </Sidebar.Item>
            <Sidebar.Item href="#" icon={HiTable}>
                Sign Up
            </Sidebar.Item>
        </Sidebar.ItemGroup>
    </Sidebar.Items>
</Sidebar>

Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'

Current behavior

Describe what is currently happening and why it's a problem.

Expected behavior

color set in side bar

expected

Context

What are you trying to accomplish? Does this only happen on a specific browser, screen size, or operating system?

If possible, provide a live example URL, screenshot, video, or a repository with the minimal reproduction of the issue.

[tulup-conner]

Have you checked whether the CSS bg-gray-400 is applied using developer tools? Share your tailwind.config.js - my guess is you are missing step 2 of the install guide https://github.com/themesberg/flowbite-react#install-flowbite-react

[nishant-vagh]

@

Have you checked whether the CSS bg-gray-400 is applied using developer tools? Share your tailwind.config.js - my guess is you are missing step 2 of the install guide https://github.com/themesberg/flowbite-react#install-flowbite-react

install properly apply but not chage background color becuase defult color not remove

[rluders]

@nishant-vagh The best approach to customize complex elements such as Sidebar is to use the theme system. Some of the classes/styles that you are trying to change are part of the inner component's objects.

[nishant-vagh]

@nishant-vagh The best approach to customize complex elements such as Sidebar is to use the theme system. Some of the classes/styles that you are trying to change are part of the inner component's objects.

i have also try but

@nishant-vagh The best approach to customize complex elements such as Sidebar is to use the theme system. Some of the classes/styles that you are trying to change are part of the inner component's objects.

[rluders]

Have you tried to use this approach? https://www.flowbite-react.com/docs/customize/theme#option-3-create-a-reusable-component-with-a-custom-theme

[nishant-vagh]

Have you tried to use this approach? https://www.flowbite-react.com/docs/customize/theme#option-3-create-a-reusable-component-with-a-custom-theme

yes i have try it
but still not work

[rluders]

@nishant-vagh could you please create an example at codesandbox so someone can investigate the issue?

[nishant-vagh]

> @nishant-vagh could you please create an example at codesandbox so someone can investigate the issue?

https://github.com/niks200/sandbox.git
https://codesandbox.io/p/github/niks200/sandbox/main?workspaceId=613aa74a-900e-4c82-ab21-7f2270f174f7

[tulup-conner]

Your sandbox isn't accessible. Let me know if you can still reproduce this.

[nishant-vagh]

Your sandbox isn't accessible. Let me know if you can still reproduce this.
https://codesandbox.io/p/github/niks200/sandbox/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clq3mq1yf0008356irzjfqcu5%2522%252C%2522sizes%2522%253A%255B70.63979525302304%252C29.36020474697696%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clq3mq1yf0002356igfb08ozs%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clq3mq1yf0005356ivg6vf1w5%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clq3mq1yf0007356ifd1eg1wx%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clq3mq1yf0002356igfb08ozs%2522%253A%257B%2522id%2522%253A%2522clq3mq1yf0002356igfb08ozs%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clq3mq1yf0007356ifd1eg1wx%2522%253A%257B%2522id%2522%253A%2522clq3mq1yf0007356ifd1eg1wx%2522%252C%2522activeTabId%2522%253A%2522clqw6wi89004e356i54rpzd35%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clq3mq1yf0006356ix3898s3s%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%2522%257D%252C%257B%2522type%2522%253A%2522SETUP_TASKS%2522%252C%2522id%2522%253A%2522clqw6wi89004e356i54rpzd35%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clq3mq1yf0005356ivg6vf1w5%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clq3mq1yf0003356ijb7ngadz%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522id%2522%253A%2522clq3mq1yf0004356iwn5nm0ee%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clq3lnf7o0012egfuhdjp3epd%2522%257D%255D%252C%2522id%2522%253A%2522clq3mq1yf0005356ivg6vf1w5%2522%252C%2522activeTabId%2522%253A%2522clq3mq1yf0003356ijb7ngadz%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[tulup-conner]

It looks like all you need to do is apply the color to the root.inner theme specifically, since a bg-gray-50 is currently supplied there.

That looks like:

import { Sidebar, theme } from 'flowbite-react';
import { twMerge } from 'tailwind-merge';

<Sidebar theme={{
  inner: twMerge(theme.sidebar.root.inner, "bg-pink-800")
}}>
 ..
</Sidebar>

This obviously isn't optimal - we should definitely consider moving all or most of the styling out of this inner key to make it more intuitive. E.g., you should be able to just do this with className without hacks. You can actually do it with className as well by specifying the inner <div> as the target - e.g., <Sidebar className="[&>div]:bg-pink-800">

I tested on your Code Sandbox and each of those works just fine.