CSS moodulitega stiilide jätkamine Reactis

Jätkame oma rakenduse buttons kallal. Nüüd võtame ette peamise komponendi App, mis oli juba genereeritud kaustas src algselt. Selles on meil kaks div-i, pealkiri ja nupp.

Muudame faili App.css nime App.module.css-ks vastavalt kokkuleppele, tühjendame selle ja loome sellesse mitu klassi CSS-stiilidega märgendite jaoks:

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

Nüüd tühjendame faili App.js sisu. Seejärel impordime React komponendi Buttons ja stiilid failist App.module.css. Kirjutame oma märgendid ja rakendame neile stiile, ning paigutame React komponendi 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;

Me kasutasime sõna classes stiile sisaldava objekti nimeks, mille impordime failist App.module.css. Nagu eelmisel juhul, võite selle objekti nime valida endale sobivalt.

Jäänud on paar väikest sammu. Muudame faili index.css nime kokkuleppe kohaselt index.module.css-ks ja failis index.js ärgem unustagem asendada importimise rida:

import "./index.css";

Reaga:

import "./index.module.css";

Nüüd näeme brauseris meie rakenduse töö tulemust.

Kui avate genereeritud märgistuse brauseri arendustööriista paneelis, näete, et igal komponendil on genereeritud oma unikaalsed klassid. Seega ei pea me enam muretsema klasside konfliktide pärast eraldi komponentide vahel.

Oluline on ka see, et CSS moodulid ei keela tavaliste väliste CSS-failide importimist.

Järgides õppetüki teooriat, tühjendage oma rakenduse inputs React komponent App, mille loote eelmise õppetüki ülesannetes, ning asetage sinna loodud Inputs mõnda stiiliseeritud div-i. Lisage App-le stiiliseeritud pealkiri. Kõik see pange veel mõnda div-i. Märgendite stiilid React komponendi App jaoks kirjutage faili App.modules.css.

Koguge kõik kokku, ühendage õigesti ülejäänud failid ja käivitage oma rakendus inputs.