如何定制react-bootstrap组件？

Question

覆盖css类/定制react-bootstrap组件的最好方法是什么？-(我已经阅读了文档，除非我遗漏了什么，否则不会涉及)。

据我所知，它似乎是内联样式(radium)和css模块之间的选择，但哪一个更好?为什么？

Answer 1

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

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

或

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

Answer 2

使用SCSS的

示例

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

然后，在样式表中，您可以利用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%;
  }
}

Answer 3

我也有同样的问题，我搜索了几个博客，得到的答案是！重要。我正在寻找一种更通用的解决方案，但除了添加！对我们想要覆盖的每个元素都很重要之外，没有找到任何其他解决方案。

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