Voortsetting van die studie van stilisering met CSS modules React

Laat ons voortgaan met die werk aan ons toepassing buttons. Nou sal ons aandag gee aan die hoof- komponent App, wat oorspronklik reeds gegenereer is in die lêergids src. Daarin sal ons twee divs, 'n opskrif en 'n knoppie hê.

Laat ons die lêernaam App.css verander na App.module.css volgens die konvensie, dit skoonmaak en 'n paar klasse met CSS-stylings vir die etikette daarin skep:

.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 nou maak ons die inhoud van die lêer App.js skoon. Daarna voer ons die React- komponent Buttons en die style uit App.module.css in. Laat ons ons etikette skryf en style daarop toepas, en ook die React-komponent Buttons plaas:

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;

Ons het die woord classes gebruik vir die naam van die voorwerp wat die style bevat, wat ons uit App.module.css invoer. Soos in die vorige geval, kan jy hierdie voorwerp noem soos dit vir jou gerieflik is.

Daar is nog 'n paar klein stappe oor. Laat ons die naam van die lêer index.css verander volgens die konvensie na index.module.css en in die lêer index.js moet ons nie vergeet om die invoerstring te vervang nie:

import "./index.css";

Met die string:

import "./index.module.css";

Nou kan ons in die blaaier sien die resultaat van die werk van ons toepassing.

As jy die gegenereerde opmaak oopmaak in die ontwikkelaarspaneel in die blaaier, sal jy sien dat elke komponent sy eie unieke klasse gegenereer het. Dus hoef ons ons nie meer bekommerd te maak oor konflikte tussen die klasse van afsonderlike komponente nie.

Dit is ook belangrik dat CSS modules nie verbied dat gewone eksterne CSS-lêers ingevoer word nie.

Volg die teorie uit die les, maak die React- komponent App van jou toepassing inputs, wat jy geskep het in die take vir die vorige les, skoon, en plaas ook daarin, die een wat jy geskep het, Inputs in een of ander gestileerde div. Voeg by in App 'n gestileerde opskrif. Plaas al dit nog in een of ander div. Style vir die etikette van die React-komponent App skryf in App.modules.css.

Voeg alles saam, koppel die oorblywende lêers korrek aan en begin jou toepassing inputs.