Pokračování ve studiu stylování s CSS moduly v Reactu

Pokračujme v práci na naší aplikaci buttons. Nyní se budeme zabývat hlavní komponentou App, která již byla vygenerována ve složce src na začátku. Bude obsahovat dva divy, nadpis a tlačítko.

Přejmenujeme soubor App.css na App.module.css podle konvence, vyčistíme jej a vytvoříme v něm několik tříd s CSS styly pro 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;
}

Nyní vyčistíme obsah souboru App.js. Poté importujeme React komponentu Buttons a styly z App.module.css. Napíšeme naše tagy a aplikujeme na ně styly, a také umístíme React komponentu 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 jsme slovo classes pro název objektu obsahujícího styly, který importujeme z App.module.css. Jako v předchozím případě můžete tento objekt pojmenovat, jak vám vyhovuje.

Zbývá pár malých kroků. Změňme název souboru index.css podle konvence na index.module.css a v souboru index.js nezapomeneme změnit řádek importu:

import "./index.css";

Na řádek:

import "./index.module.css";

Nyní můžeme v prohlížeči vidět výsledek práce naší aplikace.

Pokud otevřete vygenerované HTML v panelu vývojáře v prohlížeči, uvidíte, že každá komponenta má vygenerované své unikátní třídy. Tímto způsobem se již nemusíme obávat konfliktů mezi třídami jednotlivých komponent.

Důležité je také to, že CSS moduly nezakazují importovat i obyčejné externí CSS soubory.

Podle teorie z lekce vyčistěte React komponentu App vaší aplikace inputs, kterou jste vytvářeli v úkolech k minulé lekci, a také umístěte v ní, vytvořenou vámi, Inputs do nějakého stylizovaného divu. Přidejte do App stylizovaný nadpis. Všechno toto umístěte do dalšího divu. Styly pro tagy React komponenty App napište do App.modules.css.

Sestavte vše dohromady, správně připojte zbývající soubory a spusťte svou aplikaci inputs.