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:

npx 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:

.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:

import 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.

Noudata tämän oppitunnin teoriaa ja luo React-sovellus inputs.

Käytä oppitunnissa esiteltyä CSS-moduulien lähestymistapaa. Luo src-hakemistoon inputs-sovellusta varten tiedosto Inputs.js React- komponentille Inputs, joka sisältää kolme input-kenttää. Kirjoita pari-kolme tyyliä Inputs.modules.css-tiedostoon input-kentille. Tuo tämä tiedosto Inputs.js:ään ja sovella tyylit.