Nextjs Bootstrap 正在覆盖 CSS答案

【问题标题】：Nextjs Bootstrap is Overriding CSSNextjs Bootstrap 正在覆盖 CSS
【发布时间】：2023-03-20 02:17:01
【问题描述】：

我正在学习 react 和 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 是在我的样式之后渲染的，有什么办法可以解决这个问题。

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

如果你在你的PrimaryBtn 渲染函数中加入一个console.log(styles)，我假设你会看到null 或undefined。 JavaScript 不理解 CSS，将其导入您的 JavaScript 代码仅用于确保 Webpack（或类似的）将其包含在您的包中。您只需在className 中包含您的班级名称，我相信className={`btn btn-primary ${props.color}`} 就是您要查找的内容。

【讨论】：

那不是问题。我使用了模块 css，它改变了我的类名，样式将包含我改变的类名。