Reageercomponenten opmaken met CSS-modules

Reageercomponenten opmaken met CSS-modules

CSS-modules bieden een manier om CSS-klassenamen lokaal te bereiken. U hoeft zich geen zorgen te maken over het overschrijven van stijlen wanneer u dezelfde klassenaam gebruikt.





Ontdek hoe CSS-modules werken, waarom je ze zou moeten gebruiken en hoe je ze implementeert in een React-project.



Wat zijn CSS-modules?

De Documenten voor CSS-modules beschrijf een CSS-module als een CSS-bestand waarvan de klassenamen standaard lokaal zijn ingedeeld. Dit betekent dat u CSS-variabelen met dezelfde naam in verschillende CSS-bestanden kunt adresseren.





hoe gifs naar instagram te uploaden

U schrijft CSS-moduleklassen net als normale klassen. Vervolgens genereert de compiler unieke klassenamen voordat de CSS naar de browser wordt verzonden.

Beschouw bijvoorbeeld de volgende .btn-klasse in een bestand met de naam styles.modules.css:



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

Om dit bestand te gebruiken, moet u het importeren in een JavaScript-bestand.

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

Om nu naar de .btn-klasse te verwijzen en deze beschikbaar te maken in een element, zou je de klasse gebruiken zoals hieronder weergegeven:



class="styles.btn"

Het bouwproces zal de CSS-klasse vervangen door een unieke naam van het formaat zoals _styles__btn_118346908.

De uniciteit van de klassenamen betekent dat, zelfs als u dezelfde klassenaam voor verschillende componenten gebruikt, ze niet zullen botsen. U kunt een grotere code-onafhankelijkheid garanderen, omdat u de CSS-stijlen van een component kunt opslaan in een enkel bestand, specifiek voor die component.



Dit vereenvoudigt het debuggen, vooral als u met meerdere stylesheets werkt. U hoeft alleen de CSS-module voor een bepaald onderdeel op te sporen.

Met CSS-modules kunt u ook meerdere klassen combineren via de componeert trefwoord. Overweeg bijvoorbeeld de volgende .btn-klasse hierboven. Je zou die klasse in andere klassen kunnen 'uitbreiden' met behulp van compos.

Voor een verzendknop zou u het volgende kunnen hebben:

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

Dit combineert de .btn- en de .submit-klassen. Je kunt ook op deze manier stijlen samenstellen uit een andere CSS-module:

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

Houd er rekening mee dat u de regel voor opstellen vóór andere regels moet schrijven.

CSS-modules gebruiken in React

Hoe je CSS-modules in React gebruikt, hangt af van hoe je de React-applicatie maakt.

Als u create-react-app gebruikt, zijn CSS-modules kant-en-klaar ingesteld. Als u de toepassing echter helemaal opnieuw gaat maken, moet u CSS-modules configureren met een compiler zoals webpack.

Om deze zelfstudie te volgen, moet u het volgende hebben:

  • Node geïnstalleerd op uw computer.
  • Een basiskennis van ES6-modules.
  • Een basis begrip van React .

Een React-toepassing maken

Om het eenvoudig te houden, kunt u gebruik maken van maak-reageer-app om een ​​React-app te ondersteunen.

Voer deze opdracht uit om maak een nieuw React-project aan genaamd react-css-modules:

npx create-react-app react-css-modules

Dit genereert een nieuw bestand met de naam react-css-modules met alle afhankelijkheden die nodig zijn om met React aan de slag te gaan.

draai virtuele machine op chrome os

Een knopcomponent maken

In deze stap maakt u een Button-component en een CSS-module met de naam Button.module.css. Maak in de src-map een nieuwe map met de naam Components. Maak in die map een andere map aan met de naam Button. In deze map voegt u de component Button en de bijbehorende stijlen toe.

Navigeren naar src/Componenten/Knop en maak Button.js.

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

Maak vervolgens een nieuw bestand met de naam Button.module.css en voeg het volgende toe.

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

Om deze klasse in de component Button te gebruiken, importeert u deze als stijlen en verwijst u er als volgt naar in de klassenaam van het button-element:

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

Dit is een eenvoudig voorbeeld dat laat zien hoe u een enkele klasse kunt gebruiken. Misschien wil je stijlen delen over verschillende componenten of zelfs klassen combineren. Hiervoor kun je het trefwoord compos gebruiken zoals eerder in dit artikel genoemd.

Compositie gebruiken

Wijzig eerst de component Button met de volgende code.

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

Deze code maakt de component Button dynamischer door een typewaarde als een prop te accepteren. Dit type bepaalt de klassenaam die op het knopelement wordt toegepast. Dus als de knop een verzendknop is, is de klasnaam 'verzenden'. Als het 'error' is, zal de klassenaam 'error' zijn, enzovoort.

Om het trefwoord composes te gebruiken in plaats van alle stijlen voor elke knop helemaal opnieuw te schrijven, voegt u het volgende toe aan 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; 
}

In dit voorbeeld gebruiken de primaire klasse en de secundaire klasse de btn-klasse. Door dit te doen, vermindert u de hoeveelheid code die u moet schrijven.

Je kunt nog verder gaan met een externe CSS-module genaamd kleuren.module.css , met de kleuren die in de toepassing worden gebruikt. U zou deze module dan in andere modules kunnen gebruiken. Maak bijvoorbeeld het bestand colors.module.css in de hoofdmap van de map Components met de volgende code:

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

Wijzig nu in het bestand Button/Button.module.css de primaire en secundaire klassen om de bovenstaande klassen als volgt te gebruiken:

.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 met CSS-modules

U kunt CSS-modules gebruiken om de modulariteit van uw codebase te verbeteren. U kunt bijvoorbeeld een eenvoudige CSS-klasse maken voor een knopcomponent en CSS-klassen hergebruiken door middel van compositie.

Gebruik Sass om uw gebruik van CSS-modules te versterken. Sass - Syntactisch geweldige stijlbladen - is een CSS-preprocessor die een heleboel functies biedt. Ze bevatten ondersteuning voor nesten, variabelen en overerving die niet beschikbaar zijn in CSS. Met Sass kunt u complexere functies aan uw toepassing toevoegen.