Die composes-opdrag vir klasse in CSS modules in React

In hierdie les sal ons 'n baie nuttige tegniek oorweeg om CSS-style van een klas in 'n ander in CSS modules te hergebruik.

Kom ons keer terug na die buttons toepassing wat ons in vorige lesse gemaak het. Kom ons kyk na die lêer Buttons.module.css:

.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;
}

Veronderstel, ons wil hê dat al die knoppies dieselfde afronding en lettergrootte moet hê. Ons kon natuurlik dieselfde eienskappe in elke klas herhaal. Maar danksy die composes opdrag van CSS modules, sal ons anders te werk gaan.

Om te begin, laat ons nog 'n klas skep, byvoorbeeld common-btn, waarin ons hierdie identiese eienskappe sal plaas. En om die eienskappe van hierdie klas in ander toe te pas, moet ons die volgende sintaksis in hulle gebruik:

selektor {
	composes: klas naam;
}

Nou sal die kode van ons Buttons.module.css so lyk:

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

.btn1 {
	composes: common-btn;
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	composes: common-btn;
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	composes: common-btn;
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Neem jou React-toepassing inputs, wat jy in die take vir vorige lesse gemaak het. Voeg vir alle invoer 'n paar identiese CSS-style met identiese waardes by. Skep 'n addisionele klas waarin hierdie style geskryf sal word. Met behulp van composes versprei hulle na al die ander klasse vir die invoer.