Începutul studiului stilizării cu CSS modules în React

În această și în lecțiile următoare, vom analiza o altă abordare modernă și eficientă de stilizare a componentelor React - utilizarea CSS modules.

Modulele CSS în această abordare sunt fișiere CSS separate compilate, în care numele claselor și animațiilor se află în domeniul local de vizibilitate, ceea ce permite evitarea conflictelor între numele claselor din diferite componente.

Pentru început, vom crea și vom rula aplicația noastră React simplă buttons. Pentru aceasta, vom crea un folder gol test, vom intra în el și în terminal vom scrie următoarele comenzi:

npx create-react-app buttons
cd buttons
npm start

Dacă aveți o versiune recentă de React, adică ea suportă Create React App v2 și mai sus, atunci nu trebuie făcute setări suplimentare, deoarece în acest caz modulele CSS vor fi supportate automat. Pentru a verifica, uitați-vă în package.json, dacă dependența react-scripts este versiunea 2.x.x sau mai mare, atunci totul este în regulă. Altfel, actualizați React-ul dvs.

Aplicația noastră pentru stilizarea prin metoda CSS modules va conține trei butoane.

Vom numi fișierele CSS, respectând convenția, în felul următor: [name].module.css.

Să creăm acum folderul components în src, și în el să adăugăm fișierul Buttons.module.css cu stilurile CSS pentru butoanele noastre:

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

De asemenea, în folderul components, vom crea fișierul gol al componentei React Buttons.js, în același timp nu atingeți fișierul generat App.js, ne vom ocupa de el mai târziu!

În Buttons.js este obligatoriu să importăm fișierul cu stilurile CSS, și de asemenea să aplicăm aceste stiluri la fiecare buton cu ajutorul atributului class:

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;

Apropo, nu este obligatoriu să folosiți cuvântul styles pentru numele obiectului importat cu stiluri, îl puteți numi după cum vă este convenabil.

În lecția următoare vom finaliza aplicația noastră.

Urmând teoria acestei lecții, generați aplicația React inputs.

Utilizați abordarea CSS modules, prezentată în lecție. Creați în src al aplicației inputs fișierul Inputs.js pentru componenta React Inputs, care va conține trei input-uri. Scrieți câteva stiluri în Inputs.modules.css pentru input-uri. Importați acest fișier în Inputs.js și aplicați stilurile.