title: Adding custom styles to bootstrap clases in react.
body: <p>I have an react component, with two buttons: </p>
  
  <pre><code>import React from 'react'
  import './BuildControl.css'
  import { Button } from 'react-bootstrap';
  
  
  const buildControl = (props) =&gt; (
      &lt;div className="BuildControl"&gt;
             &lt;div className="Label"&gt; {props.label}&lt;/div&gt;
              &lt;Button bsStyle="warning" &gt;Less&lt;/Button&gt;
              &lt;Button bsStyle="custom"&gt;More&lt;/Button&gt;
      &lt;/div&gt;
  );
  
  export default buildControl;
  </code></pre>
  
  <p>I used the warning button, for the one class, and custom for the other. </p>
  
  <p>Then I added some styling for my custom button</p>
  
  <pre><code>.btn-custom {
  background-color: #99703F;
  color: white;
  }
  
  .btn-custom:hover {
      background-color:  rgba(100, 63, 15, 0.637);
      color: white;
  }
  .btn-custom:active{
      background-color:  rgba(61, 37, 6, 0.637);
      color: white;
      border: 1.5px solid rgb(228, 206, 204);
  }
  </code></pre>
  
  <p>this works fine, but now my problem is that I want to add the border to the button with the <code>bsStyle="warning"</code> as well, how can I do this?</p>
  
  <p>I know I could just make a style component inside my component and add that, but I don't think it would be a best practice, since I'm already importing CSS from an external file, on the other button? How can I solve this the best way possible </p>