React менен CSS модулдары аркылуу стилдөөнү улантуу

Келгиле, биздин <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;

Биз <App.module.css> файлынан импорттоп жаткан стилдерди камтыган объекттин аты үчүн <classes> сөзүн колдондук. Мурунку учурдай эле, сиз бул объектти өзүңүзгө ыңгайлуу кандай атса да атасаңыз болот.

Бир-эки кичине кадам калды. <index.css> файлынын атын келишим боюнча <index.module.css> деп өзгөртөбүз жана <index.js> файлында импорт сабын алмаштырууну унутпайлы:

index.jsimport "./index.css";

Мына бул сапка:

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

Азыр биз браузерде колдонмобуздун жыйынтыгын көрө алабыз.

Эгер сиз браузердин өнүктүрүү панелинде түзүлгөн верстканы ачсаңыз, ар бир компонентке өзүнчө уникалдуу класстар түзүлгөнүн көрөсүз. Ошентип, бизге компоненттердин жеке класстарынын ортосундагы карама-каршылыктар жөнүндө көбүрөөк ойлонуунун кажети жок.

Дагы бир маанилүү нерсе - CSS модулдары кадимки тышкы CSS файлдарын импорттоого тыюу салбайт.