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:

npx 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:

.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:

import 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.

A lecke elmélete alapján generáld le a React alkalmazást inputs néven.

Használd a leckében bemutatott CSS modulok megközelítést. Hozz létre a src mappában az inputs alkalmazásban egy Inputs.js fájlt a React komponenshez Inputs néven, amely három inputot fog tartalmazni. Írj néhány stílust a Inputs.modules.css fájlba az inputokhoz. Importáld ezt a fájlt a Inputs.js fájlba, és alkalmazd a stílusokat.