Бозомӯзии услуббахшӣ бо CSS modules дар React

Кори барномаи худ buttons-ро идома диҳем. Ҳоло ба компоненти асосӣ App пардохт мекунем, ки аллакай дар феҳристи src дар аввал сохта шуда буд. Дар он ду див, сарлавҳа ва як тугма хоҳем дошт.

Номи файли 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 низ нестанд.