如何自定义react-bootstrap组件? [英] How to customise react-bootstrap components?

问题描述

重写CSS类/自定义react-bootstrap组件的最佳方法是什么? -(我已经阅读了文档，除非我丢失了某些内容，否则不会涵盖在内).

What is the best way to override css classes/customise react-bootstrap components? - (I have read the docs, and unless I am missing something, this isn't covered).

从我阅读的内容来看，似乎可以在内联样式(半径)和CSS模块之间进行选择，但是哪个更好，为什么?

From what I have read, it seems like it's a choice between inline styles (radium) and css modules but which is better and why?

推荐答案

我不确定这是否能回答您的问题，但文档明确提供了示例.例如按钮

I am not sure if this answers your question but Documentation clearly provide examples. For instance Button

道具

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

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

This one could be modified to add custom CSS class to your Button component. Also component could be changed with setting componentClass.

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

custom-class是可能的CSS类

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

provide new, non-Bootstrap, CSS styles for a component.

小提琴，其中包含有关如何使用bsClass的示例.

Fiddle with example of how to use bsClass.

内联样式:

根据 bug 填充，内联样式将不受正式支持.

According to bug filled, inline styles will not be supported officially.

您要使用实际的样式道具. bsClass用于调整 引导css类应用于非内联组件的方式 样式

you want to use the actual style prop. bsClass is for adjusting the way bootstrap css classes are applied to the components not inline styles

但是问题指出:

如果需要，您可以自由使用它们.我们没有正式意见.

You're free to use them if you want. We have no formal opinion.

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

NOTE Not all components provided by react-bootstrap allow class customization through bsClass, for example Breadcrumb

这篇关于如何自定义react-bootstrap组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！