Мы все знакомы со стандартным способом привязки таблицы стилей к заголовку HTML-документа, верно? Это лишь один из нескольких способов написания CSS. Но как выглядит стилизация вещей в одностраничном приложении (SPA), скажем, в проекте React?
Оказывается, есть несколько способов стилизации приложения React. Некоторые пересекаются с традиционным стилем, другие не так сильно. Но давайте посчитаем все способы, которыми мы можем это сделать.
Импорт внешних таблиц стилей
Как следует из названия, React может импортировать файлы CSS. Процесс аналогичен тому, как мы связываем файл CSS в заголовке HTML:
- Создайте новый файл CSS в каталоге вашего проекта.
- Напишите CSS.
- Импортируйте его в файл React.
Таким образом:
Обычно подключение идет вверху файла, где происходят другие импорты:
В этом примере файл CSS импортируется в App.js из папки /Components/css.
Напишите встроенные стили
Возможно, вы привыкли слышать, что встроенные стили не так уж хороши для удобства сопровождения и тому подобного, но определенно есть ситуации (вот одна из них!), где это имеет смысл. И ремонтопригодность в React не так важна, поскольку CSS часто уже находится внутри одного и того же файла.
Это очень простой пример встроенного стиля в React:
Однако лучшим подходом является использование объектов:
- Сначала создайте объект, содержащий стили для разных элементов.
- Затем добавьте его к элементу, используя атрибут стиля, а затем выберите свойство для стиля.
Давайте посмотрим на это в контексте:
Этот пример содержит объект styles, содержащий еще два объекта, один для класса .main, а другой для ввода текста, которые содержат правила стиля, подобные тому, что мы ожидаем увидеть во внешней таблице стилей. Затем эти объекты применяются к атрибуту стиля элементов, находящихся в возвращаемой разметке.
Обратите внимание, что при ссылке на стили используются фигурные скобки, а не кавычки, которые мы обычно используем в простом HTML.
Используйте CSS-модули
CSS-модули… что, черт возьми, с ними случилось, верно? У них есть преимущество локальных переменных, и их можно использовать вместе с React. Но какие они, опять же, именно?
Цитирование документации:
"CSS Modules работает путем компиляции отдельных файлов CSS как в CSS, так и в data. Вывод CSS — это обычный глобальный CSS, который можно внедрить непосредственно в браузер или объединить вместе и записать в файл для использования в продакшене. Эти данные используются для сопоставления удобочитаемых имен, которые вы использовали в файлах, с глобально безопасным выходным CSS."
Проще говоря, модули CSS позволяют нам использовать одно и то же имя класса в нескольких файлах без конфликтов, поскольку каждому имени класса присваивается уникальное программное имя. Это особенно полезно в более крупных приложениях. Каждое имя класса привязывается локально к конкретному компоненту, в который оно импортируется.
Таблица стилей модуля CSS похожа на обычную таблицу стилей, только с другим расширением (например, styles.module.css). Вот как они устроены:
- Создайте файл с расширением .module.css.
- Импортируйте этот модуль в приложение React (как мы видели ранее).
- Добавьте имя класса к элементу или компоненту и ссылайтесь на конкретный стиль из импортированных стилей.
Очень простой пример:
Используйте styled-components
Использовали ли вы стилизованные компоненты? Они довольно популярны и позволяют создавать пользовательские компоненты, используя фактический CSS в вашем JavaScript. Стилизованный компонент — это, по сути, компонент React с готовыми к нему стилями. Некоторые из функций включают уникальные имена классов, динамический стиль и лучшее управление CSS, поскольку каждый компонент имеет свои собственные отдельные стили.
Установите пакет npm styled-components в командной строке:
Затем импортируйте его в приложение React:
Создайте компонент и присвоите ему стилизованное свойство. Обратите внимание на использование шаблонных литералов, обозначаемых обратными метками в объекте Wrapper:
Приведенный выше компонент Wrapper будет отображаться как div, содержащий эти стили.
Условные стили
Одним из преимуществ styled-components является то, что сами компоненты функциональны, так как вы можете использовать props в CSS. Это открывает возможности для условных выражений и изменения стилей в зависимости от state или props.
Здесь мы манипулируем свойством display div в состоянии отображения. Это состояние управляется кнопкой, которая переключает состояние div при нажатии. Это, в свою очередь, позволяет переключаться между стилями двух разных состояний.
В встроенных операторах if мы используем ? вместо обычного синтаксиса if/else. Часть else находится после точки с запятой. И не забывайте всегда вызывать или использовать состояние после его инициализации. Например, в этой последней демонстрации состояние должно быть выше стилей компонента Wrapper.
Приятной React стилизации!
Это все, ребята! Мы рассмотрели несколько различных способов написания стилей в приложении React. И это не значит, что один из них чем-то лучше остальных; конечно, подход, который вы используете, зависит от ситуации. Надеюсь, теперь вы хорошо разбираетесь в них и знаете, что в вашем арсенале стилей React есть множество инструментов.
Перевод статьи "Different Ways to Write CSS in React".
