reactjs - 为什么即使根本没有使用 .btn-primary 类也会被应用？

Question

我真的很困惑为什么在这里使用 .btn-primary 类，为什么 .btn-outline-* 没有正确显示正确的背景颜色(它有不应该有的蓝色背景)。这是代码

import React from "react";
import Button from "react-bootstrap/Button";

function Skills() {
  return (
    <section id="section3">
      <div className="item1">
        <h1>Work In progress!</h1>
      </div>
      <div className="item2">
        <Button className="btn btn-outline-dark">HI</Button>
      </div>
      <div className="item3"></div>
    </section>
  );
}

export default Skills;

如你所见，.btn-primary 就在那里

Answer 1

来自 React 的 Button 组件具有 primary 的默认变体。即使您未在此处指定它，它也会自动假定它。这就是您获得 btn-primary 类的原因。不使用类，只使用变体

import React from "react";
import Button from "react-bootstrap/Button";

function Skills() {
  return (
    <section id="section3">
      <div className="item1">
        <h1>Work In progress!</h1>
      </div>
      <div className="item2">
        <Button variant="btn-outline-dark">HI</Button>
      </div>
      <div className="item3"></div>
    </section>
  );
}

export default Skills;