Start met het leren van stijlen met CSS modules in React

In deze en volgende lessen zullen we een andere moderne en efficiënte benadering voor het stijlen van React componenten bekijken - het gebruik van CSS modules.

CSS modules in deze benadering zijn aparte gecompileerde CSS-bestanden, waarin klassennamen en animaties zich in een lokale scope bevinden, wat conflicten tussen klassennamen uit verschillende componenten vermijdt.

Laten we om te beginnen onze kleine React-applicatie buttons maken en starten. Maak hiervoor een lege map test aan, ga erin en typ in de terminal de volgende commando's:

npx create-react-app buttons
cd buttons
npm start

Als je een recente versie van React hebt, dat wil zeggen Create React App v2 en hoger ondersteunt, dan hoef je geen extra instellingen te doen, aangezien CSS modules in dat geval automatisch ondersteund worden. Om dit te controleren bekijk je package.json, als de dependency react-scripts versie 2.x.x of hoger is, dan is alles in orde. Anders update je je React.

Onze applicatie voor het stijlen met de CSS modules methode zal drie knopjes bevatten.

We zullen CSS-bestanden noemen, volgens de conventie, als volgt: [naam].module.css.

Laten we nu de map components aanmaken in src, en daarin het bestand Buttons.module.css toevoegen met CSS-stijlen voor onze knoppen:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Maak ook in de map components een leeg React componentbestand Buttons.js aan, raak intussen het gegenereerde bestand App.js nog niet aan, daar gaan we later mee aan de slag!

Importeer in Buttons.js verplicht het bestand met CSS-stijlen, en pas deze stijlen ook toe op elke knop met behulp van het attribuut class:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

Trouwens, het is niet verplicht om het woord styles te gebruiken voor de naam van het geïmporteerde object met stijlen, je kunt het noemen zoals je wilt.

In de volgende les ronden we onze applicatie af.

Volg de theorie bij deze les en genereer de React-applicatie inputs.

Gebruik de CSS modules benadering zoals behandeld in de les. Maak in src van de applicatie inputs het bestand Inputs.js aan voor het React component Inputs, dat drie inputvelden zal bevatten. Schrijf een paar stijlen in Inputs.modules.css voor de inputvelden. Importeer dit bestand in Inputs.js en pas de stijlen toe.