A CSS-modulok lehetőséget biztosítanak a CSS-osztálynevek helyi hatókörére. Nem kell aggódnia a stílusok felülbírálása miatt, ha ugyanazt az osztálynevet használja.

Tudja meg, hogyan működnek a CSS-modulok, miért érdemes használni őket, és hogyan lehet őket megvalósítani egy React projektben.

Mik azok a CSS modulok?

Az CSS-modulok dokumentumai írja le a CSS-modult CSS-fájlként, amelynek osztálynevei alapértelmezés szerint helyi hatókörűek. Ez azt jelenti, hogy a különböző CSS-fájlokban azonos nevű CSS-változókat címezhet meg.

A CSS modul osztályait ugyanúgy írod, mint a normál osztályokat. Ezután a fordító egyedi osztályneveket generál, mielőtt elküldi a CSS-t a böngészőnek.

Vegyük például a következő .btn osztályt a styles.modules.css fájlban:

.btn {
szélesség: 90 képpont;
magasság: 40px;
padding: 10px 20px;
}

A fájl használatához importálnia kell egy JavaScript fájlba.

import stílusok tól től "./styles.module.js"

A .btn osztályra való hivatkozáshoz és egy elemben való elérhetővé tételéhez használja az osztályt az alábbiak szerint:

osztály="stílusok.btn"

Az építési folyamat lecseréli a CSS osztályt a formátum egyedi nevére, mint például _styles__btn_118346908.

Az osztálynevek egyedisége azt jelenti, hogy még ha ugyanazt az osztálynevet használod is a különböző komponensekhez, nem ütköznek. Nagyobb kódfüggetlenséget garantálhat, mivel az összetevő CSS-stílusait egyetlen fájlban tárolhatja, az adott összetevőre jellemzően.

Ez leegyszerűsíti a hibakeresést, különösen, ha több stíluslappal dolgozik. Csak egy adott összetevő CSS-modulját kell felkutatnia.

A CSS-modulok lehetővé teszik több osztály kombinálását is alkot kulcsszó. Vegyük például a fenti .btn osztályt. Ezt az osztályt „kibővítheti” más osztályokban a kompozíciók segítségével.

A küldés gombhoz a következőket teheti:

.btn {
/* stílusok */
}

.Beküldés {
komponálja: btn;
háttérszín: zöld;
szín:#FFFFFF
}

Ez egyesíti a .btn és a .submit osztályokat. Más CSS-modulokból is összeállíthat stílusokat, például:

.Beküldés {
alkot: elsődleges től "./colors.css"
háttérszín: zöld;
}

Vegye figyelembe, hogy a komponálási szabályt a többi szabály elé kell írnia.

A CSS-modulok használata a Reactban

A React CSS-moduljainak használata a React alkalmazás létrehozásának módjától függ.

Ha a create-react-app alkalmazást használja, a CSS-modulok már a dobozból be vannak állítva. Ha azonban az alkalmazást a semmiből akarja létrehozni, akkor a CSS-modulokat egy fordítóval, például webpack-kal kell konfigurálnia.

Az oktatóanyag követéséhez a következőkre van szüksége:

  • Csomópont telepítve a gépére.
  • Az ES6 modulok alapvető ismerete.
  • Egy alap a React megértése.

React alkalmazás létrehozása

Az egyszerűség kedvéért használhatja Alkalmazás létrehozása-reagálása hogy állványozzon egy React alkalmazást.

Futtassa ezt a parancsot hozzon létre egy új React projektet úgynevezett react-css-modulok:

npx teremt-react-app react-css-modules

Ez létrehoz egy új fájlt, úgynevezett react-css-modules, amely tartalmazza a React használatának megkezdéséhez szükséges összes függőséget.

Gombkomponens létrehozása

Ebben a lépésben létrehoz egy Button összetevőt és egy Button.module.css nevű CSS-modult. Az src mappában hozzon létre egy új mappát Components néven. Ebben a mappában hozzon létre egy másik mappát Button néven. Ebben a mappában hozzáadhatja a Button összetevőt és annak stílusait.

