title: Custom Style on React-Bootstrap's Dropdown Menu component
body: <p>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:</p>
  
  <pre><code>&lt;ButtonGroup&gt;
        &lt;DropdownButton className="ddown" id="ddown" title="Dropdown"&gt;
        &lt;MenuItem className="itemxx" href="#books"&gt;Books&lt;/MenuItem&gt;
        &lt;MenuItem className="itemxx" href="#podcasts"&gt;Podcasts&lt;/MenuItem&gt;
        &lt;MenuItem className="itemxx" href="#"&gt;Tech I Like&lt;/MenuItem&gt;
        &lt;MenuItem className="itemxx" href="#"&gt;About me&lt;/MenuItem&gt;
        &lt;MenuItem className="itemxx" href="#addBlog"&gt;Add a Blog&lt;/MenuItem&gt;
        &lt;/DropdownButton&gt;
      &lt;/ButtonGroup&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>EDIT:</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/D2yxS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/D2yxS.png" alt="enter image description here"></a></p>