CSS moduļu React turpinājums ar stilizēšanas apguvi

Turpināsim darbu pie mūsu lietotnes buttons. Tagad pievērsīsimies galvenajam komponentam App, kas jau bija ģenerēts mapē src sākotnēji. Tajā mums būs divi divi, virsraksts un poga.

Mainīsim faila nosaukumu App.css uz App.module.css pēc vienošanās, iztīrīsim to un izveidosim tajā vairākas klases ar CSS stiliem atbilstoši tagiem:

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

Un tagad iztīrīsim faila saturu App.js. Pēc tam importēsim React komponentu Buttons un stilus no App.module.css. Uzrakstīsim mūsu tagus un piemērosim tiem stilus, kā arī ievietosim 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;

Mēs izmantojām vārdu classes objekta nosaukumam, kas satur stilus, ko mēs importējam no App.module.css. Tāpat kā iepriekšējā gadījumā, jūs varat nosaukt šo objektu kā jums ir ērti.

Atlikušas pāris mazas darbības. Mainīsim faila nosaukumu index.css pēc vienošanās uz index.module.css un failā index.js neaizmirsīsim nomainīt importēšanas rindu:

import "./index.css";

Uz rindu:

import "./index.module.css";

Tagad mēs varam redzēt pārlūkprogrammā mūsu lietotnes darba rezultātu.

Ja atvērsiet ģenerēto izkārtojumu izstrādātāja panelī pārlūkprogrammā, jūs redzēsiet, ka katram komponentam ir ģenerētas savas unikālas klases. Tādējādi mums vairs nav jāuztraucas par konfliktiem starp atsevišķu komponentu klasēm.

Svarīgi arī tas, ka CSS moduļi neliedz importēt arī parastus ārējos CSS failus.

Sekojot teorijai no nodarbības, iztīriet React komponentu App jūsu lietotnē inputs, ko izveidojāt uzdevumos iepriekšējai nodarbībai, kā arī ievietojiet tajā, jūsu izveidoto, Inputs kādā stilizētā div. Pievienojiet App stilizētu virsrakstu. Visu šo ievietojiet vēl kādā div. Stilus React komponenta App tagiem uzrakstiet App.modules.css.

Salieciet visu kopā, pareizi pievienojiet atlikušos failus un iedarbiniet savu lietotni inputs.