Styled Components — популярная библиотека React, при помощи которой можно реализовать управление CSS. Стилизованные компоненты позволяют описывать стили непосредственно в файлах JavaScript. Расскажем, как правильно использовать их.

В веб-услугах и разработке в YuSMP Group мы активно применяем способ написание кода под названием «CSS в JS». Для понимания информации читателю потребуются основные скиллы работы с JavaScript, React CSS. Для проверки кода можно использовать Storybook React он поддерживает наряду с другими популярными библиотеками.

Зачем нужны Styled Components

Стилизованные компоненты — распространенное решение для React, CSS с ним управлять становится намного проще. Существуют и другие варианты библиотек «CSS в JS», например, Styled jsx, но мы рассмотрим эту, так как она сейчас находится на пике популярности.

Основные преимущества Styled Components:

• синтаксис CSS остается точно таким же;
• неиспользуемые стили будут автоматически удалены;
• нет необходимости прописывать имена классов;
• если вам надоели тернарные операторы python, в Javascript сможете от них отказаться;
• что касается className React позволит размещать их внутри стилизованных компонентов, что обеспечит автоматическую генерацию.

Подготовка к работе

Первым делом необходимо поставить Styled Components на наш текущий проект. Помимо инсталляции самих компонентов, необходимо будет добавить импорт в любой конкретный файл.

Вот эти два шага.

После этого можно начинать работать над использованием Styled Components. Для этого понадобится собственно проект и компонент, который нужно стилизовать. Разберем на примере этого кода.

Как создать стилизованный компонент

Здесь мы видим, что объявление имени компонента производится через const Button. Обратите внимание на styled — их мы импортировали и через это получили нужный функционал Styled Components.

В данном случае «а» — это HTML-код, привычный элемент ссылки. Но, производя объявление компонента, допускается применять все элементы из HTML, которые будут нужны.

В компоненте App мы видим <Button> — привычный компонент из Реакта. Аналогично можно реализовать стилизованный компонент в отдельном файле. Это будет выглядеть так:

Мы можем использовать его для import React в другие компоненты.

Настраиваем компонент

Рассмотрим простую задачу — создать несколько вариантов одной кнопки. В Styled Components props позволяют реализовать это решение максимально элегантно. Пропсы это свойства или произвольные входные данные компонентов, которые возвращают элемент React. К ним мы еще вернемся.

Напишем код с компонентами Button. Одному из них пропишем свойство primary.

Теперь мы можем вложить в него нужные нам динамические стили. Вот так это будет выглядеть на практике:

Мы применяем интерполяцию функции, которая возвращаем нам значение, основанное на свойстве. Если primary=true, то фон становится белым. Если нет, то используется фон palevioletred.

В React color background будет сложно прописать таким образом, если свойств больше двух. Также это неудобно, когда применяется много строк из CSS. В этом случае логичнее настроить импорт стилей иначе. Например:

Таким образом мы можем раздельно прописать стили для нескольких свойств. Попробуем добавить их для danger. В результате получится:

Как работать с React media

Если перед нами встанет задача сделать наши компоненты адаптивными, то решить ее будет несложно. Для этого нужно использовать React media, добавив их в литерал нашего шаблона. Как это будет выглядеть:

Псевдо-селекторы

Рассмотрим их на примере добавления состояния наведения для нашей кнопки. Вот так решается эта задача.

Глобальные стили

Основное преимущество Реакта — дефрагментация. Мысленно необходимо разделить интерфейс на максимально возможное количество отдельных фрагментов. А затем собрать их вместе, масштабируя процесс написания кода.

Представлять таким образом продукт — удобно. Но возникает резонный вопрос, что делать, чтобы части дизайна были согласованы между различными компонентами.

В этом помогают глобальные стили. Именно с их помощью мы можем задать единый цвет для всех кнопок на каждой из странице или поставить одинаковый шрифт.

Для этого в Styled Components применяется оптимальное решение. Глобальные функции задаются здесь с использованием createGlobalStyle.

Но для этого нужно забраться на «верхушку» дерева Реакта. Например, в файл App.js. Именно туда нужно произвести import react файла createGlobalStyle. А затем — поставить стили для глобального компонента.

На практике это будет выглядеть вот так:

Но этого недостаточно для того, чтобы наши стили применились к проекту. Для реализации этой возможности нужно поместить компонент GlobalStyle в верхнюю часть дерева как родственный элемент.

Заключение

Мы разобрали основы работы со Styled Components. Теперь вы знаете, как их правильно установить, создать первый стилизованный компонент и использовать media-запросы, чтобы сделать компоненты полностью адаптивными.

Использование Styled Components, в частности, и любых библиотек CSS-in-JS — современное решение, серьезно упрощающее работу программисту. Выбор именно этой библиотеке обусловлен большим количеством документации и наличием встроенной поддержки в next.js.

С помощью стилизации легко писать сложные компоненты. Например, возьмем задачу, в которой нужно создать кнопку. У нее есть три варианта формы, четыре цвета, три размера и три стиля. Таким образом необходимо будет прописать сразу 108 состояний.

Чтобы это сделать придется написать код буквально на сотни и возможно даже тысячи строк. А при помощи Styled Components можно отказаться от CSS, заменив его на TypeScript. Это позволит создать максимально лаконичный и понятный код.

Немаловажное преимущество — его вес. За счет Styled Components вес стилей будет в несколько раз меньше, чем в CSS. А это окажет положительное влияние на скорость работы любого приложения или платформы.

Также Styled Components позволяет предотвратить проблему конфликта стилей. Их селекторы не будут вступать в противоречие друг с другом, так как в этой библиотеке не используются имена селекторов.

В проектах, которые мы создали, всегда применяют оптимальные способы написания кода. Они позволяют эффективно решать бизнес-задачи, поставленные клиентами студии. Больше интересных статей про программирование и ИТ-сферу можно найти в блоге студии web-разработки YuSMP Group.