Custom Style on React-Bootstrap's Dropdown Menu component
css, javascript, jsx, react-bootstrap, reactjs
Solution
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
Problem
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.