Nadaljevanje študija oblikovanja s CSS moduli React

Nadaljujmo z delom na naši aplikaciji buttons. Zdaj se bomo posvetili glavni komponenti App, ki je bila že generirana v mapi src na začetku. V njej bomo imeli dva div, naslov in gumb.

Preimenujmo datoteko App.css v App.module.css po dogovoru, jo očistimo in v njej ustvarimo nekaj razredov s CSS slogi za oznake:

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

Zdaj pa očistimo vsebino datoteke App.js. Nato uvozimo React komponento Buttons in sloge iz App.module.css. Napišimo naše oznake in nanje uporabimo sloge, ter postavimo React komponento 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 Gumbi</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Uporabili smo besedo classes za ime objekta, ki vsebuje sloge, ki jih uvozimo iz App.module.css. Kot v prejšnjem primeru, lahko ta objekt poimenujete po svoji želji.

Ostalo je še nekaj majhnih korakov. Spremenimo ime datoteke index.css po dogovoru v index.module.css in v datoteki index.js ne pozabimo zamenjati vrstice uvoza:

import "./index.css";

Z vrstico:

import "./index.module.css";

Zdaj lahko v brskalniku vidimo rezultat dela naše aplikacije.

Če odprete generirano kodo v razvojnem orodju brskalnika, vidite, da ima vsaka komponenta svoje edinstvene razrede. Tako nam ni treba več skrbeti za navzkrižja med razredi posameznih komponent.

Pomembno je tudi, da CSS moduli ne prepovedujejo uvažanja običajnih zunanjih CSS datotek.

Sledite teoriji iz lekcije, očistite React komponento App vaše aplikacije inputs, ki ste jo ustvarili v nalogah za prejšnjo lekcijo, in vanjo postavite vaš ustvarjen Inputs v kakšen oblikovan div. Dodajte v App oblikovan naslov. Vse to postavite v še kakšen div. Sloge za oznake React komponente App napišite v App.modules.css.

Vse skupaj sestavite, pravilno povežite preostale datoteke in zaženite svojo aplikacijo inputs.