title: Reactjs Bootstrap Overriding CSS
body: <p>I am learning react and nextjs, and am faced with a problem where the bootstrap css is overriding my own css. Basically I have a navbar component with a style of backgroundColor red but unfortunately the bootstrap css then overrides the style. I need help to find a better way to achieve this result.</p>
  
  <p>Here is my code</p>
  
  <p>/page/index.js</p>
  
  <pre><code>import Head from "next/head";
  import Navbar from "../components/navbar";
  
  export default () =&gt; (
    &lt;div&gt;
      &lt;Head&gt;
        &lt;title&gt;Testing&lt;/title&gt;
        &lt;meta name="viewport" content="initial-scale=1.0, width=device-width" /&gt;
        &lt;link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
          crossorigin="anonymous"
        /&gt;
        &lt;script
          src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"
        /&gt;
        &lt;script
          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
          integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
          crossorigin="anonymous"
        /&gt;
        &lt;script
          src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
          integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
          crossorigin="anonymous"
        /&gt;
      &lt;/Head&gt;
      &lt;Navbar name="Test" /&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>/components/navbar.js</p>
  
  <pre><code>class NavBar extends React.Component {
    state = {
      collapseID: "navbarNav"
    };
  
    style = {
      backgroundColor: "red"
    };
  
    render(props) {
      return (
        &lt;React.Fragment&gt;
          &lt;nav className="navbar navbar-expand-lg navbar-light bg-light" style={this.style}&gt;
            &lt;Brand name={this.props.name} target={this.state.collapseID} /&gt;
            &lt;div className="collapse navbar-collapse" id={this.state.collapseID}&gt;
              &lt;PageList /&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default NavBar;
  </code></pre>
  
  <p>The red style keeps getting overrided by bootstrap
  If there is someway to improve this code please let me know. I appreciate all the help. Thank you.</p>