CSS-moduuleilla tyylittelyn aloittaminen Reactissa

Tässä ja seuraavissa oppitunneissa tarkastelemme toista modernia ja tehokasta lähestymistapaa React- komponenttien tyylittelyyn - CSS-moduulien käytön.

CSS-moduulit tässä lähestymistavassa ovat erillisiä käännettyjä CSS-tiedostoja, joissa luokkien ja animaatioiden nimet ovat paikallisessa näkyvyysalueessa, mikä välttää nimiristiriitoja eri komponenttien luokkien nimien välillä.

Aluksi luomme ja käynnistämme pienen React-sovelluksemme buttons. Tätä varten luomme tyhjän kansion test, siirrymme siihen ja kirjoitamme terminaaliin seuraavat komennot:

terminalnpx create-react-app buttons
cd buttons
npm start

Jos sinulla on Reactin tuore versio, eli se tukee Create React App v2:ta tai uudempaa, niin mitään ylimääräisiä asetuksia ei tarvitse tehdä, sillä tässä tapauksessa CSS-moduulit tuetaan automaattisesti. Tarkistaaksesi kurkista package.json:n, jos riippuvuus react-scripts on versiota 2.x.x tai uudempi, niin kaikki on kunnossa. Muussa tapauksessa päivitä React.

CSS-moduuleilla tyylittelevä sovelluksemme sisältää kolme painiketta.

Nimeämme CSS-tiedostot noudattaen sopimusta seuraavasti: [name].module.css.

Luodaan nyt kansio components kohteeseen src, ja lisätään siihen tiedosto Buttons.module.css CSS-tyyleillä painikkeillemme:

Buttons.module.css.btn1 {
  background-color: orange;
  border: 2px solid brown;
  color: white;
}

.btn2 {
  background-color: red;
  border: 2px solid green;
  color: yellow;
}

.btn3 {
  background-color: brown;
  border: 2px solid yellowgreen;
  color: orange;
}

Luo myös kansioon components tyhjä React-komponenttitiedosto Buttons.js, älä kuitenkaan vielä koske luotuun tiedostoon App.js, palaamme siihen myöhemmin!

Buttons.js:ssä on pakollista tuoda CSS-tyylitiedosto, sekä soveltaa nämä tyylit kuhunkin painikkeeseen attribuutin class avulla:

Buttons.jsimport styles from "./Buttons.module.css"; 

const Buttons = () => (
  <>
    <button class={styles.btn1}>btn1</button>
    <button class={styles.btn2}>btn2</button>
    <button class={styles.btn3}>btn3</button>
  </>
);

export default Buttons;

Muuten, ei ole pakollista käyttää sanaa styles tuodun tyyliolion nimenä, voit nimetä sen kuin sinulle on mukavaa.

Seuraavassa oppitunnissa viimeistelemme sovelluksemme.