如何自定义react-bootstrap组件？

Question

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

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

Answer 1

我不确定这是否回答了你的问题，但Documentation清楚地提供了例子。例如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-class是可以的CSS类

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

Fiddle以及如何使用bsClass的例子。

内联样式：

根据bug填写，内联样式将不会正式支持。

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

但issue说：

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

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

Answer 2

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

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

要么

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