CODEWITHSUNDEEP
javascriptcssreactjsjsxreact-bootstrap
Jacobo Koenig
Jacobo Koenig

Reputation: 12534

Custom Style on React-Bootstrap's Dropdown Menu component

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.

enter image description here

Upvotes: 8

Views: 21547

Answers (3)

guy dadon
guy dadon

Reputation: 322

you use DropDown.Menu and DropDown.Item in the following way

<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 customs CSS like

.my-dropdown {
  border-radius: 0;
}

Upvotes: 0

rahul_sann
rahul_sann

Reputation: 314

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

Upvotes: 5

Jacobo Koenig
Jacobo Koenig

Reputation: 12534

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;
}

Upvotes: 1

Related Questions