Kaip sukurti reagavimo komponentų stilių naudojant CSS modulius

Kaip sukurti reagavimo komponentų stilių naudojant CSS modulius

CSS moduliai suteikia galimybę lokaliai aprėpti CSS klasių pavadinimus. Nereikia jaudintis dėl stilių nepaisymo, kai naudojate tą patį klasės pavadinimą.





Sužinokite, kaip veikia CSS moduliai, kodėl turėtumėte juos naudoti ir kaip juos įdiegti React projekte.



Kas yra CSS moduliai?

The CSS modulių dokumentai apibūdinkite CSS modulį kaip CSS failą, kurio klasių pavadinimai pagal numatytuosius nustatymus taikomi lokaliai. Tai reiškia, kad galite adresuoti CSS kintamuosius tuo pačiu pavadinimu skirtinguose CSS failuose.





CSS modulio klases rašote kaip ir įprastas klases. Tada kompiliatorius sugeneruoja unikalius klasių pavadinimus prieš siųsdamas CSS į naršyklę.

Pavyzdžiui, apsvarstykite šią .btn klasę faile styles.modules.css:



.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

Norėdami naudoti šį failą, turite jį importuoti į JavaScript failą.

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

Dabar, norėdami nurodyti .btn klasę ir padaryti ją prieinamą elemente, naudokite klasę, kaip parodyta toliau:



class="styles.btn"

Sukūrimo procesas pakeis CSS klasę unikaliu formato pavadinimu, pvz., _styles__btn_118346908.

Klasių pavadinimų unikalumas reiškia, kad net jei naudosite tą patį klasės pavadinimą skirtingiems komponentams, jie nesusidurs. Galite garantuoti didesnę kodo nepriklausomybę, nes galite išsaugoti komponento CSS stilius viename faile, būdingame tam komponentui.



kaip gauti naujų „Android“ jaustukų

Tai supaprastina derinimą, ypač jei dirbate su keliais stiliaus lapais. Jums reikės tik susekti konkretaus komponento CSS modulį.

CSS moduliai taip pat leidžia sujungti kelias klases komponuoja raktažodį. Pavyzdžiui, apsvarstykite aukščiau pateiktą .btn klasę. Galite „pratęsti“ tą klasę kitose klasėse naudodami kompozicijas.

Norėdami pateikti mygtuką, galite turėti:

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

Tai sujungia .btn ir .submit klases. Taip pat galite kurti stilius iš kito CSS modulio, pavyzdžiui:

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

Atminkite, kad kūrimo taisyklę turite parašyti prieš kitas taisykles.

Kaip naudoti CSS modulius „React“.

Kaip naudojate CSS modulius React, priklauso nuo to, kaip kuriate React programą.

Jei naudojate programą kurti-reaguoti, CSS moduliai nustatomi iš karto. Tačiau, jei ketinate kurti programą nuo nulio, turėsite sukonfigūruoti CSS modulius naudodami kompiliatorių, pvz., Webpack.

Jei norite tęsti šią mokymo programą, turite turėti:

  • Jūsų kompiuteryje įdiegtas mazgas.
  • Pagrindinis ES6 modulių supratimas.
  • Pagrindinis supratimą apie React .

„React“ programos kūrimas

Kad viskas būtų paprasta, galite naudoti sukurti-reaguoti-programėlę norėdami pastatyti React programėlę.

Vykdykite šią komandą sukurti naują React projektą vadinami react-css-moduliais:

npx create-react-app react-css-modules

Tai sugeneruos naują failą, pavadintą react-css-modules su visomis priklausomybėmis, kurių reikia norint pradėti naudoti React.

kaip įdiegti „iptv“ kodi 2016

Mygtuko komponento kūrimas

Šiame veiksme sukursite mygtuko komponentą ir CSS modulį pavadinimu Button.module.css. Aplanke src sukurkite naują aplanką pavadinimu Komponentai. Tame aplanke sukurkite kitą aplanką pavadinimu Mygtukas. Šiame aplanke pridėsite mygtuko komponentą ir jo stilius.

Eikite į src/Components/Button ir sukurti Button.js.

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

Tada sukurkite naują failą pavadinimu Button.module.css ir pridėkite toliau pateiktą informaciją.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

Norėdami naudoti šią klasę mygtuko komponente, importuokite ją kaip stilius ir nurodykite ją mygtuko elemento klasės pavadinime taip:

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

Tai paprastas pavyzdys, rodantis, kaip naudoti vieną klasę. Galbūt norėsite bendrinti skirtingų komponentų stilius arba net sujungti klases. Norėdami tai padaryti, galite naudoti raktinį žodį kompozicija, kaip minėta šiame straipsnyje.

Naudojant kompoziciją

Pirmiausia pakeiskite mygtuko komponentą naudodami šį kodą.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
}

Šis kodas daro mygtuko komponentą dinamiškesnį, priimdamas tipo reikšmę kaip rekvizitus. Šis tipas nustatys klasės pavadinimą, taikomą mygtuko elementui. Taigi, jei mygtukas yra pateikimo mygtukas, klasės pavadinimas bus „pateikti“. Jei tai „klaida“, klasės pavadinimas bus „error“ ir pan.

Jei norite naudoti raktinį žodį „Compos“, o ne rašyti visus kiekvieno mygtuko stilius nuo nulio, į Button.module.css pridėkite šiuos.

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

Šiame pavyzdyje pirminėje ir antrinėje klasėje naudojama btn klasė. Tai darydami sumažinate kodo, kurį turite parašyti, kiekį.

Galite tai padaryti dar labiau naudodami išorinį CSS modulį, vadinamą color.module.css , kuriame yra programoje naudotos spalvos. Tada galite naudoti šį modulį kituose moduliuose. Pavyzdžiui, aplanko Komponentai šaknyje sukurkite failą color.module.css su šiuo kodu:

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

Dabar faile Button/Button.module.css pakeiskite pirmines ir antrines klases, kad naudotumėte aukščiau nurodytas klases, kaip nurodyta toliau:

.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 su CSS moduliais

Galite naudoti CSS modulius, kad pagerintumėte savo kodų bazės moduliškumą. Pavyzdžiui, galite sukurti paprastą mygtuko komponento CSS klasę ir pakartotinai naudoti CSS klases per kompoziciją.

Norėdami sustiprinti CSS modulių naudojimą, naudokite Sass. „Sass“ – sintaksiškai nuostabūs stiliaus lapai – yra CSS pirminis procesorius, teikiantis daugybę funkcijų. Jie apima įdėjimo, kintamųjų ir paveldėjimo palaikymą, kurių nėra CSS. Naudodami „Sass“ savo programai galite pridėti sudėtingesnių funkcijų.