我正在学习 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 覆盖 如果有办法改进此代码，请告诉我。我感谢所有的帮助。谢谢。
最佳答案
因为 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>
关于css - Reactjs Bootstrap 覆盖 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51796381/