Styling in React

CSS Classes

Innerhalb von React-Projekten können CSS-Dateien direkt in die JavaScript-Dateien importiert werden. CSS-Klassen könnend dann mithilfe des className-Attributs an JSX-Elementen verwendet werden.

Der Import wird von einer zusätzlichen Toolchain verarbeitet. Beliebte Lösungen sind webpack oder vite.

Zusätzlich können auch <link rel="stylesheet" href="styles.css">-Links verwendet werden. Bei einem Produktions-Build wird ein JavaScript-Stylesheet-Import in eine separate css-Datei umgewandelt, die dann über den <link>-Tag wie oben beschrieben geladen wird.

Im Entwicklungsmodus wird das CSS direkt in das JavaScript-Bundle eingebettet. Auf diese Weise kann es von Hot Reload profitieren. Hot Reload ermöglicht es, CSS zu speichern und die Änderungen direkt im Browser zu sehen, ohne die Seite neu zu laden.

import './styles.css'

const MyComponent = ({title, children}) => (
  <div className="card">
    <h2>{title}</h2>
    {children}
  </div>
);

Verwendung der Eigenschaft style

Du kannst Stile auch direkt über die Eigenschaft style auf eine Komponente anwenden. Die Eigenschaft style nimmt ein Objekt mit CSS-Eigenschaften auf. CSS-Eigenschaften folgen dem Benennungsmuster des CSS-Objektmodells, das camelCase verwendet:

const MyComponent = ({title, children}) => (
  <div style={{borderRadius: '.25rem', border: '1px solid #ccc', padding: '1rem'}}>
    <h2>{title}</h2>
    {children}
  </div>
);

Styled components

Ein anderer Ansatz ist die Verwendung einer Bibliothek namens styled-components. Damit können Sie CSS direkt in JavaScript schreiben.

const Card = styled.div`
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: .25rem;
`

const MyCardComponent ({title, children}) => (
  <Card>
    <h2>{title}</h2>
    {children}
  </Card>)

Eine alternative Implementierung der styled-components ist @emotion/styled. Diese wird im Zusammenhang mit MUI verwendet.

Tailwind

Ein weiterer sehr beliebter Ansatz ist die Verwendung von tailwind, einer Reihe von CSS-Utility-Klassen, die direkt im className-Attribut angewendet werden. Das Tailwind CSS-Framework fördert die Verwendung von Design-Tokens, was den Vorteil mit sich bringt, dass ein einheitliches System für Abstände, Schriftgrößen, Farben und weiteres verwendet wird.

const MyCardComponent ({title, children}) => (
  <div className="border-solid border-2 border-sky-500 p-4">
    <h2>{title}</h2>
    {children}
  </div>
);