Kuinka muotoilla reagoivat komponentit CSS-moduuleilla

Kuinka muotoilla reagoivat komponentit CSS-moduuleilla

CSS-moduulit tarjoavat tavan paikallistaa CSS-luokkanimiä. Sinun ei tarvitse huolehtia tyylien ohittamisesta, kun käytät samaa luokan nimeä.





Ota selvää, miten CSS-moduulit toimivat, miksi niitä kannattaa käyttää ja miten ne toteutetaan React-projektissa.





kannettava tietokone on kytketty, mutta ei lataudu

Mitä ovat CSS-moduulit?

The CSS-moduulien dokumentit kuvaile CSS-moduulia CSS-tiedostona, jonka luokkanimet ovat oletuksena paikallisesti suojattuja. Tämä tarkoittaa, että voit osoittaa CSS-muuttujia samalla nimellä eri CSS-tiedostoissa.





Kirjoitat CSS-moduuliluokkia aivan kuten normaalit luokat. Sitten kääntäjä luo yksilölliset luokkanimet ennen CSS:n lähettämistä selaimeen.

Harkitse esimerkiksi seuraavaa .btn-luokkaa tiedostossa styles.modules.css:



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

Jotta voit käyttää tätä tiedostoa, sinun on tuotava se JavaScript-tiedostoon.

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

Jos haluat nyt viitata .btn-luokkaan ja tehdä sen saataville elementissä, käytä luokkaa alla esitetyllä tavalla:





class="styles.btn" 

Rakennusprosessi korvaa CSS-luokan yksilöllisellä muodon nimellä, kuten _styles__btn_118346908.

Luokkien nimien ainutlaatuisuus tarkoittaa, että vaikka käyttäisit samaa luokan nimeä eri komponenteille, ne eivät törmää. Voit taata suuremman koodiriippumattomuuden, koska voit tallentaa komponentin CSS-tyylit yhteen tiedostoon, joka on ominaista kyseiselle komponentille.





Tämä yksinkertaistaa virheenkorjausta, varsinkin jos työskentelet useiden tyylitaulukoiden kanssa. Sinun tarvitsee vain jäljittää tietyn komponentin CSS-moduuli.

CSS-moduulien avulla voit myös yhdistää useita luokkia säveltää avainsana. Harkitse esimerkiksi seuraavaa .btn-luokkaa yllä. Voit 'pidentää' tuota luokkaa muilla luokilla sävellysten avulla.

Lähetä-painikkeella sinulla voi olla:

.btn { 
/* styles */
}

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

Tämä yhdistää .btn- ja .submit-luokat. Voit myös luoda tyylejä toisesta CSS-moduulista seuraavasti:

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

Huomaa, että kirjoitussääntö on kirjoitettava ennen muita sääntöjä.

Kuinka käyttää CSS-moduuleja Reactissa

Kuinka käytät CSS-moduuleja Reactissa, riippuu siitä, kuinka luot React-sovelluksen.

Jos käytät luo-react-sovellusta, CSS-moduulit määritetään heti valmiina. Jos kuitenkin aiot luoda sovelluksen tyhjästä, sinun on määritettävä CSS-moduulit kääntäjällä, kuten webpack.

Jotta voit seurata tätä opetusohjelmaa, sinulla tulee olla:

parhaat käyttötarkoitukset vadelmalle pi 3
  • Koneeseesi asennettu solmu.
  • Perustiedot ES6-moduuleista.
  • Perus ymmärrystä Reactista .

React-sovelluksen luominen

Jotta asiat olisivat yksinkertaisia, voit käyttää luo-reagoi-sovellus rakentaaksesi React-sovelluksen.

Suorita tämä komento kohteeseen luo uusi React-projekti kutsutaan react-css-moduuleiksi:

npx create-react-app react-css-modules 

Tämä luo uuden tiedoston nimeltä react-css-modules, jossa on kaikki Reactin käytön aloittamiseen tarvittavat riippuvuudet.

Painikekomponentin luominen

Luot Button-komponentin ja CSS-moduulin nimeltä Button.module.css tässä vaiheessa. Luo src-kansioon uusi kansio nimeltä Components. Luo kyseiseen kansioon toinen kansio nimeltä Button. Lisäät Button-komponentin ja sen tyylit tähän kansioon.

Navigoida johonkin src/Components/Button ja luo Button.js.

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

Luo seuraavaksi uusi tiedosto nimeltä Button.module.css ja lisää seuraava.

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

Jos haluat käyttää tätä luokkaa Button-komponentissa, tuo se tyyleinä ja viittaa siihen painikeelementin luokan nimessä seuraavasti:

import styles from "./Button.module.css" 

export default function Button() {
return (
<button className={styles.btn}>Submit</button>
)
}

Tämä on yksinkertainen esimerkki, joka näyttää kuinka käyttää yhtä luokkaa. Haluat ehkä jakaa tyylejä eri komponenttien kesken tai jopa yhdistää luokkia. Tätä varten voit käyttää kirjoittamis-avainsanaa, kuten aiemmin mainittiin tässä artikkelissa.

Koostumuksen käyttäminen

Muokkaa ensin Button-komponenttia seuraavalla koodilla.

import styles from "./Button.module.css" 

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

Tämä koodi tekee Button-komponentista dynaamisemman hyväksymällä tyyppiarvon ehdotuksena. Tämä tyyppi määrittää painikeelementtiin käytetyn luokan nimen. Joten jos painike on lähetyspainike, luokan nimi on 'lähetä'. Jos se on 'error', luokan nimi on 'error' ja niin edelleen.

Jos haluat käyttää kirjoittamis-avainsanaa sen sijaan, että kirjoitat jokaisen painikkeen kaikki tyylit tyhjästä, lisää seuraava Button.module.css-tiedostoon.

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

Tässä esimerkissä perusluokka ja toissijainen luokka käyttävät btn-luokkaa. Näin vähennät kirjoitettavan koodin määrää.

Voit viedä tätä vielä pidemmälle ulkoisella CSS-moduulilla nimeltä värit.moduuli.css , joka sisältää sovelluksessa käytetyt värit. Voit sitten käyttää tätä moduulia muissa moduuleissa. Luo esimerkiksi Color.module.css-tiedosto Components-kansion juureen seuraavalla koodilla:

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

.primaryColor {
color: #FFFFFF
}
.secondaryColor {
color: #6E41E2
}

Muokkaa nyt Button/Button.module.css-tiedostossa ensisijaiset ja toissijaiset luokat käyttämään yllä olevia luokkia seuraavasti:

.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 CSS-moduuleilla

Voit parantaa koodikantasi modulaarisuutta CSS-moduuleilla. Esimerkkinä voit luoda yksinkertaisen CSS-luokan painikekomponentille ja käyttää CSS-luokkia uudelleen koostumuksen avulla.

Käytä Sassia tehostaaksesi CSS-moduulien käyttöä. Sass – Syntactically Awesome Style Sheets – on CSS-esiprosessori, joka tarjoaa runsaasti ominaisuuksia. Ne sisältävät tuen sisäkkäisyydelle, muuttujille ja periytymiselle, jotka eivät ole saatavilla CSS:ssä. Sassin avulla voit lisätä sovellukseesi monimutkaisempia ominaisuuksia.

Windows 10 ei voi tyhjentää roskakoria