Fortsettende studie av styling med CSS modules React

La oss fortsette arbeidet med applikasjonen vår buttons. Nå skal vi håndtere hovedkomponenten App, som allerede var generert i mappen src fra starten. Den vil inneholde to div-er, en overskrift og en knapp.

La oss erstatte filnavnet App.css med App.module.css i henhold til konvensjonen, tømme den og opprette noen få klasser med CSS-stiler til taggene:

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

La oss nå tømme innholdet i filen App.js. Deretter importerer vi React- komponenten Buttons og stilene fra App.module.css. La oss skrive våre tagger og bruke stilene på dem, samt plassere React-komponenten 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;

Vi brukte ordet classes for navnet på objektet som inneholder stilene, som vi importerer fra App.module.css. Som i forrige tilfelle kan du navngi dette objektet som det passer deg.

Det gjenstår noen få små steg. La oss endre navnet på filen index.css i henhold til konvensjonen til index.module.css, og i filen index.js må vi ikke glemme å erstatte importlinjen:

import "./index.css";

Med linjen:

import "./index.module.css";

Nå kan vi se i nettleseren resultatet av arbeidet vårt med applikasjonen.

Hvis du åpner den genererte koden i utviklerpanelet i nettleseren, vil du se at hver komponent har sine egne unike klasser. Dermed trenger vi ikke lenger å bekymre oss for konflikter mellom klasser i separate komponenter.

Det er også viktig at CSS-moduler ikke forbyr import av vanlige eksterne CSS-filer.

Følg teorien fra leksjonen, tøm React- komponenten App i applikasjonen din inputs, som du opprettet i oppgavene til forrige leksjon, og plasser også din opprettede Inputs i den, inne i en stylized div. Legg til en stylized overskrift i App. Alt dette skal plasseres i en annen div. Stiler for taggene i React-komponenten App skrives i App.modules.css.

Sett alt sammen, koble til de resterende filene på riktig måte og start applikasjonen din inputs.