Hogyan adhatunk CSS modulok stíluslapot a React összetevőhöz 4 egyszerű lépésben

Tegyük fel, hogy CSS modulok stíluslapot szeretne hozzáadni a projekthez. A Create React App útmutatását itt találja, de lényegében - és amint az útmutatás állítja - a CSS modulok lehetővé teszik, hogy ugyanazt a CSS választót használja különböző fájlokban anélkül, hogy aggódna az ütközések elnevezése miatt. Ez azért működik, mert a fájl minden HTML-eleme, amelyet meg akar stílusozni, automatikusan egyedi osztálynevet kap .

Ez elsőre meglehetősen zavarónak tűnhet, de a CSS modulok megvalósításának folyamata valóban csak 4 lépésben egyszerűsíthető, amint azt az alábbi példa bemutatja.

Moduláris CSS hozzáadása egy egyszerű komponenshez

  1. A React egyik jellemzője, hogy a CSS modulok „be vannak kapcsolva” a .module.csskiterjesztéssel végződő fájloknál . Hozzon létre egy CSS fájlt egy adott fájlnévvel a következő formátumban:
Link.module.css

2. Importálja a stílust a komponensébe:

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

3. A CSS fájl stílusai követhetik az Ön által preferált elnevezési szokásokat, például:

.bold { font-weight: bold;}

4. A stílus a HTML elemre az alábbiak szerint kerül alkalmazásra:

className={styles.bold}

És ez az!

Fotó: Adrian Swancar az Unsplash- on