Să presupunem că doriți să adăugați o foaie de stil CSS Modules în proiectul dvs. Puteți găsi aplicațiile Create React îndrumare aici, dar în esență – și așa cum indică ghidul – modulele CSS vă permit să utilizați la fel Selector CSS în diferite fișiere fără a vă face griji cu privire la denumirea ciocnirilor. Acest lucru funcționează deoarece fiecărui element HTML din fișierul pe care doriți să-l stilizați i se dă automat un unic numele clasei.

Acest lucru poate părea destul de confuz la început, dar procesul de implementare a modulelor CSS poate fi simplificat la doar 4 pași, așa cum este demonstrat în exemplul de mai jos.

Cum sa adaugati o foaie de stil CSS Modules la
Da într-adevăr!
  1. O caracteristică a React este că modulele CSS sunt „activate” pentru fișierele care se termină cu .module.css extensie. Creați fișierul CSS cu un anumit nume de fișier în următorul format:
Link.module.css

2. Importați stilul în componenta dvs.:

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

3. Stilurile din fișierul dvs. CSS pot urma convenția de denumire preferată, de exemplu:

.bold {  font-weight: bold;}

4. Stilul se aplică elementului HTML după cum urmează:

className={styles.bold}

Si asta e!

Credit foto: Adrian Swancar pe Unsplash