React-komponenttien tyylittäminen CSS-tiedoston avulla pohjautuu perinteiseen HTML-CSS-rakenteeseen. Tässä vaiheittainen opas siitä, kuinka CSS-tiedostoa voidaan hyödyntää React-komponenttien tyylittämisessä:

1. Luo CSS-tiedosto

Aloita luomalla erillinen CSS-tiedosto, jonka tiedostopääte on .css. Tämä tiedosto voidaan sijoittaa samaan kansioon komponentin kanssa tai erilliseen kansioon, joka on tarkoitettu tyyleille ja jossa kaikki CSS-tiedostot ovat yhdessä paikassa.

Esimerkki:

2. Tuo CSS-tiedosto

Käytä 'import'-lausetta tuodaksesi CSS-tiedosto komponenttitiedostoon. Sijoita tämä import-lause komponenttitiedoston alkuun. Määritä lainausmerkkien '' sisään oikea tiedostopolku.

Esimerkki:

// Import the CSS file
import './index.css';

Jos CSS-tiedosto sijaitsee styles-kansiossa, import-lauseen syntaksi on seuraava:

// Import the CSS file from a folder
import './styles/index.css';

Huomio

Käytä piste- ja kauttaviittauksia ./ viitataksesi tiedostoon samassa hakemistossa. Jos haluat viitata tiedostoon nykyisen kansion ulkopuolella ja siirtyä ylähakemistoon, käytä kahta pistettä ja kauttaviivaa ../.

3. Tyylien soveltaminen komponenttiin

Kun tyylit on tuotu, komponentti tunnistaa CSS:n olemassaolon. Tämän ansiosta voit käyttää CSS-valitsimia ja luokkien nimiä elementtien tyylittämiseen. Ainoa ero on, että React-sovelluksissa käytetään className-attribuuttia HTML-tiedostoissa käytetyn class-attribuutin sijaan.

Esimerkki:

const Block = () => (
  <div className="container">
    <h1 className="title">Heading</h1>
    <p className="description">Description</p>
  </div>
);

Nyt voimme käyttää CSS-luokkia container, title ja description tyylittääksemme Block-komponentin elementtejä.

Tyylien lisääminen

Tässä vaiheessa voimme avata CSS-tiedoston ja lisätä tyylejä määritellyille luokkanimille. Esimerkiksi index.css-tiedosto voi sisältää seuraavat tyylit:

.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.title {
  color: blue;
  font-size: 24px;
}

.description {
  color: green;
  font-size: 16px;
}

Näiden vaiheiden jälkeen CSS-tiedostossa määritellyt tyylit otetaan käyttöön React-komponentin vastaavissa elementeissä.

Koko sovelluksen koodi: