Reagáló komponensek stílusa CSS-modulok használatával

Reagáló komponensek stílusa CSS-modulok használatával

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.