CSS-moduler är ett tillvägagångssätt som möjliggör lokal avgränsning av CSS-klassnamn till specifika komponenter. Det ger ett sätt att skriva CSS-kod modulärt och inkapslat, vilket minskar risken för stilkonflikter och gör stilarna mer underhållbara. Faktum är att detta har blivit en av de mest använda metoderna för att organisera React-projekt.

Fil- och mappstruktur

Anta att vi har följande användargränssnitt som består av tre komponenter: VideoPlayer, AuthorInformation och VideoDescription.

Vi kommer inte att samla alla komponenter och stilar i en enda fil. Istället kommer vi att skapa en separat mapp för varje komponent. Inom varje mapp skapar vi en jsx-fil för rendering och logik samt en css-fil för att applicera stilar. Varje css-fil ska ha module.css i slutet för att uppnå modularitet. Strukturen skulle därmed se ut så här:

Obs

Denna metod erbjuder en smidig lösning för att skapa React-komponenter och skriva stilar. Den säkerställer att varje komponent är isolerad och kan återanvändas effektivt. Lokalt avgränsade klassnamn förbättrar kodens struktur, främjar återanvändbarhet och undviker stilkonflikter.

Syntax

Låt oss utforska syntaxen för att använda modulära stilar för en komponent, med VideoDescription-komponenten som exempel.

Inuti VideoDescription.jsx skapar vi en komponent som genererar en specifik markup. Det finns inget särskilt nytt eller obekant med detta.

const VideoDescription = () => (
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Skillnaden uppstår när vi vill tilldela ett klassnamn. Först måste vi importera filen VideoDescription.module.css till filen VideoDescription.jsx. Detta kan göras med följande syntax:

import <file_name> from "<file_path>";

• <file_name> kan vara valfritt ord vi associerar med filen. Vanligtvis används namn som: css, styles eller helt enkelt s;
• <file_path> är den korrekta sökvägen till filen. Vi känner redan till syntaxen: ./.

Resultat:

import css from "./VideoDescription.module.css";

För att tilldela ett klassnamn till elementet kan vi använda attributet className. Inom detta attribut omsluter vi det önskade klassnamnet med klamrar {}. Inuti klamrarna anger vi det specifika ordet som är associerat med stilmallen, följt av en punkt . och klassnamnet. Resultat: className={css.text}. text är det faktiska klassnamnet.

import css from "./VideoDescription.module.css";

const VideoDescription = () => (
  <p className={css.text}>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Nu kan vi öppna filen VideoDescription.module.css och tillämpa stilar på p-elementet med klassnamnet text genom att använda klassväljare:

.text {
  background-color: lightgreen;
  color: darkblue;
  font-size: 24px;
}