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.