Začínáme se stylováním s CSS moduly v Reactu

V této a následujících lekcích budeme zvažovat další moderní a efektivní přístup ke stylování React komponent - použití CSS modulů.

CSS moduly v tomto přístupu jsou samostatné zkompilované CSS soubory, ve kterých jsou názvy tříd a animací v lokálním rozsahu, což umožňuje vyhnout se konfliktům mezi názvy tříd z různých komponent.

Pro začátek vytvoříme a spustíme naši jednoduchou React aplikaci buttons. Pro to vytvoříme prázdnou složku test, vejdeme do ní a v terminálu napíšeme následující příkazy:

npx create-react-app buttons
cd buttons
npm start

Pokud máte novou verzi Reactu, to znamená, že podporuje Create React App v2 a výše, tak není třeba dělat žádná další nastavení, protože v tomto případě budou CSS moduly podporovány automaticky. Pro kontrolu nahlédněte do package.json, pokud závislost react-scripts verze 2.x.x a výše, tak je vše v pořádku. Jinak aktualizujte váš React.

Naše aplikace pro stylování způsobem CSS modules bude obsahovat tři tlačítka.

CSS soubory budeme pojmenovávat, dodržujíce dohodu, následovně: [name].module.css.

Pojďme nyní vytvořit složku components v src, a do ní přidat soubor Buttons.module.css s CSS styly pro naše tlačítka:

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

Také ve složce components, vytvoříme prázdný soubor React komponentu Buttons.js, přičemž zatím nechte vygenerovaný soubor App.js být, zabývat se jím budeme později!

V Buttons.js nezapomeňte importovat soubor s CSS styly, a také aplikujte tyto styly na každé tlačítko pomocí atributu 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;

Mimochodem, nemusíte používat slovo styles pro název importovaného objektu se styly, můžete jej pojmenovat, jak vám vyhovuje.

V příští lekci dokončíme naši aplikaci.

Podle teorie k této lekci vygenerujte React aplikaci inputs.

Použijte přístup CSS modules, uvedený v lekci. Vytvořte v src aplikace inputs soubor Inputs.js pro React komponent Inputs, který bude obsahovat tři inputy. Napište pár stylů v Inputs.modules.css pro inputy. Importujte tento soubor v Inputs.js a aplikujte styly.