如何自定义react-bootstrap组件？

Question

覆盖css类/自定义react-bootstrap组件的最佳方法是什么？ - (我已经阅读过文档,除非我遗漏了一些内容,否则不予考虑).

从我所看到的,它似乎是内联样式(镭)和CSS模块之间的选择,但哪个更好,为什么？

Answer 1

我不确定这是否能回答您的问题,但文档清楚地提供了示例.比如Button

道具

+--------+---------+--------+--------------------------------------------+
|  Name  |  Type   | Default| Description                                |
+--------+---------+--------+--------------------------------------------+
|bsClass |  string | 'btn'  | Base CSS class and prefix for the component|
+--------+---------+--------+--------------------------------------------+

可以修改此选项以将自定义CSS类添加到Button组件.也可以通过设置componentClass来更改组件.

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

哪个custom-classCSS类可以

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

摆弄如何使用的例子bsClass.

内联样式:

根据bug填充,内联样式将不会被正式支持.

你想使用实际的风格道具.bsClass用于调整bootstrap css类应用于非内联样式的组件的方式

但问题表明:

如果你愿意,你可以自由使用它们.我们没有正式的意见.

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

Answer 2

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

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

或者

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

Answer 3

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%;
  }
}