Pokračování ve studiu stylování s CSS moduly v Reactu

Pokračujme v práci na naší aplikaci buttons. Nyní se budeme zabývat hlavní komponentou App, která již byla vygenerována ve složce src na začátku. Bude obsahovat dva divy, nadpis a tlačítko.

Přejmenujeme soubor App.css na App.module.css podle konvence, vyčistíme jej a vytvoříme v něm několik tříd s CSS styly pro tagy:

App.module.css.app {
  display: flex;
  flex-direction: column;
  width: 300px;
  border: 1px solid brown;
  padding: 10px;
}

.wrapper {
  display: flex;
  justify-content: space-around;
}

.title {
  text-align: center;
  margin-top: 10px;
}

Nyní vyčistíme obsah souboru App.js. Poté importujeme React komponentu Buttons a styly z App.module.css. Napíšeme naše tagy a aplikujeme na ně styly, a také umístíme React komponentu Buttons:

App.jsimport classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
  return (
    <div class={classes.app}>
      <h2 class={classes.title}>CSS Module Buttons</h2>
      <div class={classes.wrapper}>
        <Buttons />
      </div>
    </div>
  );
}
export default App;

Použili jsme slovo classes pro název objektu obsahujícího styly, který importujeme z App.module.css. Jako v předchozím případě můžete tento objekt pojmenovat, jak vám vyhovuje.

Zbývá pár malých kroků. Změňme název souboru index.css podle konvence na index.module.css a v souboru index.js nezapomeneme změnit řádek importu:

index.jsimport "./index.css";

Na řádek:

index.jsimport "./index.module.css";

Nyní můžeme v prohlížeči vidět výsledek práce naší aplikace.

Pokud otevřete vygenerované HTML v panelu vývojáře v prohlížeči, uvidíte, že každá komponenta má vygenerované své unikátní třídy. Tímto způsobem se již nemusíme obávat konfliktů mezi třídami jednotlivých komponent.

Důležité je také to, že CSS moduly nezakazují importovat i obyčejné externí CSS soubory.