Begin met die studie van stilisering met CSS modules in React

In hierdie en volgende lesse sal ons 'n ander moderne en doeltreffende benadering tot die stilisering van React komponente oorweeg - die gebruik van CSS modules.

CSS modules in hierdie benadering is aparte saamgestelde CSS lêers waarin klasname en animasies in 'n plaaslike siggebied is, wat konflikte tussen klasname van verskillende komponente verhoed.

Om te begin, skep en laai ons ons eenvoudige React toepassing buttons. Vir dit skep ons 'n leë gids test, gaan daarin en tik die volgende opdragte in die terminal:

npx create-react-app buttons
cd buttons
npm start

As jy 'n nuwe weergawe van React het, dit is ondersteun Create React App v2 en hoër, dan is geen bykomende instellings nodig nie, aangesien CSS modules in hierdie geval outomaties ondersteun sal word. Om te kontroleer kyk in package.json, as die afhanklikheid react-scripts weergawe 2.x.x en hoër is, dan is alles in orde. Anders, werk jou React by.

Ons toepassing vir stilisering deur CSS modules sal drie knoppies bevat.

Ons sal CSS lêers noem, deur die konvensie te volg, soos volg: [name].module.css.

Kom ons skep nou die gids components in src, en voeg daarin die lêer Buttons.module.css met CSS style vir ons knoppies by:

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

Skep ook in die gids components, 'n leë React komponent lêer Buttons.js, moenie tans die gegenereerde lêer App.js aanraak nie, ons sal later daarmee handel!

In Buttons.js moet ons noodwendig die lêer met CSS style invoer, en ook hierdie style toepas op elke knoppie deur die attribuut class te gebruik:

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;

Terloops, dit is nie verpligtend om die woord styles te gebruik vir die naam van die ingevoerde voorwerp met style nie, jy kan dit noem, soos jy gerieflik vind.

In die volgende les sal ons ons toepassing voltooi.

Volg die teorie vir hierdie les en genereer 'n React toepassing inputs.

Gebruik die CSS modules benadering, aangehaal in die les. Skep in src van die toepassing inputs die lêer Inputs.js vir die React komponent Inputs, wat sal bevat drie invoere. Skryf 'n paar style in Inputs.modules.css vir die invoere. Voer hierdie lêer in Inputs.js in en pas die style toe.