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 nevű fájlban:
mit kell kezdeni egy új számítógéppel
.btn {
width: 90px;
height: 40px;
padding: 10px 20px;
}
A fájl használatához importálnia kell egy JavaScript fájlba.
import styles from "./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:
class="styles.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 {
/* styles */
}
.submit {
composes: btn;
background-color: green;
color:#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:
.submit {
composes:primary from "./colors.css"
background-color: green;
}
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 kívánja létrehozni, akkor a CSS-modulokat egy fordítóval, például webpakkal 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:
hogyan lehet megváltoztatni az oldal sorrendjét a Word -ben
npx create-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.
export default function Button() {
return (
<button>Submit</button>
)
}
Ezután hozzon létre egy új fájlt Button.module.css néven, és adja hozzá a következőket.
.btn {
width: 90px;
height: 40px;
padding: 10px 20px;
border-radius: 4px;
border: none;
}
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 styles from "./Button.module.css"
export default function Button() {
return (
<button className={styles.btn}>Submit</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 styles from "./Button.module.css"
export default function Button({type="primary", label="Button"}) {
return (
<button className={styles[type]}>{label}</button>
)
}
Ez a kód dinamikusabbá teszi a Button komponenst azáltal, hogy elfogad egy típusértéket kellékké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 {
width: 90px;
height: 40px;
padding: 10px 20px;
border-radius: 4px;
border: none;
}
.primary {
composes: btn;
color: #FFFFFF;
background-color: #6E41E2;
}
.secondary {
composes: btn;
color: #6E41E2;
background-color: #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 a Components mappa gyökerében a következő kóddal:
.primaryBg {
background-color: #6E41E2
}
.secondaryBg {
background-color: #FFFFFF
}
.primaryColor {
color: #FFFFFF
}
.secondaryColor {
color: #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:
.primary {
composes: btn;
composes: primaryColor from "../colors.module.css";
composes: primaryBg from "../colors.module.css";
}
.secondary {
composes: btn;
composes: secondaryColor from "../colors.module.css";
composes: secondaryBg from "../colors.module.css";
}
Sass CSS modulokkal
A CSS-modulok segítségével javíthatja kódbázisa 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.
mac os kiterjesztett napló PC -n
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.