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.
No comments.