Fortsat undersøgelse af styling med CSS modules React

Fortsæt arbejdet på vores app buttons. Nu skal vi tage os af hovedkomponenten App, som allerede var genereret i mappen src fra starten. I den vil vi have to div'er, en overskrift og en knap.

Lad os erstatte filnavnet App.css med App.module.css efter konvention, rense det og oprette flere klasser med CSS-stilarter til tags:

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

Og så rydder vi indholdet i filen App.js. Derefter importerer vi React- komponenten Buttons og stilarter fra App.module.css. Lad os skrive vores tags og anvende stilarter på dem, samt placere 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 brugte ordet classes til navnet på objektet, der indeholder stilarter, som vi importerer fra App.module.css. Som i det foregående tilfælde kan du navngive dette objekt, som du finder passende.

Der er kun et par små skridt tilbage. Lad os ændre navnet på filen index.css efter konvention til index.module.css og i filen index.js må vi ikke glemme at erstatte importlinjen:

import "./index.css";

Med linjen:

import "./index.module.css";

Nu kan vi se i browseren resultatet af vores apps arbejde.

Hvis du åbner den genererede kode i udviklerpanelet i browseren, vil du se, at hver komponent har sine egne unikke klasser. På denne måde behøver vi ikke længere bekymre os om konflikter mellem klasser i separate komponenter.

Det er også vigtigt, at CSS-moduler ikke forbyder import af almindelige eksterne CSS-filer.

Følg teorien fra lektionen, rens React- komponenten App i din app inputs, som du oprettede i opgaver til den forrige lektion, og placer også din oprettede Inputs i en eller anden stylized div. Tilføj en stylized overskrift i App. Alt dette placeres i en anden div. Stilarter til tags i React-komponenten App skrives i App.modules.css.

Saml alt sammen, tilslut korrekt de resterende filer og start din app inputs.