De composes opdracht voor bestanden in CSS modules in React
De opdracht composes kan ook worden toegepast voor het
hergebruiken van stijlen uit het ene bestand
in het andere.
Laten we terugkeren naar de applicatie buttons,
die we in eerdere lessen hebben gemaakt.
Stel, we willen aan alle
knoppen dezelfde schaduwen, cursorstijl
en vette lettertype toevoegen. Laat deze stijlen
zich bevinden in het bestand App.module.css.
Laten we dit bestand openen en aan het
begin een nieuwe klasse beauty toevoegen met deze
stijlen:
.beauty {
box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
font-weight: bold;
cursor: pointer;
}
Laten we het toepassen voor de stijl van de knoppen.
Om dit te doen, openen we Buttons.module.css en
brengen we wijzigingen aan in de klasse common-btn.
We voegen een regel toe met de opdracht composes,
waarin we de naam van de klasse beauty specificeren,
die we willen toepassen, en het bestand
App.module.css, waarin deze
klasse zich bevindt:
.common-btn {
composes: beauty from "../App.module.css";
font-size: 16px;
border-radius: 3px;
}
Neem de code van uw applicatie uit de opdracht bij de vorige les en maak een schaduw voor uw invoervelden met behulp van de methode die in deze les wordt beschreven.
