Styling - Lerndokumentation

Es gibt viele verschiedene Wege in React, um unsere Komponenten zu stylen.

Inline-Styles

Genau wie in HTML können wir auch in React Inline-Styles nutzen, um unsere Elemente zu stylen. In JSX funktioniert es jedoch ein wenig anders, denn hier übergeben wir ein Objekt an Styles.

const Header = () => {
  return (
    <h1 style={{ color: 'red', fontSize: '3rem', textTransform: 'uppercase' }}>
      Fast React Pizza Co.
    </h1>
  );
}

export default Header;

Externes CSS-File

Wir können auch ein externes CSS-File in unsere Root-Komponente einbinden und so Styles mit ganz normalen Klassen, IDs, Elementen und anderen Selektoren erreichen.

import '/src/styles.css';

Um eine Klasse zu vergeben, müssen wir das Attribut className nutzen anstatt class!