Die composes-opdrag vir lêers in CSS modules in React
Die composes opdrag kan ook toegepas word om
style uit een lêer in 'n ander te hergebruik.
Kom ons gaan terug na die buttons toepassing
wat ons in vorige lesse gemaak het.
Veronderstel, ons wil vir al die
knoppies dieselfde skaduwees, wyserstyl
en vet font gee. Laat hierdie style
in die lêer App.module.css wees.
Kom ons maak hierdie lêer oop en voeg aan die
begin 'n nuwe klas beauty met hierdie
style by:
.beauty {
box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
font-weight: bold;
cursor: pointer;
}
Kom ons pas dit toe om die knoppies te styl.
Om dit te doen, maak ons Buttons.module.css oop en
maak veranderinge in die klas common-btn.
Ons sal 'n lyn byvoeg met die composes opdrag,
waar ons die naam van die klas beauty sal spesifiseer
wat ons wil toepas en die lêer
App.module.css, waarin hierdie
klas geleë is:
.common-btn {
composes: beauty from "../App.module.css";
font-size: 16px;
border-radius: 3px;
}
Neem die kode van jou toepassing uit die taak vir die vorige les en maak 'n skaduwee vir jou insette deur die metode te gebruik wat in hierdie les aangedui word.
