CSS-moduuleilla tyylittelyn jatko-opinnot Reactissa

Jatketaan työskentelyä sovelluksemme buttons parissa. Nyt käsittelemme pääasiallista App-komponenttia, joka oli jo luotu kansioon src alussa. Siihen tulee kaksi diviä, otsikko ja painike.

Vaihdetaan tiedoston App.css nimi muotoon App.module.css sopimuksen mukaan, tyhjennetään se ja luodaan sinne useampia luokkia CSS-tyyleillä tunnisteille:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

Tyhjennetään nyt tiedoston App.js sisältö. Tuodaan sitten React- komponentti Buttons ja tyylit tiedostosta App.module.css. Kirjoitetaan tunnisteemme ja sovelletaan niihin tyylejä, sekä sijoitetaan React-komponentti Buttons:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Käytimme sanaa classes tyylit sisältävän objektin nimenä, jonka tuomme tiedostosta App.module.css. Kuten edellisessä tapauksessa, voit nimetä tämän objektin haluamallasi tavalla.

Jäljellä on pari pientä askelta. Vaihdetaan tiedoston index.css nimi sopimuksen mukaan muotoon index.module.css ja tiedostossa index.js älä unohda korvata tuontirivi:

import "./index.css";

Rivillä:

import "./index.module.css";

Nyt voimme nähdä selaimessa sovelluksemme toiminnan tuloksen.

Jos avaat luodun verkkosivun rakenteen selaimen kehittäjätyökalussa, näet, että jokaiselle komponentille on luotu omat yksilölliset luokat. Näin meidän ei enää tarvitse huolehtia yksittäisten komponenttien luokkien välisistä ristiriidoista.

Tärkeää on myös se, että CSS-moduulit eivät kiellä tavallisten ulkoisten CSS-tiedostojen tuomista.

Seuraa oppitunnin teoriaa, puhdista React- komponenttisi App sovelluksessasi inputs, jonka loit edellisen oppitunnin tehtäviin, ja sijoita sinne luomasi Inputs johonkin tyyliteltyyn diviin. Lisää App:hen tyylitelty otsikko. Kaikki tämä laita toiseen diviin. Tyylit React-komponentin App tunnisteille kirjoita tiedostoon App.modules.css.

Kokoa kaikki yhteen, kytke oikein jäljellä olevat tiedostot ja käynnistä sovelluksesi inputs.