A CSS modulokkal való stílusos tanulás folytatása Reactben

Folytassuk a munkát a buttons alkalmazásunkon. Most foglalkozzunk a fő App komponenssel, amely eredetileg már generálva volt a src mappában. Benne két div, egy címsor és egy gomb lesz.

Cseréljük le a App.css fájlnevet App.module.css -ra az elnevezési konvenció szerint, tisztítsuk meg, és hozzunk létre benne néhány CSS stílusú osztályt a címkékhez:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

Most tisztítsuk meg a App.js fájl tartalmát. Ezután importáljuk a Buttons React komponenst és a stílusokat a App.module.css fájlból. Írjuk meg a címkéinket, alkalmazzuk rájuk a stílusokat, és helyezzük el a Buttons React komponenst:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

A classes szót használtuk annak az objektumnak a nevéhez, amely a stílusokat tartalmazza, és amelyet importálunk a App.module.css fájlból. Ahogy az előző esetben is, ezt az objektumot tetszés szerint nevezheti el.

Már csak néhány kis lépés van hátra. Változtassuk meg a index.css fájl nevét az elnevezési konvenció szerint index.module.css -ra, és a index.js fájlban ne felejtsük el kicserélni az import sorát:

import "./index.css";

Erre a sorra:

import "./index.module.css";

Most már láthatjuk a böngészőben alkalmazásunk működésének eredményét.

Ha megnyitja a generált HTML kódot a böngésző fejlesztői eszköztárában, látni fogja, hogy minden komponensnek saját egyedi osztálya van generálva. Így nem kell többé aggódnunk az egyes komponensek osztályai közötti konfliktusok miatt.

Az is fontos, hogy a CSS modulok nem tiltják a normális külső CSS fájlok importálását sem.

A leckében található elméletet követve tisztítsa meg a App React komponensét annak a inputs alkalmazásnak, amelyet az előző lecke feladataihoz hozott létre, és helyezze el benne az általája létrehozott Inputs komponenst valamilyen stílusozott div-en belül. Adjon hozzá a App komponenshez egy stílusozott címsort. Mindezt helyezze el egy másik div-ben. A App React komponens címkéinek stílusát írja a App.modules.css fájlba.

Szerelje össze az egészet, csatlakoztassa helyesen a maradék fájlokat és indítsa el a inputs alkalmazását.