Need to remove bottom padding
I am using flowbite react sidebar component
there appears a div in dev console with py-4 I cant override it
in code I have marked where the div appears in between those tags
15 Replies
target the div with a selector with higher specificity and add
padding-bottom: 0;Ohh so I cant mentions className ="" anywhere and do it directly
"do it directly" is targeting it with a css selector, really
if the component doesn't expose that div's class list, you'd have to edit the component or change the list using javascript after, but both aren't great options
I meant in the HTML part ....but the div itself it not accessible
its in between Sidebar and Sidebar.Items
that's the tradeoff with using pre-made components
but plain-old vanilla CSS shouldn't have an issue overwriting that style, it's what it's made for after all
so this editing to pre made components...shoudnt be a part of global css right ?
just an extra css file along the component folder
depends on how you lay out your files and how often you use this sidebar component, but both could work
thanks
Adding
[&>nav>div]:pb-0 in the sidebar might resolve this:
<div id="sidebar-logo" className="flex [&_nav>div]:pb-0">WTF is this magic 🧐
I spent 2 hours ... scratching my head
in Tailwind you can add "proper" CSS within square brackets, the only thing to bear in mind is that you can't have spaces so, if you need a space, you have to use an underscore.
That would be the same as:
Hi
In the sidebar items ...how does one control the colors or sizes of icon
and
Like i dont get it theres no documentation around in flowbite react for customisation ,
how do i know what properties or classes any component supports
I have no idea about flowbite and very little about React. Sorry.
in very general terms, and I realize it's a PITA, you can just open the source for the component and read it