React - Styling von React Komponenten

Möglichkeiten

Es gibt verschiedene Möglichkeiten eine React Komponente zu stylen. Einige von diesen Möglichkeiten sind:

• pures CSS
• Styled Components
• Tailwind CSS

Bei “reinem” css kann die Beschränkung des Stylings auf eine Komponente wie folgt umgesetzt werden:

//Header.jsx
import classes from './Header.module.css'

....
<p className={classes.paragraph}>Text</p>

/* Header.module.css */

.paragraph {
	color: red;
}

Dynamisches Styling mit Tailwind

let labelClasses = 'block mb-2 ....';

if (invalid) {
labelClasses += ' text-red-400';
} else {
 labelClasses += ' text-stone-300';
}

Beispiel Toggle zum Ändern des Stylings

import { useState } from 'react';

export default function App() {
    const [highlighted, setHighligted] = useState();
    function toggleStyle() {
        setHighligted(isHighligthed => !isHighligthed);
    }
    return (
        <div>
            <p style={{ color: highlighted ? 'red' : 'white' }}>Style me!</p>
            <button onClick={() => toggleStyle()}>Toggle style</button>
        </div>
    );
}