Reactjs Bootstrap 覆盖 CSS

Question

我正在学习 React 和 nextjs，并且遇到 bootstrap css 覆盖我自己的 css 的问题。基本上我有一个带有 backgroundColor 红色样式的导航栏组件，但不幸的是 bootstrap css 然后覆盖了样式。我需要帮助找到更好的方法来实现这个结果。

这是我的代码

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

红色样式不断被 bootstrap 覆盖如果有办法改进此代码，请告诉我。我感谢所有的帮助。谢谢。

Answer 1

因为 bg-light 有通用选择器 '!important'。所以，要么删除 bg-light 要么添加你的样式 inline-style 如下所示。

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

Answer 2

在您的渲染方法中，您传入的 this.style 是不正确的。相反，您可以像这样将样式对象分配给该组件：

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

此外，如果这不起作用，您可能希望通过将 css 更改为以下内容来覆盖颜色：

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

Reactjs Bootstrap 覆盖 CSS

Reactjs Bootstrap Overriding CSS

css

reactjs

next.js