Vaikka sisäiset tyylit ovat hyödyllisiä pienissä tai dynaamisissa tyylityksissä, useimmat todelliset sovellukset käyttävät ulkoisia CSS-tiedostoja. Tämä lähestymistapa pitää tyylit erillään komponenttilogiikasta ja helpottaa niiden hallintaa projektin kasvaessa.

React tukee ulkoisia CSS-tiedostoja suoraan. Voit kirjoittaa tavallista CSS:ää ja käyttää sitä komponenteissa luokkien avulla, aivan kuten perinteisessä web-kehityksessä.

Ulkoisen CSS-tiedoston luominen

Luo ensin CSS-tiedosto ja määrittele tyylit:

/* styles.css */
.title {
  font-size: 32px;
  font-weight: 700;
  color: rebeccapurple;
}

Tämä CSS-tiedosto sisältää yksinkertaisen luokan, jota voidaan käyttää uudelleen eri komponenteissa.

CSS:n tuominen komponenttiin

Käyttääksesi tyylejä, tuo CSS-tiedosto komponenttitiedostoon:

import "./styles.css";

const App = () => (
  <>
    <h1 className="title">App title</h1>
  </>
);

Reactissa class-attribuutti kirjoitetaan muodossa className, koska class on varattu avainsana JavaScriptissä.

Miten ulkoinen CSS toimii Reactissa

CSS-tiedostot vaikuttavat oletuksena globaalisti. Mikä tahansa komponentti voi käyttää luokkaa, joka on määritelty tuodussa CSS-tiedostossa. Tyylit käyttäytyvät samalla tavalla kuin tavallisessa HTML:ssä ja CSS:ssä. Tämä tekee ulkoisesta CSS:stä tutun ja helppokäyttöisen, erityisesti kehittäjille, joilla on taustaa perinteisestä web-kehityksestä.

Milloin käyttää ulkoista CSS:ää

Ulkoinen CSS on hyvä valinta, kun:

• Tyylejä jaetaan useiden komponenttien kesken;
• Layoutit muuttuvat monimutkaisemmiksi;
• Halutaan selkeä ero rakenteen ja tyylien välillä.

Suuremmissa projekteissa ulkoinen CSS johtaa usein selkeämpään ja helpommin ylläpidettävään koodiin.