我正在学习reaction和nextjs，并且面临一个问题，其中引导的css覆盖了我自己的css。
以下是我的代码
Index.js
import Head from "next/head";
import Navbar from "../components/PrimaryBtn";
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>
<PrimaryBtn color="blue">click<PrimaryBtn />
</div>
);PrimaryBtn.js
import React from 'react';
import styles from './PrimaryBtn.css';
export default const PrimaryBtn = (props) => {
return (
<div>
<button className={`btn btn-primary ${styles[props.color]}`}>{props.children}</button>
</div>
);
}PrimaryBtn.css
.blue {
background-color: blue;
}这个背景色被Bootstrap类覆盖，因为Bootstrap CDN是在我的样式之后呈现的。有什么办法可以解决这个问题吗？
2条答案
按热度按时间yfwxisqw1#
如果将
console.log(styles)放在PrimaryBtn呈现函数中，我假设您会看到null或undefined。JAVASCRIPT不能理解css，将它导入到您的JAVASCRIPT代码中只是为了确保webpack(或类似的人)将它包含在您的捆绑包中。你只需要在你的className中包括你的班名，我相信className={btn btn-primary ${props.color}}就是你要找的。xriantvc2#
我也面临着同样的问题。我通过更改引导的导入来修复它。我没有导入这个：
import "bootstrap/dist/css/bootstrap.css";，而是在_app.js的头部导入了Bootsrap CSS，如下所示：code screen shot for help