Hur man utformar React-komponenter med CSS-moduler

Hur man utformar React-komponenter med CSS-moduler

CSS-moduler ger ett sätt att lokalt omfånga CSS-klassnamn. Du behöver inte oroa dig för att åsidosätta stilar när du använder samma klassnamn.





Ta reda på hur CSS-moduler fungerar, varför du bör använda dem och hur du implementerar dem i ett React-projekt.



Vad är CSS-moduler?

De CSS-moduler docs beskriv en CSS-modul som en CSS-fil vars klassnamn är lokalt avgränsade som standard. Det betyder att du kan adressera CSS-variabler med samma namn i olika CSS-filer.





Du skriver CSS-modulklasser precis som vanliga klasser. Sedan genererar kompilatorn unika klassnamn innan CSS skickas till webbläsaren.

Tänk till exempel på följande .btn-klass i en fil som heter styles.modules.css:



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

För att använda den här filen måste du importera den till en JavaScript-fil.

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

För att nu referera till .btn-klassen och göra den tillgänglig i ett element, skulle du använda klassen enligt nedan:



class="styles.btn"

Byggprocessen kommer att ersätta CSS-klassen med ett unikt namn på formatet som _styles__btn_118346908.

Det unika med klassnamnen innebär att även om du använder samma klassnamn för olika komponenter kommer de inte att kollidera. Du kan garantera större kodoberoende eftersom du kan lagra en komponents CSS-stilar i en enda fil, specifik för den komponenten.



Detta förenklar felsökning, särskilt om du arbetar med flera stilmallar. Du behöver bara spåra CSS-modulen för en viss komponent.

CSS-moduler låter dig också kombinera flera klasser genom komponerar nyckelord. Tänk till exempel på följande .btn-klass ovan. Du kan 'förlänga' den klassen i andra klasser med hjälp av kompositer.

För en skicka-knapp kan du ha:

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

Detta kombinerar klasserna .btn och .submit. Du kan också komponera stilar från en annan CSS-modul så här:

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

Observera att du måste skriva composes-regeln före andra regler.

Hur man använder CSS-moduler i React

Hur du använder CSS-moduler i React beror på hur du skapar React-applikationen.

Om du använder create-react-app ställs CSS-moduler upp direkt. Men om du ska skapa applikationen från början måste du konfigurera CSS-moduler med en kompilator som webpack.

För att följa med den här handledningen bör du ha:

  • Nod installerad på din maskin.
  • En grundläggande förståelse för ES6-moduler.
  • En grundläggande förståelse för React .

Skapa en React-applikation

För att göra saker enkelt kan du använda skapa-reagera-app för att bygga en React-app.

Kör detta kommando till skapa ett nytt React-projekt kallade react-css-moduler:

npx create-react-app react-css-modules

Detta kommer att generera en ny fil som heter react-css-modules med alla beroenden som krävs för att komma igång med React.

Skapa en knappkomponent

Du kommer att skapa en Button-komponent och en CSS-modul som heter Button.module.css i detta steg. Skapa en ny mapp som heter Components i src-mappen. Skapa en annan mapp som heter Button i den mappen. Du kommer att lägga till Button-komponenten och dess stilar i den här mappen.

Navigera till src/Components/Button och skapa Button.js.

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

Skapa sedan en ny fil som heter Button.module.css och lägg till följande.

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

För att använda den här klassen i Button-komponenten, importera den som stilar och referera till den i knappelementets klassnamn så här:

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

Detta är ett enkelt exempel som visar hur man använder en enskild klass. Du kanske vill dela stilar mellan olika komponenter eller till och med kombinera klasser. För detta kan du använda nyckelordet composes som tidigare nämnts i den här artikeln.

Använda komposition

Modifiera först Button-komponenten med följande kod.

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

Denna kod gör Button-komponenten mer dynamisk genom att acceptera ett typvärde som en prop. Denna typ kommer att bestämma klassnamnet som tillämpas på knappelementet. Så om knappen är en skicka-knapp kommer klassnamnet att vara 'skicka'. Om det är 'fel', kommer klassnamnet att vara 'fel' och så vidare.

För att använda nyckelordet composes istället för att skriva alla stilar för varje knapp från början, lägg till följande i Button.module.css.

ta reda på vad raderad youtube -video var 
.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 det här exemplet använder primärklassen och sekundärklassen btn-klassen. Genom att göra detta minskar du mängden kod du behöver skriva.

Du kan ta detta ännu längre med en extern CSS-modul som heter colors.module.css , som innehåller färgerna som används i applikationen. Du kan sedan använda den här modulen i andra moduler. Skapa till exempel filen colors.module.css i roten av mappen Components med följande kod:

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

Nu i Button/Button.module.css-filen, ändra de primära och sekundära klasserna för att använda ovanstående klasser så här:

.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 använda CSS-moduler för att förbättra modulariteten i din kodbas. Som ett exempel kan du skapa en enkel CSS-klass för en knappkomponent och återanvända CSS-klasser genom komposition.

För att öka din användning av CSS-moduler, använd Sass. Sass — Syntactically Awesome Style Sheets — är en CSS-förprocessor som ger massor av funktioner. De inkluderar stöd för kapsling, variabler och arv som inte är tillgängliga i CSS. Med Sass kan du lägga till mer komplexa funktioner i din applikation.