Komme i gang med styling med CSS modules i React

I denne og de følgende leksjonene vil vi se på en annen moderne og effektiv tilnærming til styling av React komponenter - bruk av CSS modules.

CSS-moduler i denne tilnærmingen er separerte kompilerte CSS-filer, der klassenavn og animasjoner er i lokalt skop, noe som unngår konflikter mellom klassenavn fra forskjellige komponenter.

For å begynne, la oss opprette og kjøre vår enkle React-applikasjon buttons. For å gjøre dette, opprett en tom mappe test, gå inn i den og skriv følgende kommandoer i terminalen:

npx create-react-app buttons
cd buttons
npm start

Hvis du har en ny versjon av React, det vil si den støtter Create React App v2 og høyere, trenger du ikke gjøre noen ytterligere innstillinger, siden CSS-moduler i så fall vil blive støttet automatisk. For å sjekke, se i package.json, hvis avhengigheten react-scripts er versjon 2.x.x eller høyere, er alt i orden. Hvis ikke, oppdater React.

Applikasjonen vår for styling ved hjelp av CSS modules vil inneholde tre knapper.

Vi vil navngi CSS-filene, ved å følge konvensjonen, som følger: [name].module.css.

La oss nå opprette mappen components i src, og legge til filen Buttons.module.css med CSS-stiler til knappene våre:

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

Opprett også i mappen components, en tom fil for React-komponenten Buttons.js, men ikke rør den genererte filen App.js ennå, vi tar oss av den senere!

I Buttons.js må vi importere filen med CSS-stiler, og også bruke disse stilene på hver knapp ved hjelp av attributtet 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 nødvendig å bruke ordet styles for navnet på det importerte objektet med stiler, du kan kalle det det som passer deg.

I neste leksjon fullfører vi applikasjonen vår.

Følg teorien for denne leksjonen og generer React-applikasjonen inputs.

Bruk tilnærmingen CSS modules, gitt i leksjonen. Opprett i src i applikasjonen inputs filen Inputs.js for React- komponenten Inputs, som skal inneholde tre input-felter. Skriv et par stiler i Inputs.modules.css til input-feltene. Importer denne filen i Inputs.js og bruk stilene.