Navigáljon ide src/Components/Button és hozza létre a Button.js-t.

exportalapértelmezettfunkcióGomb() {
Visszatérés (
<gomb>Beküldés</button>
)
}

Ezután hozzon létre egy új fájlt Button.module.css néven, és adja hozzá a következőket.

.btn {
szélesség: 90 képpont;
magasság: 40px;
padding: 10px 20px;
határsugár: 4 képpont;
határ: nincs;
}

Ha ezt az osztályt a Button komponensben szeretné használni, importálja stílusként, és hivatkozzon rá a gombelem osztálynevében, így:

import stílusok tól től "./Button.module.css"

exportalapértelmezettfunkcióGomb() {
Visszatérés (
<gomb className={styles.btn}>Beküldés</button>
)
}

Ez egy egyszerű példa, amely bemutatja, hogyan kell egyetlen osztályt használni. Érdemes lehet stílusokat megosztani a különböző összetevők között, vagy akár osztályokat kombinálni. Ehhez használhatja a composes kulcsszót a cikkben korábban említettek szerint.

A Kompozíció használata

Először módosítsa a Button összetevőt a következő kóddal.

import stílusok tól től "./Button.module.css"

exportalapértelmezettfunkcióGomb({type="primary", label="Button"}) {
Visszatérés (
<gomb className={styles[type]}>{címke}</button>
)
}

Ez a kód dinamikusabbá teszi a Button komponenst azáltal, hogy típusértéket fogad el támaszként. Ez a típus határozza meg a gombelemre alkalmazott osztálynevet. Tehát ha a gomb egy küldés gomb, akkor az osztály neve „beküldés” lesz. Ha „hiba”, az osztály neve „hiba” lesz, és így tovább.

A composes kulcsszó használatához ahelyett, hogy az egyes gombokhoz az összes stílust a semmiből írná, adja hozzá a következőt a Button.module.css fájlhoz.

.btn {
szélesség: 90 képpont;
magasság: 40px;
padding: 10px 20px;
határsugár: 4 képpont;
határ: nincs;
}

.elsődleges {
komponálja: btn;
szín: #FFFFFF;
háttérszín: #6E41E2;
}

.másodlagos {
komponálja: btn;
szín: #6E41E2;
háttérszín: #FFFFFF;
}

Ebben a példában az elsődleges és a másodlagos osztály a btn osztályt használja. Ezzel csökkenti a megírandó kód mennyiségét.

Ezt még tovább viheti egy külső CSS modullal színek.modul.css, amely az alkalmazásban használt színeket tartalmazza. Ezt a modult ezután más modulokban is használhatja. Például hozza létre a Colors.module.css fájlt az Összetevők mappa gyökerében a következő kóddal:

.primaryBg {
háttérszín: #6E41E2
}
.secondaryBg {
háttérszín: #FFFFFF
}

.primaryColor {
szín: #FFFFFF
}
.secondaryColor {
szín: #6E41E2
}

Most a Button/Button.module.css fájlban módosítsa az elsődleges és másodlagos osztályokat a fenti osztályok használatához, így:

.elsődleges {
komponálja: btn;
komponálja: elsődlegesSzíntől "../colors.module.css";
összeállítja: primerBg from "../colors.module.css";
}

.másodlagos {
komponálja: btn;
komponálja: másodlagos Színből "../colors.module.css";
komponálja: SecondaryBg from "../colors.module.css";
}

Sass CSS modulokkal

A CSS-modulok segítségével javíthatja a kódbázis modularitását. Példaként létrehozhat egy egyszerű CSS-osztályt egy gombösszetevőhöz, és újra felhasználhatja a CSS-osztályokat a kompozíción keresztül.

A CSS-modulok használatának fokozásához használja a Sass-t. A Sass – Szintaktikailag Awesome Style Sheets – egy CSS-előfeldolgozó, amely rengeteg funkciót biztosít. Ezek közé tartozik a beágyazás, a változók és az öröklődés támogatása, amelyek nem állnak rendelkezésre a CSS-ben. A Sass segítségével összetettebb funkciókat adhat az alkalmazáshoz.