> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling

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.

```tsx theme={null}
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 ](/web/react/komponenten/root-komponente)einbinden und so Styles mit ganz normalen Klassen, IDs, Elementen und anderen Selektoren erreichen.

```tsx theme={null}
import '/src/styles.css';
```

<Warning>
  Um eine Klasse zu vergeben, müssen wir das Attribut `className` nutzen anstatt `class`!
</Warning>