CSS moduļi nodrošina iespēju lokāli aptvert CSS klašu nosaukumus. Ja izmantojat vienu un to pašu klases nosaukumu, jums nav jāuztraucas par stilu ignorēšanu.

Uzziniet, kā darbojas CSS moduļi, kāpēc tie jāizmanto un kā tos ieviest React projektā.

Kas ir CSS moduļi?

The CSS moduļu dokumenti aprakstiet CSS moduli kā CSS failu, kura klašu nosaukumiem pēc noklusējuma ir lokāls tvērums. Tas nozīmē, ka varat adresēt CSS mainīgos ar vienādu nosaukumu dažādos CSS failos.

Jūs rakstāt CSS moduļu klases tāpat kā parastās klases. Pēc tam kompilators ģenerē unikālus klašu nosaukumus pirms CSS nosūtīšanas pārlūkprogrammai.

Piemēram, apsveriet šādu .btn klasi failā styles.modules.css:

.btn {
 platums: 90 pikseļi;
 augstums: 40 pikseļi;
 polsterējums: 10 pikseļi 20 pikseļi;
}

Lai izmantotu šo failu, tas ir jāimportē JavaScript failā.

imports stilus no "./styles.module.js"

Tagad, lai atsauktos uz .btn klasi un padarītu to pieejamu elementā, izmantojiet klasi, kā parādīts tālāk:

klasē="styles.btn"

Būvēšanas process aizstās CSS klasi ar unikālu formāta nosaukumu, piemēram, _styles__btn_118346908.

instagram viewer

Klašu nosaukumu unikalitāte nozīmē, ka pat tad, ja dažādiem komponentiem izmantojat vienu un to pašu klases nosaukumu, tie nesadursies. Varat garantēt lielāku koda neatkarību, jo varat saglabāt komponenta CSS stilus vienā failā, kas ir raksturīgs šim komponentam.

Tas vienkāršo atkļūdošanu, it īpaši, ja strādājat ar vairākām stila lapām. Jums būs jāatrod tikai konkrēta komponenta CSS modulis.

CSS moduļi arī ļauj apvienot vairākas klases, izmantojot komponē atslēgvārds. Piemēram, ņemiet vērā iepriekš minēto .btn klasi. Jūs varētu “pagarināt” šo klasi citās klasēs, izmantojot kompozīciju.

Iesniegšanas pogai jums varētu būt:

.btn {
/* stili */
}
.Iesniegt {
 veido: btn;
 fona krāsa: zaļa;
 krāsa:#FFFFFF
}

Tas apvieno .btn un .submit klases. Varat arī izveidot stilus no cita CSS moduļa, piemēram:

.Iesniegt {
 sastāda: primārais no "./colors.css"
 fona krāsa: zaļa;
}

Ņemiet vērā, ka rakstīšanas kārtula ir jāraksta pirms citiem noteikumiem.

Kā lietot CSS moduļus programmā React

Tas, kā programmā React izmantojat CSS moduļus, ir atkarīgs no tā, kā veidojat React lietojumprogrammu.

Ja izmantojat lietotni Create-React-app, CSS moduļi tiek iestatīti jau sākotnēji. Tomēr, ja plānojat izveidot lietojumprogrammu no jauna, jums būs jākonfigurē CSS moduļi ar kompilatoru, piemēram, tīmekļa pakotni.

Lai sekotu šai apmācībai, jums ir jābūt:

  • Mezgls ir instalēts jūsu datorā.
  • Pamata izpratne par ES6 moduļiem.
  • Pamata izpratne par React.

React lietojumprogrammas izveide

Lai lietas būtu vienkāršas, varat izmantot izveidot-reaģēt-lietotni lai uzliktu React lietotni.

Palaidiet šo komandu uz izveidot jaunu React projektu sauc par react-css-moduļiem:

npx izveidot-react-app react-css-modules

Tādējādi tiks izveidots jauns fails ar nosaukumu react-css-modules ar visām atkarībām, kas nepieciešamas, lai sāktu darbu ar React.

Pogas komponenta izveide

Šajā darbībā jūs izveidosit Button komponentu un CSS moduli ar nosaukumu Button.module.css. Mapē src izveidojiet jaunu mapi ar nosaukumu Components. Šajā mapē izveidojiet citu mapi ar nosaukumu Poga. Šajā mapē jūs pievienosit pogu Button un tā stilus.

