Источник: WebForMyself.com
React — это библиотека для рендеринга пользовательского интерфейса, она не заботится о стилях. React – это хорошая вещь, но она также оставляет нас одних в большом океане с множеством возможностей.
Обычно выбрать систему стилей для приложения React не так сложно, как кажется. Также необязательно использовать все 10 способов, перечисленных в статье. Хорошо знать все доступные варианты, чтобы вы могли выбрать лучший в зависимости от ситуации.
- Встроенный стиль
- Таблицы стилей
- Модуль CSS
- CSS препроцессор
- Стилизованные компоненты
- React JSS
- Radium
- JSX Style
- React Shadow
- Утилитарные фреймворки
1. Встроенный стиль
Встроенный CSS такой же, как и обычный стиль тегов.
2. Таблицы стилей
Таблицы стилей очень распространены в экосистеме React, и это круто. Единственная проблема в том, что изолировать стили от другого компонента довольно сложно. Мы создаем обычные таблицы стилей и импортируем их в ваши компоненты.
3. Модули CSS
Модуль CSS решает проблему изоляции стиля, создавая уникальное имя класса для каждого класса.
Create-React-App имеет встроенную поддержку модулей CSS. Модуль CSS позволяет нам использовать одно и то же имя класса с файлами, не беспокоясь о конфликте имен CSS. Например, у нас есть один и тот же класс container в двух разных файлах.
Если у нас такое же имя класса в другом файле.
4. Препроцессор CSS
Мы можем использовать SASS, SCSS, LESS, STYLUS и т.д., используя WebPack загрузчик. Но, к сожалению, ни один из них не поддерживается по умолчанию в CRA. Мы можем использовать SCSS или SASS установив node-sass.
npm i node-sass
Для получения дополнительной информации, пожалуйста, ознакомьтесь с официальной документацией.
5. Стилизованные компоненты
Вместо того, чтобы писать CSS как JS, стилизованный компонент позволяет нам писать фактический CSS.
Установите стилизованный компонент через npm:
npm i styled-components
Давайте создадим тот же стиль, используя styled-componets.
Styled-Component использует тегированные шаблонные литералы для создания стилей.
6. React JSS
С JSS можна создавать CSS с помощью Javascript декларативным, бесконфликтным и многоразовым способом.
Установите response-jss, используя npm.
npm i react-jss
Затем создайте стиль, используя createUseStyles.
7. Radium
Radium — это набор инструментов для создания встроенных стилей с использованием javascript.
По умолчанию react не поддерживает встроенный стиль с псевдоселекторами, такими как :hover, :focus и т. д. Установите radium, используя npm.
npm i radium
8. React Shadow
React Shadow позволяет нам создавать Shadow DOM в React со всеми преимуществами инкапсуляции стилей.
Установите React Shadow с помощью npm.
npm i react-shadow
9. JSX Style
jsxstyle — это встроенная система стилей для React и Preact. Она обеспечивает лучший в опыт разработки без ущерба для производительности.
Установите jsxstyle, используя npm.
10. Утилитарные фреймворки
Утилитарные фреймворки созданы, чтобы избежать создания таблицы стилей. Самый известный утилитарный фреймворк — tailwindcss.
CRA изначально не поддерживает tailwindcss, нам нужно использовать некоторое переопределение CRA, например CRACO. Для получения дополнительной информации, пожалуйста, ознакомьтесь с официальной документацией.
Надеюсь, вам понравится эта статья.
Источник: javascript.plainenglish.io
