如何自定义react-bootstrap组件？

覆盖CSS类/自定义react-bootstrap组件的最佳方法是什么？ - （我已经阅读过文档，除非我错过了一些东西，这不包括在内）。如何自定义react-bootstrap组件？

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

2016-11-22 AloeVeraForty

的主题是主观的。根据您的需要，您可以根据需要选择任何一种方式。在我们的例子中，遗留代码使用'less'。所以我们必须从bootstrap的源代码中覆盖variables.less。我们创建了我们自己的variables.less文件，它将覆盖像@brandPrimary这样的变量，这是着名的bootstrap主要颜色。 – Mihir

我不确定这是否回答您的问题，但Documentation明确提供示例。例如Button

道具

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

这一个可以修改自定义CSS类添加到您的按钮组件。还可以通过设置componentClass来更改组件。

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

哪里custom-class是CSS类，可以

提供新的，非引导，CSS样式组件。

Fiddle与例如如何使用bsClass。

内联样式： 目前还没有办法覆盖内联CSS样式。检查bug充满此。

你想使用实际的样式道具。 bsClass是调整方式引导CSS类应用到组件不能内联风格

来源

2016-11-22 11:48:23 wolendranh

我不确定这是否完全正确 - https://react-bootstrap.github.io/components.html#custom-styles。 – AloeVeraForty

@AloeVeraForty我认为这取决于你有哪些特殊情况。两者都是有效的。 – wolendranh

使用您建议的方法，是否可以使用内联样式？ - 如果你可以提供一些示例代码>>> – AloeVeraForty

我认为这个问题的答案对大多数人（像我）是一个可以添加自定义的样式做出反应，引导部件使用style道具。例如。用蓝色文字默认按钮：

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

或

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

来源

2017-09-08 11:58:39

如何自定义react-bootstrap组件？

回答

相关问题