CSS modulių React stiliaus tęstinis mokymasis

Tęskime darbą su mūsų programa buttons. Dabar užsiimkime pagrindiniu komponentu App, kuris jau buvo sugeneruotas src aplanke iš pradžių. Jame mes turėsime du div, antraštę ir mygtuką.

Pervadinkime failo App.css pavadinimą į App.module.css pagal susitarimą, išvalykime jį ir sukurkime jame kelias klases su CSS stiliais žymoms:

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

Dabar išvalykime failo App.js turinį. Tada importuokime React komponentą Buttons ir stilius iš App.module.css. Parašykime mūsų žymes ir pritaikykime jiems stilius, bei patalpinkime 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;

Mes panaudojome žodį classes objekto, kuriame yra stiliai, pavadinimui, kurį mes importuojame iš App.module.css. Kaip ir ankstesniu atveju, galite šį objektą pavadinti kaip jums patogiau.

Liko pora mažų žingsnių. Pakeiskime failo index.css pavadinimą pagal susitarimą į index.module.css ir faile index.js nepamirškime pakeisti importavimo eilutės:

import "./index.css";

Šia eilute:

import "./index.module.css";

Dabar mes galime matyti naršyklėje mūsų programos darbo rezultatą.

Jei atversite sugeneruotą išdėstymą naršyklės kūrėjo skydelyje, pamatysite, kad kiekvienas komponentas turi savo unikalias sugeneruotas klases. Taigi mums daugiau nereikia nerimauti dėl atskirų komponentų klasių konfliktų.

Taip pat svarbu tai, kad CSS moduliai ne draudžia importuoti ir įprastų išorinių CSS failų.

Vadovaudamiesi pamokos teorija, išvalykite React komponentą App savo programos inputs, kurią kūrėte užduotyse paskutinei pamokai, taip pat patalpinkite jame, jūsų sukurtą, Inputs į koki nors stilizuotą div. Pridėkite į App stilizuotą antraštę. Viską dar įdėkite į kokį nors div. Stilius React komponento App žymėms parašykite App.modules.css.

Sukraukite viską kartu, teisingai prijunkite likusius failus ir paleiskite savo programą inputs.