Kontynuacja nauki stylizacji z modułami CSS w React

Kontynuujmy pracę nad naszą aplikacją buttons. Teraj zajmiemy się głównym komponentem App, który już był wygenerowany w folderze src początkowo. W nim będziemy mieli dwa divy, nagłówek i przycisk.

Zamieńmy nazwę pliku App.css na App.module.css zgodnie z konwencją, wyczyśćmy go i utwórzmy w nim kilka klas ze stylami CSS dla tagów:

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

A teraz wyczyśćmy zawartość pliku App.js. Następnie zaimportujmy komponent React Buttons i style z App.module.css. Napiszmy nasze tagi i zastosujmy do nich style, a także umieśćmy komponent React 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;

Użyliśmy słowa classes dla nazwy obiektu zawierającego style, który importujemy z App.module.css. Jak i w poprzednim przypadku, możesz nazwać ten obiekt jak ci wygodnie.

Pozostało kilka małych kroków. Zmieńmy nazwę pliku index.css zgodnie z konwencją na index.module.css i w pliku index.js nie zapomnijmy zamienić linii importu:

index.jsimport "./index.css";

Na linię:

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

Teraz możemy zobaczyć w przeglądarce wynik działania naszej aplikacji.

Jeśli otworzysz wygenerowany kod HTML w panelu deweloperskim w przeglądarce, zobaczysz, że każdy komponent ma wygenerowane swoje unikalne klasy. W ten sposób nie musimy się już martwić o konflikty między klasami poszczególnych komponentów.

Ważne jest również to, że moduły CSS nie zabraniają importować zwykłych zewnętrznych plików CSS.