React Bootstrap未使用.btn-primary样式类却被自动应用的问题

• 代码未主动给按钮添加.btn-primary类，但浏览器渲染后该类被自动挂载到按钮元素上
• 预期使用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类被自动注入：

React Bootstrap的Button组件默认variant属性值为primary，组件渲染逻辑会自动根据variant属性生成对应的类名：

1. 组件本身会自动添加基础.btn类，手动在className里加.btn属于冗余写法
2. 未显式传入variant属性时，组件会默认追加.btn-primary类，手动通过className添加的.btn-outline-dark只会和默认类同时存在，不会覆盖默认类生成逻辑
3. 两个样式类同时生效时，.btn-primary的蓝色背景样式优先级覆盖了outline按钮的透明背景规则，导致样式异常

使用React Bootstrap按钮组件时，所有内置按钮样式必须通过variant属性指定，不需要手动通过className添加Bootstrap官方的按钮类名。
修复后的正确代码：

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="outline-dark">HI</Button>
      </div>
      <div className="item3"></div>
    </section>
  );
}

export default Skills;

内容的提问来源于stack exchange，提问作者Kamran