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:

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

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

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:

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;

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.