Pokračovanie v štúdiu styling s CSS modules React

Pokračujme v práci na našej aplikácii buttons. Teraz sa budeme venovať hlavnému komponentu App, ktorý už bol vygenerovaný v priečinku src na začiatku. V ňom budeme mať dva divy, nadpis a tlačidlo.

Názov súboru App.css zmeníme na App.module.css podľa dohody, vyčistíme ho a vytvoríme v ňom niekoľko tried s CSS štýlmi pre tagy:

.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;
}

A teraz vyčistíme obsah súboru App.js. Potom importujeme React komponent Buttons a štýly z App.module.css. Napíšeme naše tagy a aplikujeme na ne štýly, a tiež umiestnime React komponent Buttons:

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;

Použili sme slovo classes pre názov objektu, ktorý obsahuje štýly, ktorý importujeme z App.module.css. Ako v predchádzajúcom prípade, tento objekt môžete nazvať ako vám vyhovuje.

Zostáva pár malých krokov. Zmeňme názov súboru index.css podľa dohody na index.module.css a v súbore index.js nezabudnime nahradiť riadok importu:

import "./index.css";

Na riadok:

import "./index.module.css";

Teraz môžeme vidieť v prehliadači výsledok práce našej aplikácie.

Ak otvoríte vygenerované HTML v paneli vývojára v prehliadači, uvidíte, že každý komponent má vygenerované svoje unikátne triedy. Takým spôsobom sa už nemusíme obávať konfliktov medzi triedami jednotlivých komponentov.

Dôležité je aj to, že CSS moduly nezakazujú importovať aj obyčajné externé CSS súbory.

Podľa teórie z lekcie vyčistite React komponent App vašej aplikácie inputs, ktorú ste vytvorili v úlohách k minulej lekcii, a tiež umiestnite v ňom, vytvorený vámi, Inputs do nejakého stylizovaného divu. Pridajte do App stylizovaný nadpis. Všetko to umiestnite ešte do nejakého divu. Štýly pre tagy React komponentu App napíšte do App.modules.css.

Zožite všetko dohromady, správne pripojte zostávajúce súbory a spustite svoju aplikáciu inputs.