Продолжение изучения стилизации с 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 файлы.