Custom Style on React-Bootstrap's Dropdown Menu component
Solution 1
Add a custom className to <MenuItem></MenuItem>
and edit it by appending a a
at the end of className in your .css file while customising.
In your .js file:
<MenuItem className="dropdown-link"> DaItem </MenuItem>
In your .css file: (Note the a
in the selector)
.dropdown-link a {background: red; color: yellow;}
P.S: You may need to add !important
in .css
Solution 2
Thank you all, I found an way to this! I was able to access the specific menu by including [aria-labelledby = ddown] (ddown is my dropdown's custom class) on the CSS like so:
.dropdown-menu[aria-labelledby = ddown] {
background-color: lightblue;
max-width: 80px; //This, by the way, is not working for some reason.
border-radius: 0;
margin: 0;
}
Related videos on Youtube
Jacobo Koenig
Updated on September 15, 2022Comments
-
Jacobo Koenig over 1 year
I am trying to apply a custom css style to a react bootstrap component, but cannot figure how to access elements that are not explicit in the component's JSX. For example:
<ButtonGroup> <DropdownButton className="ddown" id="ddown" title="Dropdown"> <MenuItem className="itemxx" href="#books">Books</MenuItem> <MenuItem className="itemxx" href="#podcasts">Podcasts</MenuItem> <MenuItem className="itemxx" href="#">Tech I Like</MenuItem> <MenuItem className="itemxx" href="#">About me</MenuItem> <MenuItem className="itemxx" href="#addBlog">Add a Blog</MenuItem> </DropdownButton> </ButtonGroup>
has no outlet for the Dropdown box, which I am looking to give a specific width and eliminate its rounded corners. Is there a way that I can access it in my css?
EDIT:
Here is the element I want to edit, which by the way if I try to access through .dropdown-menu, 1) I change all dropdowns, and 2) I cant change most of its values.
-
Dandy over 7 yearsWhy didn't you just add an extra class with
className="ddown ddown-custom"
? -
Jacobo Koenig over 7 yearsThanks Dandy. Because the tag I am trying to access is "written" by bootstrap, but nowhere in my code do I get access to name the actual tag that I need which is the Dropdown Menu (not the dropdown button you see in my code above).