Closed nishant-vagh closed 7 months ago
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
@
Have you checked whether the CSS
bg-gray-400
is applied using developer tools? Share yourtailwind.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
@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 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.
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
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
@nishant-vagh could you please create an example at codesandbox so someone can investigate the issue?
>
@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
Your sandbox isn't accessible. Let me know if you can still reproduce this.
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.
Steps to reproduce
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.