Продолжување на изучувањето на стилизирањето со CSS modules React

Продолжуваме со работа на нашата апликација buttons. Сега ќе се занимаваме со главната компонента App, која веќе беше генерирана во папката src однапред. Во неа ќе имаме два div-а, наслов и копче.

Ќе го смениме името на датотеката App.css во App.module.css според конвенцијата, ќе ја исчистиме и ќе создадеме во неа неколку класи со CSS стилови за таговите:

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

А сега ќе го исчистиме содржината на датотеката App.js. Потоа ќе го импортираме React компонентот Buttons и стиловите од App.module.css. Ќе ги напишеме нашите тагови и ќе им ги примениме стиловите, а исто така ќе го поставиме 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;

Го употребивме зборот classes за името на објектот кој ги содржи стиловите, кој го импортираме од App.module.css. Како и во претходниот случај, можете да го наречете овој објект како што ви е погодно.

Остануваат уште неколку мали чекори. Ќе го смениме името на датотеката index.css според конвенцијата на index.module.css и во датотеката index.js не забораваме да ја смениме линијата за импорт:

index.jsimport "./index.css";

Со линијата:

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

Сега можеме да го видиме во прелистувачот резултатот од работата на нашата апликација.

Ако ја отворите генерираната верстка во панелот за развивачи во прелистувачот, ќе видите дека на секоја компонента и се генерирани свои уникатни класи. На тој начин, не треба повеќе да се загрижуваме за конфликти помеѓу класите на одделните компоненти.

Важно е и тоа што CSS modules не забранува импортирање на обични надворешни CSS датотеки.