Continuarea studiului stilizării cu module CSS în React

Vom continua lucrul la aplicația noastră buttons. Acora să ne ocupăm de componenta principală App, care a fost deja generată în folderul src inițial. În ea vom avea două div-uri, un titlu și un buton.

Să redenumim fișierul App.css în App.module.css conform convenției, să îl curățăm și să creăm în el câteva clase cu stiluri CSS pentru tag-uri:

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

Acum să curățăm conținutul fișierului App.js. Apoi să importăm componenta React Buttons și stilurile din App.module.css. Să scriem tag-urile noastre și să aplicăm stiluri lor, precum și să plasăm componenta React 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;

Am folosit cuvântul classes pentru numele obiectului care conține stilurile, pe care îl importăm din App.module.css. Ca și în cazul precedent, puteți numi acest obiect cum vă este convenabil.

Mai rămân câțiva pași mici. Să schimbăm numele fișierului index.css conform convenției în index.module.css și în fișierul index.js să nu uităm să înlocuim șirul de import:

import "./index.css";

Cu șirul:

import "./index.module.css";

Acum putem vedea în browser rezultatul muncii aplicației noastre.

Dacă deschideți markup-ul generat în panoul dezvoltatorului din browser, veți vedea că fiecare componentă are clasele ei unice generate. Astfel, nu mai trebuie să ne îngrijorăm despre conflictele între clasele componentelor individuale.

Este important și faptul că modulele CSS nu interzic importarea fișierelor CSS externe obișnuite.

Urmând teoria din lecție, curățați componenta React App a aplicației voastre inputs, pe care ați creat-o în sarcinile din lecția trecută, de asemenea plasați în ea, pe cea creată de dvs., Inputs în vreun div stilizat. Adăugați în App un titlu stilizat. Toate așeză-le încă într-un div. Stilurile pentru tag-urile componentei React App scrieți-le în App.modules.css.

Adunați totul împreună, conectați corect fișierele rămase și lansați aplicația dvs. inputs.