Question

覆盖css类/自定义react-bootstrap组件的最佳方法是什么？ - （我已阅读过文档，除非我遗漏了某些内容，否则不予考虑）。

从我读过的内容来看，它似乎是内联样式（镭）和css模块之间的选择，但哪个更好，为什么？

Answer 1

我不确定这是否能回答您的问题，但full file清楚地提供了示例。例如Documentation

<强>道具

+--------+---------+--------+--------------------------------------------+
|  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-class是可以

的CSS类

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

Button以及如何使用bsClass的示例。

内联样式：

根据填充的Fiddle，内联样式将不会得到正式支持。

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

但bug表示：

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

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

Answer 2

我认为对大多数人（像我一样）的答案是，可以使用style道具为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%;
  }
}

Answer 4

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

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

Answer 5

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

如何自定义react-bootstrap组件？

5 个答案: