Fortsatt studier av styling med CSS modules React

Låt oss fortsätta arbeta på vår applikation buttons. Nu ska vi ägna oss åt huvudkomponenten App, som redan hade genererats i mappen src från början. I den kommer vi att ha två divar, en rubrik och en knapp.

Låt oss byta namn på filen App.css till App.module.css enligt konventionen, rensa den och skapa några klasser med CSS-stilar för taggarna:

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

Och nu rensar vi innehållet i filen App.js. Importera sedan React- komponenten Buttons och stilarna från App.module.css. Låt oss skriva våra taggar och applicera stilar på dem, samt placera 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 använde ordet classes för namnet på objektet som innehåller stilarna, som vi importerar från App.module.css. Som i föregående fall kan du namnge detta objekt hur du vill.

Det återstår ett par små steg. Låt oss byta namn på filen index.css enligt konventionen till index.module.css och i filen index.js glöm inte att byta ut importraden:

import "./index.css";

Med raden:

import "./index.module.css";

Nu kan vi se i webbläsaren resultatet av vår applikations arbete.

Om du öppnar den genererade koden i webbläsarens utvecklarpanel, kommer du att se att varje komponent har genererat sina egna unika klasser. Således behöver vi inte längre oroa oss för konflikter mellan klasser i separata komponenter.

Det är också viktigt att CSS-moduler inte förbjuder import av vanliga externa CSS-filer.

Enligt lektionens teori, rensa React- komponenten App i din applikation inputs, som du skapade i uppgifterna till förra lektionen, och placera även i den, den komponent du skapat, Inputs, i någon stylad div. Lägg till i App en stylad rubrik. Allt detta placera i ytterligare någon div. Stilar för taggarna i React-komponenten App skriv i App.modules.css.

Samla ihop allt, koppla rätt på de återstående filerna och starta din applikation inputs.