Nastavak proučavanja stilizacije sa CSS modulima React

Nastavimo rad na našoj aplikaciji buttons. Sada ćemo se pozabaviti glavnom komponentom App, koja je već bila generisana u folderu src na početku. U njoj ćemo imati dva div-a, naslov i dugme.

Zamenimo naziv fajla App.css sa App.module.css po dogovoru, očistimo ga i kreirajmo u njemu nekoliko klasa sa CSS stilovima za tagove:

.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 sada očistimo sadržaj fajla App.js. Zatim importujmo React komponentu Buttons i stilove iz App.module.css. Napišimo naše tagove i primenimo na njih stilove, a takođe postavimo 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;

Koristili smo reč classes za ime objekta koji sadrži stilove, koji importujemo iz App.module.css. Kao iu prethodnom slučaju, ovaj objekat možete nazvati kako vam je zgodno.

Ostalo je još par malih koraka. Promenimo naziv fajla index.css po dogovoru u index.module.css i u fajlu index.js ne zaboravimo da zamenimo liniju importa:

import "./index.css";

Sa linijom:

import "./index.module.css";

Sada možemo videti u brauzeru rezultat rada naše aplikacije.

Ako otvorite generisanu verziju u panelu za razvoj u brauzeru, videćete da svaka komponenta ima svoje jedinstvene klase. Na taj način, ne moramo više da brinemo o konfliktima između klasa pojedinačnih komponenti.

Važno je i to što CSS moduli ne zabranjuju importovanje i običnih spoljnih CSS fajlova.

Prateći teoriju iz lekcije, očistite React komponentu App vaše aplikacije inputs, koju ste kreirali u zadacima za prethodnu lekciju, a takođe postavite u njoj, vašu kreiranu, Inputs u nekom stilizovanom div-u. Dodajte u App stilizovan naslov. Sve ovo smestite još u neki div. Stilove za tagove React komponente App napišite u App.modules.css.

Sakupite sve zajedno, ispravno povežite preostale fajlove i pokrenite vašu aplikaciju inputs.