Styling und CSS

Wie füge ich CSS-Klassen zu Komponenten hinzu?

Übergebe einen String für das className-Prop:

render() {
  return <span className="menu navigation-menu">Menü</span>
}

CSS-Klassen hängen oft von den Props oder vom State der Komponente ab:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menü</span>
}

Tipp

Wenn du oft Code wie diesen schreibst, kann das classnames Paket helfen.

Kann ich Inline-Styles verwenden?

Ja, siehe dazu die Dokumentation zum Styling hier.

Sind Inline-Styles schlecht?

CSS-Klassen sind üblicherweise besser für die Performance als Inline-Styles.

Was ist CSS-in-JS?

“CSS-in-JS” ist eine Methode, bei der CSS mit Hilfe von JavaScript generiert wird anstatt in einer externen Datei gehalten zu werden. Lese dazu einen Vergleich von CSS-in-JS-Bibliotheken hier.

Beachte, dass dies keine Funktionalität von React ist, sondern durch Bibliotheken von Dritten bereitgestellt wird. React hat keine Meinung dazu, wie Styles definiert werden; im Zweifel ist es ein guter Anfang, die Styles wie gewohnt in separaten *.css-Dateien zu definieren und mittels className zu verwenden.

Kann ich in React Animationen verwenden?

React kann für Animationen verwendet werden. Siehe dazu z.B. React Transition Group und React Motion oder React Spring.