Introduktion til styling med CSS modules i React

I denne og de følgende lektioner vil vi overveje en anden moderne og effektiv tilgang til styling af React komponenter - brugen af CSS modules.

CSS moduler i denne tilgang er separate kompilerede CSS-filer, hvor klassenavne og animationer er i et lokalt scope, hvilket undgår konflikter mellem klassernavne fra forskellige komponenter.

Lad os starte med at oprette og køre vores lille React-applikation buttons. For at gøre dette opretter vi en tom mappe test, går ind i den og skriver følgende kommandoer i terminalen:

npx create-react-app buttons
cd buttons
npm start

Hvis du har en frisk version af React, det vil sige den understøtter Create React App v2 og derover, så er der ingen yderligere indstillinger at lave, da CSS-moduler i dette tilfælde vil blive understøttet automatisk. For at kontrollere kig i package.json, hvis afhængigheden react-scripts er version 2.x.x eller derover, så er alt i orden. Ellers skal du opdatere din React.

Vores applikation til styling ved hjælp af CSS modules vil indeholde tre knapper.

Vi vil navngive CSS-filer ved at overholde konventionen som følger: [name].module.css.

Lad os nu oprette mappen components i src, og tilføje filen Buttons.module.css med CSS-stilarter til vores knapper:

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

Opret også i mappen components en tom fil for React-komponenten Buttons.js, og rør ikke den genererede fil App.js endnu, vi skal til at arbejde med den senere!

I Buttons.js skal du importere filen med CSS-stilarter obligatorisk, og også anvende disse stilarter til hver knap ved hjælp af attributten 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;

Forresten, det er ikke obligatorisk at bruge ordet styles for navnet på det importerede objekt med stilarter, du kan kalde det, hvad der passer dig.

I den næste lektion vil vi afslutte vores applikation.

Efter teorien i denne lektion, skal du generere React-applikationen inputs.

Brug tilgangen CSS modules, som vist i lektionen. Opret i src i applikationen inputs filen Inputs.js til React- komponenten Inputs, som skal indeholde tre input-felter. Skriv et par stilarter i Inputs.modules.css til input-felterne. Importer denne fil i Inputs.js og anvend stilarterne.