如何自定義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組件？

回答

相關問題