IT虾米网

reactjs之如何自定义react-bootstrap组件

kevingrace 2025年12月25日 程序员 19 0

覆盖 CSS 类/自定义 React-Bootstrap 组件的最佳方法是什么? -(我已阅读文档,除非我遗漏了某些内容,否则不会涵盖此内容)。

从我读到的内容来看,似乎是在内联样式(镭)和 css 模块之间进行选择,但哪个更好,为什么?

请您参考如下方法:

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

Prop

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

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 类

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

Fiddle包含如何使用 bsClass 的示例。

内联样式:

根据bug正式不支持填充、内联样式。

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

但是issue指出:

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

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


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!