Stylowanie komponentów w React

Stylowanie globalne

Podobnie jak w tradycyjnych stronach internetowych, w React można używać zwykłych plików CSS do definiowania stylów. Aby zastosować style globalne, wystarczy zaimportować plik CSS w głównym komponencie aplikacji lub tam, gdzie uznasz to za stosowne. Pamiętaj, że style zaimportowane w ten sposób będą miały wpływ na całą aplikację, co jest wygodne, ale może prowadzić do niechcianych konfliktów stylów.

import '@/public/style.css';

CSS Modules

Aby uniknąć globalnego zasięgu i kolizji nazw, React wspiera używanie CSS Modules, które lokalizują style do komponentów, w których są zaimportowane. Aby skorzystać z tej metody, nazwy plików CSS powinny kończyć się na .module.css. Na przykład:

import classes from './public/form.module.css';

.error {
  color:red;
}

.success {
  color:green;
}

Dodawanie klas w taki sposób spowoduje że podczas budowania nazwy klas zostaną zastąpione unikalnymi wartościami, także w komponentach React nie możemy użyć bezpośrednio nazwa klas z pliku modułu, ale za pomocą definicji classes np:

import classes from './public/form.module.css';

export default function FormPage() {
    return (
     <>
        <form className={classes.error}>
        </form>
     </>
    );
}

Inline styles

React pozwala również na stosowanie stylów bezpośrednio w komponencie za pomocą obiektów JavaScript. Jest to przydatne dla dynamicznych stylów, które zależą od stanu komponentów. Przykład:

const style = { color: isActive ? 'green' : 'red' };
return <div style={style}>Status</div>;