Kuendelea na Utafiti wa Staili na Moduli za CSS React

Tuendelee na kazi kwenye programu yetu buttons. Sasa tushughulikie kipengele kuu App, ambayo tayari ilitengenezwa kwenye folda src hapo mwanzo. Ndani yake tutakuwa na divi mbili, kichwa na kifungo.

Badilisha jina la faili App.css kuwa App.module.css kulingana na makubaliano, usafishe na uunde ndani yake madarasa kadhaa yenye staili za CSS kwa vitambulisho:

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

Sasa usafishe yaliyomo kwenye faili App.js. Kisha ingiza kipengele cha React Buttons na staili kutoka App.module.css. Tuandike vitambulisho vyetu na tutumie staili kwazo, na pia tuweke kipengele cha React Buttons:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>Moduli za CSS Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Tumetumia neno classes kwa jina la kitu kilichomo ndani staili, ambacho tunaingiza kutoka App.module.css. Kama ilivyokuwa hapo awali, unaweza kukiita kitu hiki jina lolote linalokufaa.

Inabaki hatua ndogo ndogo chache. Badilisha jina la faili index.css kulingana na makubaliano kuwa index.module.css na kwenye faili index.js usisahau kubadilisha mstari wa uingizaji:

import "./index.css";

Kwa mstari:

import "./index.module.css";

Sasa tunaweza kuona kwenye kivinjari matokeo ya kazi ya programu yetu.

Ukifungua muundo uliotengenezwa kwenye paneli ya msanidi programu kwenye kivinjari, utaona kwamba kila kipengele kimetengenezwa na madarasa yake ya kipekee. Hivyo basu, hatuhitaji tena kuwa na wasiwasi kuhusu migogoro kati ya madarasa ya vipengele tofauti.

Jambo muhimu zaidi ni kwamba moduli za CSS hazikatazi kuingiza faili za kawaida za CSS za nje.

Kufuatana na nadharia kutoka kwenye somo, safisha kipengele cha React App cha programu yako inputs, uliyoiumba katika kazi za somo lililopita, na pia uweke ndani yake, uliyouunda mwenyewe, Inputs kwenye divi iliyostilishwa. Ongeza kwenye App kichwa kilichostilishwa. Yote hii iweke kwenye divi nyingine. Staili kwa vitambulisho vya kipengele cha React App andika kwenye App.modules.css.

Kusanya yote pamoja, wasiliana vizuri faili zilizobaki na uanzishe programu yako inputs.