Начало изучения стилизации с CSS modules в React

В этом и последующих уроках, мы будем рассмотривать еще один современный и эффективный подход к стилизации React компонентов - использование CSS modules.

CSS модули в данном подходе - это отдельные скомпилированные CSS файлы, в которых имена классов и анимаций находятся в локальной области видимости, что позволяет избежать конфликтов между именами классов из разных компонентов.

Для начала создадим и запустим наше простенькое React приложение buttons. Для этого создадим пустую папку test, зайдем в нее и в терминале напишем следующие команды:

terminalnpx create-react-app buttons
cd buttons
npm start

Если у вас свежая версия React, то есть она поддерживает Create React App v2 и выше, то никаких дополнительных настроек делать не надо, поскольку в этом случае CSS модули будут поддерживаться автоматически. Для проверки загляните в package.json, если зависимость react-scripts версии 2.x.x и выше, то все в порядке. Иначе обновите ваш React.

Наше приложение для стилизации способом CSS modules будет содержать три кнопочки.

CSS файлы мы будем называть, придерживаясь соглашения, следующим образом: [name].module.css.

Давайте сейчас создадим папку components в src, а в нее добавим файл Buttons.module.css с CSS стилями к нашим кнопкам:

Buttons.module.css.btn1 {
  background-color: orange;
  border: 2px solid brown;
  color: white;
}

.btn2 {
  background-color: red;
  border: 2px solid green;
  color: yellow;
}

.btn3 {
  background-color: brown;
  border: 2px solid yellowgreen;
  color: orange;
}

Также в папке components, создадим пустой файл React компонента Buttons.js, при этом пока не трогайте сгенерированный файл App.js, мы займемся им позже!

В Buttons.js обязательно импортируем файл с CSS стилями, а также применим эти стили к каждой кнопке с помощью атрибута class:

Buttons.jsimport styles from "./Buttons.module.css"; 

const Buttons = () => (
  <>
    <button class={styles.btn1}>btn1</button>
    <button class={styles.btn2}>btn2</button>
    <button class={styles.btn3}>btn3</button>
  </>
);

export default Buttons;

Кстати, необязательно использовать слово styles для имени импортируемого объекта со стилями, вы можете назвать его, как вам удобно.

В следующем уроке мы завершим наше приложение.