Komento composes tiedostoille CSS modules Reactissa

Komentoa composes voidaan soveltaa myös tyylien uudelleenkäyttämiseen yhdestä tiedostosta toiseen.

Palataan buttons -sovellukseen, jota teimme aiempien oppituntien aikana. Oletetaan, että haluamme lisätä kaikille painikkeille samanlaiset varjot, kursorin tyylin ja lihavoidun fontin. Olkoon nämä tyylit sijoitettuna tiedostoon App.module.css. Avataan tämä tiedosto ja lisätään alkuun uusi luokka beauty näillä tyyleillä:

.beauty { 
	box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
	font-weight: bold;
	cursor: pointer;
}

Sovelletaan sitä painikkeiden tyylittelyyn. Avataan Buttons.module.css ja tehdään muutoksia luokkaan common-btn. Lisäämme rivin komennolla composes, jossa määritämme luokan nimen beauty, jota haluamme käyttää, ja tiedoston App.module.css, jossa tämä luokka sijaitsee:

.common-btn {
	composes: beauty from "../App.module.css"; 
	font-size: 16px;
	border-radius: 3px;
}

Ota sovelluksesi koodi edellisen oppitunnin tehtävästä ja tee jokin varjo syöttökenttiisi käyttämällä tässä oppitunnissa esitettyä tapaa.