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:

terminalnpx 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:

Buttons.module.css.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:

Buttons.jsimport 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.