Dodieties uz src/Components/Button un izveidojiet Button.js.

eksportētnoklusējumafunkcijuPoga() {
atgriezties (
<pogu>Iesniegt</button>
 )
}

Pēc tam izveidojiet jaunu failu Button.module.css un pievienojiet tālāk norādīto.

.btn {
 platums: 90 pikseļi;
 augstums: 40 pikseļi;
 polsterējums: 10 pikseļi 20 pikseļi;
 apmales rādiuss: 4 pikseļi;
 robeža: nav;
}

Lai izmantotu šo klasi Pogas komponentā, importējiet to kā stilus un atsaucieties uz to pogas elementa klases nosaukumā, piemēram:

imports stilus no "./Button.module.css"
eksportētnoklusējumafunkcijuPoga() {
atgriezties (
<poga className={styles.btn}>Iesniegt</button>
 )
}

Šis ir vienkāršs piemērs, kas parāda, kā izmantot vienu klasi. Iespējams, vēlēsities koplietot stilus starp dažādiem komponentiem vai pat apvienot klases. Šim nolūkam varat izmantot atslēgvārdu sacer, kā minēts šajā rakstā.

Izmantojot kompozīciju

Vispirms modificējiet komponentu Button ar šādu kodu.

imports stilus no "./Button.module.css"
eksportētnoklusējumafunkcijuPoga({type="primary", label="Button"}) {
atgriezties (
<poga className={styles[type]}>{label}</button>
 )
}

Šis kods padara Button komponentu dinamiskāku, pieņemot tipa vērtību kā atbalstu. Šis tips noteiks pogas elementam lietoto klases nosaukumu. Tātad, ja poga ir iesniegšanas poga, klases nosaukums būs “iesniegt”. Ja tas ir “kļūda”, klases nosaukums būs “kļūda” un tā tālāk.

Lai izmantotu komponēšanas atslēgvārdu, nevis rakstītu visus stilus katrai pogai no jauna, pievienojiet šo failu Button.module.css.

.btn {
 platums: 90 pikseļi;
 augstums: 40 pikseļi;
 polsterējums: 10 pikseļi 20 pikseļi;
 apmales rādiuss: 4 pikseļi;
 robeža: nav;
}
.primārs {
 veido: btn;
 krāsa: #FFFFFF;
 fona krāsa: #6E41E2;
}
.sekundārais {
 veido: btn;
 krāsa: #6E41E2;
 fona krāsa: #FFFFFF;
}

Šajā piemērā primārā klase un sekundārā klase izmanto btn klasi. To darot, jūs samazināt koda daudzumu, kas jums jāraksta.

Varat to uzlabot, izmantojot ārēju CSS moduli color.module.css, kas satur lietojumprogrammā izmantotās krāsas. Pēc tam šo moduli varētu izmantot citos moduļos. Piemēram, mapes Komponenti saknē izveidojiet failu color.module.css ar šādu kodu:

.primaryBg {
 fona krāsa: #6E41E2
}
.secondaryBg {
 fona krāsa: #FFFFFF
}
.primaryColor {
 krāsa: #FFFFFF
}
.secondaryColor {
 krāsa: #6E41E2
}

Tagad failā Button/Button.module.css modificējiet primārās un sekundārās klases, lai izmantotu iepriekš minētās klases, piemēram:

.primārs {
 veido: btn;
 sastāda: primārāKrāsa no "../colors.module.css";
 veido: primāraisBg no "../colors.module.css";
}
.sekundārais {
 veido: btn;
 sastāda: sekundārāKrāsa no "../colors.module.css";
 sastāda: sekundāroBg no "../colors.module.css";
}

Sass ar CSS moduļiem

Varat izmantot CSS moduļus, lai uzlabotu savas kodu bāzes modularitāti. Piemēram, varat izveidot vienkāršu CSS klasi pogas komponentam un atkārtoti izmantot CSS klases, izmantojot kompozīciju.

Lai aktivizētu CSS moduļu lietošanu, izmantojiet Sass. Sass — sintaktiski satriecošas stila lapas — ir CSS priekšprocesors, kas nodrošina daudz funkciju. Tie ietver ligzdošanas, mainīgo un mantojuma atbalstu, kas nav pieejams CSS. Izmantojot Sass, lietojumprogrammai varat pievienot sarežģītākas funkcijas.