Začíname so štúdiom styling s CSS modules v React

V tejto a nasledujúcich lekciách budeme skúmať ďalší moderný a efektívny prístup k styling React komponentov - použitie CSS modulov.

CSS moduly v tomto prístupe sú samostatné skompilované CSS súbory, v ktorých sú mená tried a animácií v lokálnom rozsahu viditeľnosti, čo umožňuje vyhnúť sa konfliktom medzi menami tried z rôznych komponentov.

Na začiatok vytvoríme a spustíme našu jednoduchú React aplikáciu buttons. Na to vytvoríme prázdny priečinok test, prejdeme do neho a v termináli napíšeme nasledujúce príkazy:

npx create-react-app buttons
cd buttons
npm start

Ak máte čerstvú verziu React, to znamená, že podporuje Create React App v2 a vyššie, tak nie je potrebné robiť žiadne dodatočné nastavenia, pretože v tomto prípade budú CSS moduly podporované automaticky. Pre kontrolu pozrite sa do package.json, ak je závislosť react-scripts verzie 2.x.x a vyššie, tak je všetko v poriadku. Inak aktualizujte váš React.

Naša aplikácia pre styling spôsobom CSS modules bude obsahovať tri tlačidlá.

CSS súbory budeme nazývať, podľa dohody, nasledovne: [name].module.css.

Poďme teraz vytvoriť priečinok components v src, a do neho pridajme súbor Buttons.module.css s CSS štýlmi pre naše tlačidlá:

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

Tiež v priečinku components, vytvoríme prázdny súbor React komponentu Buttons.js, pričom zatiaľ nemeňajte vygenerovaný súbor App.js, budeme sa ním zaoberať neskôr!

V Buttons.js povinne importujeme súbor s CSS štýlmi, a tiež aplikujeme tieto štýly na každé tlačidlo pomocou atribútu 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;

Mimochodom, nie je povinné používať slovo styles pre názov importovaného objektu so štýlmi, môžete ho nazvať, ako vám vyhovuje.

V nasledujúcej lekcii dokončíme našu aplikáciu.

Podľa teórie k tejto lekcii vygenerujte React aplikáciu inputs.

Použite prístup CSS modules, uvedený v lekcii. Vytvorte v src aplikácie inputs súbor Inputs.js pre React komponent Inputs, ktorý bude obsahovať tri vstupy. Napíšte pár štýlov v Inputs.modules.css pre vstupy. Importujte tento súbor do Inputs.js a aplikujte štýly.