Was ist der beste Weg, um CSS-Klassen zu überschreiben/Reagieren-Bootstrap-Komponenten anpassen? - (Ich habe die Dokumente gelesen, und wenn ich etwas nicht vermisse, ist dies nicht abgedeckt).Wie reagiere ich die Bootstrap-Komponenten?
Aus dem, was ich gelesen habe, scheint es, dass es eine Wahl zwischen Inline-Stilen (Radium) und CSS-Module ist, aber was ist besser und warum?
Ich bin mir nicht sicher, ob dies Ihre Frage beantwortet aber Documentation deutlich Beispiele bieten. Zum Beispiel Button
Props
+--------+---------+--------+--------------------------------------------+ | Name | Type | Default| Description | +--------+---------+--------+--------------------------------------------+ |bsClass | string | 'btn' | Base CSS class and prefix for the component| +--------+---------+--------+--------------------------------------------+
könnte Dieser modifiziert werden benutzerdefinierte CSS-Klasse zu Ihrem Button-Komponente hinzuzufügen. Auch die Komponente könnte mit der Einstellung componentClass geändert werden.
<Button type="submit" onClick={this.submit}
bsClass='custom-class'
>
</Button>
Wo custom-class CSS-Klasse, die
neuen, nicht-Bootstrap, CSS-Stile für eine Komponente zur Verfügung stellen könnte.
Fiddle mit Beispiel zur Verwendung bsClass.
Inline-Stile: Gegenwärtig gibt es keine Möglichkeit Stile mit Inline-CSS zu überschreiben. Überprüfen Sie bug darüber gefüllt.
Sie möchten die tatsächliche Stilstütze verwenden. bsClass ist zum Einstellen der Weg Bootstrap-CSS-Klassen nicht Arten
Ich bin mir nicht sicher, ob das völlig korrekt ist - https://react-bootstrap.github.io/components.html#custom-styles. – AloeVeraForty
@AloeVeraForty Ich denke, das hängt davon ab, welchen speziellen Fall Sie haben. Beide sind gültig. – wolendranh
Mit der Methode, die Sie vorschlagen, ist es möglich, Inline-Stile zu verwenden? - Es wäre hilfreich, wenn Sie einen Beispielcode zur Verfügung stellen könnten >>> – AloeVeraForty
line auf die Komponenten angewendet werden, denke ich, die Antwort auf diese für die meisten Menschen (wie mich) ist, dass man Stile individuelle hinzufügen können, um Komponenten zu reagieren-Bootstrap mit der style prop. Z.B. für eine Standardschaltfläche mit blauem Text:
<Button bsStyle="default" style={style.blueButton}>Button Text</Button>
oder
<Button bsStyle="default" style={{color:"blue"}}>Button Text</Button>
Das Thema ist subjektiv. Sie können nach Ihren Wünschen gehen. In unserem Fall verwendete der Legacy-Code "weniger". Also mussten wir variables.less vom Bootstrap-Quellcode überschreiben. Wir haben unsere eigene Variable.less-Datei erstellt, die Variablen wie @brandPrimary überschreiben würde, die berühmte Bootstrap-Primärfarbe. – Mihir