我不确定这是否能回答您的问题，但文档清楚地提供了示例。例如按钮

props

+--------+---------+--------+------------ -----------------------+
| 姓名 | 类型 | 默认| 说明 |
+--------+---------+--------+------------ -----------------------+
|bsClass | 字符串 | 'btn' | 组件的基本 CSS 类和前缀|
+--------+---------+--------+------------ -----------------------+

可以修改这个以将自定义 CSS 类添加到您的 Button 组件。也可以通过设置 componentClass 来更改组件。

<Button type="submit" onClick={this.submit}
 bsClass='custom-class'
>
</Button>

custom-class可以的 CSS 类在哪里

为组件提供新的、非 Bootstrap 的 CSS 样式。

摆弄如何使用bsClass.

内联样式：

根据已填充的错误，将不正式支持内联样式。

你想使用实际的样式props。bsClass 用于调整 bootstrap css 类应用于非内联样式的组件的方式

但问题指出：

如果您愿意，您可以自由使用它们。我们没有正式的意见。

注意并非 react-bootstrap 提供的所有组件都允许通过类自定义bsClass，例如Breadcrumb

我认为对于大多数人（像我一样）来说，答案是可以使用styleprop向 react-bootstrap 组件添加自定义样式。例如，对于带有蓝色文本的默认按钮：

<Button bsStyle="default" style={style.blueButton}>Button Text</Button>

或者

<Button bsStyle="default" style={{color:"blue"}}>Button Text</Button>

SCSS 示例

根据 React Bootstrap Docs，您可以使用属性 bsPrefix="custom-class" 创建自定义类。

然后在您的样式表中，您可以利用 css 特异性覆盖样式

 import styles from './RocketCard.module.scss';

 function RocketCard({ name }) { return (
     <div className={styles.rocketCardContainer}>
      {name}
      <Card className={styles.customCard} bsPrefix="customCard">
        <Card.Img variant="top" src="holder.js/100px180" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and 
            make up the 
            bulk of the card's
            content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
     </div>
    );
    }



// SCSS File
.rocketCardContainer {
  background-color: red;
  .customCard {
    width: 100%;
  }
}

我遇到了同样的问题，我搜索了几个博客，得到的答案是 !important。我一直在寻找更通用的解决方案，但除了向我们想要覆盖的每个元素添加 !important 之外，还没有找到任何其他解决方案。

.form-control { 
  border-radius: 30px !important;
  background-color: #f4f6f5 !important;
}

React-bootstrap 上有 NavLink 组件，你必须先导入它。

当您使用诸如 rt4-nav 之类的东西为 navlink 生成 Boostrap 代码时，NavLink 组件带有包含所有样式的 className="nav-link"，然后您可以覆盖该类，如下所示。

import 'bootstrap/dist/css/bootstrap.min.css'; import { NavLink } from 'react-bootstrap';

  <NavMenu className="d-flex">
      <NavLink className="nav-link">
          Inspirations
      </NavLink>
  </NavMenu>

const NavMenu = styled.div`
    .nav-link {
        font-size: 15px;
        font-weight: 500;
    }
`;