Custom Style on React-Bootstrap Component for Dropdown Menu
I'm trying to apply my own CSS styling to a bootstrap react component, but I can't figure out how to access elements that aren't explicit in the JSX component. 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 way out for the dropdown box which I am looking for to give a specific width and exclude its rounded corners. Is there a way to access it in my CSS?
EDIT:
Here is the item I want to edit, which by the way, if I try to access via the .dropdown-menu, 1) I change all the dropdowns, and 2) I cannot change most of its values.
source to share
Add your custom class name to <MenuItem></MenuItem>
and edit it by adding a
className at the end of your .css file when configuring.
In the .js file:
<MenuItem className="dropdown-link"> DaItem </MenuItem>
In your .css file: (notice a
in the selector)
.dropdown-link a {background: red; color: yellow;}
PS: You may need to add !important
to .css
source to share
Thanks everyone, I found a way to do this! I was able to access a specific menu by including [aria-labelledby = ddown] (ddown is my dropdown custom class) in CSS:
.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;
}
source to share
You are using DropDown.Menu and DropDown.Item like this
<Dropdown.Menu className="my-dropdown">
<Dropdown.Divider />
<Dropdown.Item className="itemxx" href="#books">Books</Dropdown.Item>
<Dropdown.Item>className="itemxx" href="#podcasts">Podcasts</Dropdown.Item>
</Dropdown.Menu>
and then add your custom CSS like
.my-dropdown {
border-radius: 0;
}
source to share