Начало изучения стилизации с CSS modules в React
В этом и последующих уроках, мы будем рассмотривать еще один современный и эффективный подход к стилизации React компонентов - использование CSS modules.
CSS модули в данном подходе - это отдельные скомпилированные CSS файлы, в которых имена классов и анимаций находятся в локальной области видимости, что позволяет избежать конфликтов между именами классов из разных компонентов.
Для начала создадим и запустим наше
простенькое React приложение buttons. Для
этого создадим пустую папку test, зайдем
в нее и в терминале напишем следующие команды:
npx 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 стилями к нашим кнопкам:
.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:
import 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 для имени импортируемого
объекта со стилями, вы можете назвать его,
как вам удобно.
В следующем уроке мы завершим наше приложение.
Следуя теории к этому уроку сгенерируйте
React приложение inputs.
Используйте подход CSS modules, приведенный
в уроке. Создайте в src приложения
inputs файл Inputs.js для React
компонента Inputs, который будет содержать
три инпута. Напишите пару-тройку стилей в
Inputs.modules.css к инпутам.
Импортируйте этот файл в Inputs.js и
примените стили.