Question

我正在学习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是在我的样式解决之后解决的。

Answer 1

如果要在console.log(styles)渲染函数中放置PrimaryBtn，我假设您会看到null或undefined。 JavaScript无法理解CSS，将CSS导入到JavaScript代码中仅是为了确保Webpack（或类似的东西）将其包含在您的捆绑软件中。您只需要在您的className中加入班级的名称，我相信className={`btn btn-primary ${props.color}`}就是您想要的。

Nextjs引导程序将覆盖CSS

1 个答案: