Reactjs Bootstrap Overriding CSS

css reactjs next.js

10,958

Solution 1

Because bg-light has universal selector '!important'.So,either remove bg-light or add your style as inline-style like below.

  <React.Fragment>
    <nav className="navbar navbar-expand-lg navbar-light bg-light" style={ 
       this.style}>
      <Brand name={this.props.name} target={this.state.collapseID} />
      <div className="collapse navbar-collapse" id={this.state.collapseID}>
        <PageList />
      </div>
    </nav>
  </React.Fragment>

Solution 2

In your render method, you are passing in this.style which is incorrect. Instead, you can assign the style object to that component like this:

render(props) {
    return (
      <React.Fragment>
        <nav className="navbar navbar-expand-lg navbar-light bg-light" style={this.style}>
          <Brand name={this.props.name} target={this.state.collapseID} />
          <div className="collapse navbar-collapse" id={this.state.collapseID}>
            <PageList />
          </div>
        </nav>
      </React.Fragment>
    );
  }

Also, if this doesn't work, you might want to override the color by changing your css to the following:

 style = {
    backgroundColor: "red !important"
  };

10,958

Nisarg Shah

Updated on June 04, 2022

Comments

Nisarg Shah almost 2 years

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.

Here is my code

/page/index.js

import Head from "next/head";
import Navbar from "../components/navbar";

export default () => (
  <div>
    <Head>
      <title>Testing</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous"
      />
      <script
        src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"
      />
      <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"
      />
      <script
        src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"
      />
    </Head>
    <Navbar name="Test" />
  </div>
);

/components/navbar.js

class NavBar extends React.Component {
  state = {
    collapseID: "navbarNav"
  };

  style = {
    backgroundColor: "red"
  };

  render(props) {
    return (
      <React.Fragment>
        <nav className="navbar navbar-expand-lg navbar-light bg-light" style={this.style}>
          <Brand name={this.props.name} target={this.state.collapseID} />
          <div className="collapse navbar-collapse" id={this.state.collapseID}>
            <PageList />
          </div>
        </nav>
      </React.Fragment>
    );
  }
}

export default NavBar;

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.