Verder met het leren van stijlen met CSS modules React

We gaan verder met werken aan onze applicatie buttons. Laten we ons nu richten op de hoofd component App, die aanvankelijk al was gegenereerd in de map src. Het zal twee divs, een koptekst en een knop bevatten.

Laten we de bestandsnaam App.css veranderen in App.module.css volgens de afspraak, het leegmaken en er een paar klassen met CSS-stijlen voor de tags in aanmaken:

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

En laten we nu de inhoud van het bestand App.js leegmaken. Vervolgens importeren we de React component Buttons en de stijlen uit App.module.css. Laten we onze tags schrijven en de stijlen erop toepassen, en ook de React component Buttons plaatsen:

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;

We gebruikten het woord classes voor de naam van het object dat stijlen bevat, dat we importeren uit App.module.css. Zoals in het vorige geval, kun je dit object noemen zoals je wilt.

Er blijven nog een paar kleine stappen over. Laten we de naam van het bestand index.css volgens de afspraak veranderen in index.module.css en in het bestand index.js mogen we de importregel niet vergeten te vervangen:

import "./index.css";

Door de regel:

import "./index.module.css";

Nu kunnen we in de browser het resultaat van onze applicatie zien.

Als je de gegenereerde opmaak opent in het ontwikkelpaneel in de browser, zie je dat elke component zijn eigen unieke klassen heeft gegenereerd. Op deze manier hoeven we ons geen zorgen meer te maken over conflicten tussen de klassen van individuele componenten.

Belangrijk is ook dat CSS modules niet verbiedt om gewone externe CSS-bestanden te importeren.

Volg de theorie uit de les, maak de React component App van je applicatie inputs, die je in de taken bij de vorige les hebt gemaakt, leeg, en plaats erin, de door jou gemaakte, Inputs in een of andere gestileerde div. Voeg in App een gestileerde koptekst toe. Al dit plaats je in nog een div. Schrijf stijlen voor de tags van de React component App in App.modules.css.

Voeg alles samen, sluit de overgebleven bestanden correct aan en start je applicatie inputs.