Sådan styles React-komponenter ved hjælp af CSS-moduler

Sådan styles React-komponenter ved hjælp af CSS-moduler

CSS-moduler giver mulighed for lokalt at omfatte CSS-klassenavne. Du behøver ikke bekymre dig om at tilsidesætte stilarter, når du bruger det samme klassenavn.





Find ud af, hvordan CSS-moduler fungerer, hvorfor du skal bruge dem, og hvordan du implementerer dem i et React-projekt.



Hvad er CSS-moduler?

Det CSS-moduler docs beskriv et CSS-modul som en CSS-fil, hvis klassenavne som standard er lokalt omfattet. Det betyder, at du kan adressere CSS-variabler med samme navn i forskellige CSS-filer.





Du skriver CSS-modulklasser ligesom normale klasser. Derefter genererer compileren unikke klassenavne, før CSS'en sendes til browseren.

hvordan man holder flash aktiveret i chrome

Overvej f.eks. følgende .btn-klasse i en fil kaldet styles.modules.css:



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

For at bruge denne fil, skal du importere den til en JavaScript-fil.

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

For nu at referere til .btn-klassen og gøre den tilgængelig i et element, skal du bruge klassen som vist nedenfor:



class="styles.btn"

Byggeprocessen vil erstatte CSS-klassen med et unikt navn på formatet som _styles__btn_118346908.

Det unikke ved klassenavnene betyder, at selvom du bruger det samme klassenavn til forskellige komponenter, vil de ikke kollidere. Du kan garantere større kodeuafhængighed, da du kan gemme en komponents CSS-stile i en enkelt fil, specifik for den pågældende komponent.



Dette forenkler fejlfinding, især hvis du arbejder med flere typografiark. Du behøver kun at spore CSS-modulet for en bestemt komponent.

CSS-moduler giver dig også mulighed for at kombinere flere klasser gennem komponerer søgeord. Overvej f.eks. følgende .btn-klasse ovenfor. Du kan 'udvide' den klasse i andre klasser ved at bruge komponer.

For en indsend-knap kan du have:

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

Dette kombinerer klasserne .btn og .submit. Du kan også komponere stilarter fra et andet CSS-modul som dette:

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

Bemærk, at du skal skrive komponer-reglen før andre regler.

Sådan bruges CSS-moduler i React

Hvordan du bruger CSS-moduler i React afhænger af, hvordan du opretter React-applikationen.

Hvis du bruger create-react-app, opsættes CSS-moduler ud af boksen. Men hvis du skal oprette applikationen fra bunden, skal du konfigurere CSS-moduler med en compiler som webpack.

For at følge med i denne tutorial skal du have:

hvordan man kan se, om facebook hackede
  • Node installeret på din maskine.
  • En grundlæggende forståelse af ES6-moduler.
  • En grundlæggende forståelse af React .

Oprettelse af en React-applikation

For at gøre tingene enkle, kan du bruge opret-reager-app at stilladsere en React-app.

Kør denne kommando til oprette et nyt React-projekt kaldet react-css-moduler:

npx create-react-app react-css-modules

Dette vil generere en ny fil kaldet react-css-modules med alle de afhængigheder, der kræves for at komme i gang med React.

Oprettelse af en knapkomponent

Du vil oprette en Button-komponent og et CSS-modul kaldet Button.module.css i dette trin. I src-mappen skal du oprette en ny mappe kaldet Components. I den mappe skal du oprette en anden mappe kaldet Button. Du tilføjer knapkomponenten og dens stilarter i denne mappe.

Naviger til src/Komponenter/Knap og opret Button.js.

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

Derefter skal du oprette en ny fil kaldet Button.module.css og tilføje følgende.

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

For at bruge denne klasse i Button-komponenten skal du importere den som typografier og henvise til den i knapelementets klassenavn på denne måde:

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

Dette er et simpelt eksempel, der viser, hvordan man bruger en enkelt klasse. Du vil måske dele stilarter på tværs af forskellige komponenter eller endda kombinere klasser. Til dette kan du bruge nøgleordet composes som tidligere nævnt i denne artikel.

Brug af sammensætning

Først skal du ændre knap-komponenten med følgende kode.

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

Denne kode gør Button-komponenten mere dynamisk ved at acceptere en typeværdi som en prop. Denne type bestemmer det klassenavn, der anvendes på knapelementet. Så hvis knappen er en indsend-knap, vil klassenavnet være 'send'. Hvis det er 'fejl', vil klassenavnet være 'fejl' og så videre.

For at bruge nøgleordet composes i stedet for at skrive alle stile for hver knap fra bunden, skal du tilføje følgende til 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; 
}

I dette eksempel bruger den primære klasse og den sekundære klasse btn-klassen. Ved at gøre dette reducerer du mængden af ​​kode, du skal skrive.

Du kan tage dette endnu længere med et eksternt CSS-modul kaldet farver.modul.css , der indeholder de farver, der er brugt i applikationen. Du kan derefter bruge dette modul i andre moduler. Opret f.eks. filen colors.module.css i roden af ​​mappen Components med følgende kode:

hvad betyder dm på sociale medier 
.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

Nu i Button/Button.module.css-filen skal du ændre de primære og sekundære klasser for at bruge ovenstående klasser som dette:

.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 med CSS-moduler

Du kan bruge CSS-moduler til at forbedre modulariteten af ​​din kodebase. Som et eksempel kan du oprette en simpel CSS-klasse til en knapkomponent og genbruge CSS-klasser gennem sammensætning.

For at styrke din brug af CSS-moduler, brug Sass. Sass — Syntactically Awesome Style Sheets — er en CSS-forprocessor, der giver et væld af funktioner. De inkluderer understøttelse af indlejring, variabler og arv, som ikke er tilgængelige i CSS. Med Sass kan du tilføje mere komplekse funktioner til din applikation.