sidebar bgcolor not change with class name about flowbite-react HOT 11 CLOSED

@

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

from flowbite-react.

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

from flowbite-react.

@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.

from flowbite-react.

@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.

from flowbite-react.

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

from flowbite-react.

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

from flowbite-react.

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

from flowbite-react.

> @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

from flowbite-react.

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

from flowbite-react.

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

from flowbite-react.

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.

from flowbite-react.