Wie passen reagieren-bootstrap-Komponenten?

Was ist der beste Weg, um überschreiben von css-Klassen/anpassen reagieren-bootstrap-Komponenten? - (Ich habe Lesen in der Dokumentation nach, und es sei denn, ich bin fehlt etwas, das ist nicht bedeckt).

Von dem, was ich gelesen habe, scheint es, wie es ist eine Wahl zwischen inline-styles (radium) und css-Module, aber welches ist besser und warum?

Das Thema ist subjektiv. Sie können gehen, je nachdem, wie Sie wollen, nach Ihren Bedürfnissen. In unserem Fall, den legacy-code wurde mit less. So hatten wir, Variablen zu überschreiben.weniger von bootstrap-source-code. Wir haben unsere eigenen Variablen.weniger Datei, die hätte Vorrang vor Variablen wie @brandPrimary, die berühmt bootstrap primäre Farbe.

InformationsquelleAutor AloeVeraForty | 2016-11-22

9

Ich bin nicht sicher, ob dies Ihre Frage beantwortet, aber Dokumentation eindeutig Beispiele. Zum Beispiel Button

Requisiten
```
+--------+---------+--------+--------------------------------------------+ 
| Name | Typ | Standardwert| Beschreibung | 
+--------+---------+--------+--------------------------------------------+ 
|bsClass | string | 'btn' | Base-CSS Klassen-und Präfix für die Komponente| 
+--------+---------+--------+--------------------------------------------+ 
```
Diese könnte geändert werden, um eigene CSS-Klasse für die Button-Komponente. Auch Komponenten können geändert werden, mit der Einstellung componentClass.
```
<Button type="submit" onClick={this.submit}
 bsClass='custom-class'
>
</Button>
```
Wo custom-class ist die CSS-Klasse, die könnte

neuen, nicht-Bootstrap-CSS-Stile für eine Komponente.

Fiddle mit Beispiel, wie bsClass.

Inline-styles:

Laut bug gefüllt, inline-styles werden nicht offiziell unterstützt.

den Sie verwenden möchten, die tatsächliche Stil prop. bsClass ist für die Anpassung der
Weg bootstrap-css-Klassen angewendet werden, um die Komponenten, die nicht inline
Stile

Aber Problem besagt, dass:

Du bist frei, Sie zu benutzen, wenn Sie wollen. Wir haben keine offizielle Stellungnahme.

HINWEIS Nicht alle Komponenten von reagieren-bootstrap erlauben Klasse Anpassung durch bsClass zum Beispiel Breadcrumb

Ich bin mir nicht sicher, dass ist völlig korrekt - reagieren-bootstrap.github.io/Komponenten.html#custom-styles.
Ich denke, das ist abhängig davon, welche Besondere Fall Sie haben. Beide sind gültig.
Mit der Methode, die Sie vorgeschlagen sind, ist es möglich, mit inline-styles? - es wäre hilfreich, wenn Sie könnten, bieten einige Beispiel-code >>>
ah ok, ich habe herausgefunden, dass Sie die "style" - Requisiten im Gegensatz zu bsClass - danke für die Hilfe
Der link ist kaputt.

InformationsquelleAutor wolendranh
2

Ich denke, die Antwort auf diese für die meisten Menschen (wie mich) ist, dass man hinzufügen kann, eigene Stile zu reagieren-bootstrap-Komponenten mit Hilfe der style prop. E. g. für einen Standard-Button mit blauem text:
```
<Button bsStyle="default" style={style.blueButton}>Button Text</Button>
```
oder
```
<Button bsStyle="default" style={{color:"blue"}}>Button Text</Button>
```
InformationsquelleAutor Peter Evans

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.