A CSS modulok stílusozásának megkezdése Reactben

Ebben és a következő leckékben egy másik modern és hatékony megközelítést fogunk megvizsgálni a React komponensek stílusozására - a CSS modulok használatát.

CSS modulok ebben a megközelítésben külön lefordított CSS fájlok, amelyekben az osztálynevek és animációk lokális névterben vannak, ami elkerüli az osztálynevek ütközését a különböző komponensekből.

Kezdetként hozzuk létre és indítsuk el a egyszerű React alkalmazásunkat buttons. Ehhez hozzunk létre egy üres test mappát, lépjünk bele, és a terminálban írjuk be a következő parancsokat:

terminalnpx create-react-app buttons
cd buttons
npm start

Ha a React verziója friss, azaz támogatja a Create React App v2 és annál újabb verziókat, akkor nincs szükség további beállításokra, mivel ebben az esetben a CSS modulok automatikusan támogatottak lesznek. Ellenőrzésképp nézzük meg a package.json fájlt, ha a react-scripts függőség verziója 2.x.x vagy újabb, akkor minden rendben van. Ellenkező esetben frissítsd a Reactet.

A CSS modulok stílusozási módszerét alkalmazó alkalmazásunk három gombot fog tartalmazni.

A CSS fájlokat az alábbi megállapodás szerint fogjuk elnevezni: [name].module.css.

Most hozzunk létre egy components mappát a src mappában, és adjuk hozzá a Buttons.module.css fájlt a gombjaink CSS stílusaival:

Buttons.module.css.btn1 {
  background-color: orange;
  border: 2px solid brown;
  color: white;
}

.btn2 {
  background-color: red;
  border: 2px solid green;
  color: yellow;
}

.btn3 {
  background-color: brown;
  border: 2px solid yellowgreen;
  color: orange;
}

A components mappában hozzuk létre az üres React komponens fájlt Buttons.js, egyelőre ne nyulkáld a generált App.js fájlt, később fogunk vele foglalkozni!

A Buttons.js fájlban mindenképpen importáljuk a CSS stílusokat tartalmazó fájlt, és alkalmazzuk ezeket a stílusokat minden gombon a class attribútum segítségével:

Buttons.jsimport styles from "./Buttons.module.css"; 

const Buttons = () => (
  <>
    <button class={styles.btn1}>btn1</button>
    <button class={styles.btn2}>btn2</button>
    <button class={styles.btn3}>btn3</button>
  </>
);

export default Buttons;

Egyébként nem kötelező a styles szót használni az importált stílusobjektum neveként, nevezheted ahogy neked kényelmes.

A következő leckében befejezzük az alkalmazásunkat.