10 способов стилизовать приложение на React

10 способов стилизовать приложение на React

От автора: React — это библиотека для рендеринга пользовательского интерфейса, она не заботится о стилях. React – это хорошая вещь, но она также оставляет нас одних в большом океане с множеством возможностей.

Обычно выбрать систему стилей для приложения React не так сложно, как кажется. Также необязательно использовать все 10 способов, перечисленных в статье. Хорошо знать все доступные варианты, чтобы вы могли выбрать лучший в зависимости от ситуации.

Встроенный стиль

Таблицы стилей

Модуль CSS

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

CSS препроцессор

Стилизованные компоненты

React JSS

Radium

JSX Style

React Shadow

Утилитарные фреймворки

1. Встроенный стиль

Встроенный CSS такой же, как и обычный стиль тегов.

2. Таблицы стилей

Таблицы стилей очень распространены в экосистеме React, и это круто. Единственная проблема в том, что изолировать стили от другого компонента довольно сложно. Мы создаем обычные таблицы стилей и импортируем их в ваши компоненты.

3. Модули CSS

Модуль CSS решает проблему изоляции стиля, создавая уникальное имя класса для каждого класса.

10 способов стилизовать приложение на React

Create-React-App имеет встроенную поддержку модулей CSS. Модуль CSS позволяет нам использовать одно и то же имя класса с файлами, не беспокоясь о конфликте имен CSS. Например, у нас есть один и тот же класс container в двух разных файлах.

Если у нас такое же имя класса в другом файле.

4. Препроцессор CSS

Мы можем использовать SASS, SCSS, LESS, STYLUS и т.д., используя WebPack загрузчик. Но, к сожалению, ни один из них не поддерживается по умолчанию в CRA. Мы можем использовать SCSS или SASS установив node-sass.

Для получения дополнительной информации, пожалуйста, ознакомьтесь с официальной документацией.

5. Стилизованные компоненты

Вместо того, чтобы писать CSS как JS, стилизованный компонент позволяет нам писать фактический CSS.

10 способов стилизовать приложение на React

Установите стилизованный компонент через npm:

Давайте создадим тот же стиль, используя styled-componets.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Styled-Component использует тегированные шаблонные литералы для создания стилей.

6. React JSS

С JSS можна создавать CSS с помощью Javascript декларативным, бесконфликтным и многоразовым способом.

10 способов стилизовать приложение на React

Установите response-jss, используя npm.

Затем создайте стиль, используя createUseStyles.

7. Radium

Radium — это набор инструментов для создания встроенных стилей с использованием javascript.

10 способов стилизовать приложение на React

По умолчанию react не поддерживает встроенный стиль с псевдоселекторами, такими как :hover, :focus и т. д. Установите radium, используя npm.

8. React Shadow

React Shadow позволяет нам создавать Shadow DOM в React со всеми преимуществами инкапсуляции стилей.

10 способов стилизовать приложение на React

Установите Reach Shadow с помощью npm.

9. JSX Style

jsxstyle — это встроенная система стилей для React и Preact. Она обеспечивает лучший в опыт разработки без ущерба для производительности.

10 способов стилизовать приложение на React

Установите jsxstyle, используя npm.

10. Утилитарные фреймворки

Утилитарные фреймворки созданы, чтобы избежать создания таблицы стилей. Самый известный утилитарный фреймворк — tailwindcss.

10 способов стилизовать приложение на React

CRA изначально не поддерживает tailwindcss, нам нужно использовать некоторое переопределение CRA, например CRACO. Для получения дополнительной информации, пожалуйста, ознакомьтесь с официальной документацией.

Надеюсь, вам понравится эта статья.

Автор: Naveen DA

Источник: javascript.plainenglish.io

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

React JS с Нуля до Профи

React JS. Полное руководство для современной веб-разработки

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.