时间戳

首页 > 解决方案 > Nextjs Bootstrap 正在覆盖 CSS

reactjs - Nextjs Bootstrap 正在覆盖 CSS

问题描述

我正在学习 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 是在我的样式之后呈现的，是否有任何解决方法可以解决这个问题。

标签： reactjsnext.js

解决方案

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

推荐阅读