Kā veidot reakcijas komponentus, izmantojot CSS moduļus

Kā veidot reakcijas komponentus, izmantojot CSS moduļus

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.





bloķēt manu numuru, zvanot kādam

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 { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

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

import styles from "./styles.module.js"

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



class="styles.btn"

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

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 { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

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

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

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

Kā lietot CSS moduļus programmā React

Tas, kā izmantojat CSS moduļus programmā React, 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:

  • Jūsu datorā ir instalēts mezgls.
  • 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-moduliem:

gmail, kā kārtot pēc sūtītāja 
npx create-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.

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

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

pievienot lietotnes viedajam televizoram vizio 
.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

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

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</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.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button 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 tālāk norādīto failu Button.module.css.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #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 { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

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

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../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.