Sådan tilføjes et CSS-modulformat til din React-komponent i 4 enkle trin

Lad os sige, at du gerne vil tilføje et CSS-modulformatark til dit projekt. Du kan finde Create React App's vejledning her, men i det væsentlige - og som vejledningen siger - giver CSS-moduler dig mulighed for at bruge den samme CSS-vælger i forskellige filer uden at bekymre dig om navngivning af sammenstød. Dette fungerer, fordi hvert HTML-element i din fil, som du vil style, automatisk får et unikt klassenavn.

Dette kan virke ganske forvirrende i starten, men virkelig kan processen til implementering af CSS-moduler forenkles til kun 4 trin, som det fremgår af nedenstående eksempel.

Tilføjelse af modulær CSS til en simpel komponent

  1. En funktion i React er, at CSS-moduler er “tændt” for filer, der slutter med .module.cssudvidelsen. Opret CSS-filen med et bestemt filnavn i følgende format:
Link.module.css

2. Importer styling til din komponent:

import styles from ‘../styling/components/Link.module.css’

3. Stilarterne i din CSS-fil kan følge din foretrukne navngivningskonvention, for eksempel:

.bold { font-weight: bold;}

4. Typografien anvendes på HTML-elementet som følger:

className={styles.bold}

Og det er det!

Fotokredit : Adrian Swancar Unsplash