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” bezieht sich auf ein Pattern, bei dem CSS mit Hilfe von JavaScript zusammengesetzt wird, anstatt in externen Dateien definiert zu werden.

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, React Spring oder Framer Motion.