CSS moodulite abil stiilide õppimise algus Reactis

Selles ja järgnevas tundides hakkame vaatama veel üht kaasaegset ja tõhusat lähenemist React komponentide stiilimiseks - CSS moodulite kasutamist.

CSS moodulid selles lähenemises on eraldi kompileeritud CSS failid, kus klasside ja animatsioonide nimed asuvad kohalikus ulatuses, mis võimaldab vältida klassinimede konflikte erinevatest komponentidest.

Alustuseks loome ja käivitame oma lihtsa React rakenduse buttons. Selleks loome tühja kausta test, sisenege sellesse ja terminalis kirjutage järgmised käsud:

npx create-react-app buttons
cd buttons
npm start

Kui teil on Reacti uus versioon, see tähendab, et see toetab Create React App v2 või uuemat, siis lisaseadistusi tegema ei pea, kuna sel juhul toetatakse CSS mooduleid automaatselt. Kontrollimiseks vaadake faili package.json, kui sõltuvus react-scripts on versioonist 2.x.x või uuem, siis on kõik korras. Vastasel juhul uuendage oma Reacti.

Meie rakendus stiilimiseks CSS moodulite meetodil sisaldab kolme nuppu.

CSS faile nimetame kokkuleppe kohaselt järgmiselt: [name].module.css.

Loome nüüd kausta components src kataloogi, ja lisame sinna faili Buttons.module.css CSS stiilidega meie nuppude jaoks:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Samuti kaustas components, loome tühja React komponendi faili Buttons.js, selle ajaga ärge puudutage loodud faili App.js, me hakkame sellega tegelema hiljem!

Buttons.js failis impordime kindlasti CSS stiilide faili, ja rakendame need stiilid igale nupule atribuudi class abil:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

Muide, pole vaja kasutada sõna styles imporditava stiilide objekti nimeks, võite selle nimetada, kuidas teile mugav.

Järgmises tunnis lõpetame oma rakenduse.

Järgides selle tunni teooriat, genereerige React rakendus inputs.

Kasutage tunnis toodud CSS moodulite lähenemist. Looge rakenduse src kaustas inputs fail Inputs.js React komponendi Inputs jaoks, mis sisaldab kolme inputit. Kirjutage paar-kolm stiili Inputs.modules.css failis inputite jaoks. Importige see fail Inputs.js faili ja rakendage stiilid.