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

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

От автора: это краткое руководство по изучению стилизованных компонентов, методологии CSS на основе компонентов, используемой в React. Если вы хотите применять стилизованные компоненты в своих проектах, это руководство поможет вам начать работу.

Обзор стилизованных компонентов

Styled Components — это библиотека для React и React Native для написания и управления CSS. Это решение «CSS-in-JS», то есть вы пишете CSS в файлах Javascript (в частности, в компонентах, которые являются файлами Javascript). Это чрезвычайно популярное решение для управления CSS в React: около 8 миллионов загрузок с npm в месяц и 30 тысяч звезд на Github.

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

Это простой CSS. Да, вы пишете CSS в файле JS, но синтаксис CSS не изменился.

Вендорные префиксы автоматически добавляются при использовании стилизованных компонентов, повышая производительность в браузерах.

React JS. Основы

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

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

Весь неиспользуемый CSS и стили автоматически удаляются

Вы вообще не пишете никаких имен классов. Имена классов генерируются автоматически, поэтому нет необходимости управлять методологией именования классов CSS, такой как БЭМ. (Это станет понятнее, когда вы прочтете статью)

Установка стилизованных компонентов

Чтобы начать работу со стилизованными компонентами, вам сначала нужно установить их в свой проект:

И в каждый файл, в котором вы используете стилизованные компоненты, вам нужно добавить этот импорт:

И это все! Вы готовы начать работу со стилизованными компонентами.

Создание первого стилизованного компонента

Откройте существующий проект React, над которым вы работаете (или быстро создайте новый проект с помощью create-react-app), и откройте один из существующих компонентов. Здесь вы можете добавить свой первый стилизованный компонент. Теперь, когда вы импортировали styled, вот как можно начать:

Давайте разберем этот код:

Как и при написании функционального компонента React, объявите имя компонента с помощью const Button

styled это то, что мы импортировали выше, и это предоставляет нам функционал стилизованных компонентов

Заметили a после styled? Это представляет собой HTML — элемент ссылки: <a>. При объявлении стилизованного компонента вы можете использовать здесь любой HTML-элемент (например div, h1, section и т. д.)

Есть смысл?

<Button> возвращаемый внутри компонента App, выглядит как обычный компонент React. Потому что это и есть компонент React!

В нашем предыдущем примере мы создали стилизованный компонент внутри существующего компонента. Но вы также можете создать стилизованный компонент в собственном файле. Например, создайте новый файл компонента с именем Button.js и добавьте стилизованный компонент:

Button теперь работает как любой другой компонент React. Например, теперь мы можем импортировать этот компонент в файлы других компонентов:

Вот и все! Поздравляю, вы только что создали свой первый стилизованный компонент!

Использование свойства для настройки стилизованных компонентов

Представьте, что у вас есть компонент <Button />, и вам нужно стилизовать разные варианты этой кнопки (первичная, вторичная, предупреждение и т. д.).

У стилизованных компонентов есть элегантное решение для этого — вы используете свойства, чтобы сделать стили компонентов динамическими.

Давайте рассмотрим пример, чтобы понять, что я имею в виду. Здесь мы отображаем два компонента Button, один со свойством primary:

А теперь внутри компонента <Button /> мы можем добавить динамические стили:

Здесь происходит интерполяция функции, возвращающей значение CSS (с использованием тернарного оператора) на основе свойств. Это было довольно тяжело.

React JS. Основы

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

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

Проще говоря, по сути background: ${props => props.primary ? ‘white’ : ‘palevioletred’ } означает: если свойство primary истинно, то должен быть фон white, иначе должен быть фон palevioletred.

Подобная обработка свойства работает в некоторых случаях использования, но может стать проблемой, если у вас есть несколько свойств (например, primary, secondary, danger и т. д.), а также несколько строк CSS.

Часто имеет смысл импортировать { css } из styled-components так:

Это позволяет разделить динамические стили для разных свойств. Например, добавление стилей для свойства danger будет выглядеть так:

Отлично! Мы неплохо продвигаемся. Как насчет того, чтобы сделать <Button /> немного более адаптивным, а?

Использование медиа-запросов, чтобы сделать стилизованные компоненты адаптивными

К счастью, сделать стилизованные компоненты адаптивными очень просто. Добавьте медиа-запросы в литерал шаблона, например:

Обработка состояний наведения и других псевдо-селекторов с помощью стилизованных компонентов

Как и при добавлении медиа-запросов к стилизованным компонентам, добавить псевдо-селекторы довольно просто. Например, добавление состояния наведения к компоненту <Button /> будет выглядеть так:

Создание глобальных стилей

Одна из основных ментальных моделей React — это то, что вы относитесь ко всему как к компонентам. По сути, вы разбиваете интерфейс на крошечные фрагменты и собираете все вместе масштабируемым образом. Этот подход имеет множество преимуществ, но, тем не менее, обнаруживается проблема: как стилизовать части дизайна согласованно между несколькими компонентами? Или по-другому: как установить глобальные стили?

Например, вы можете захотеть:

Установить семейство шрифтов для всей типографики

Установить цвет фона на каждой странице

Отменить некоторые стили браузера по умолчанию

В Styled Components есть решение для глобальных стилей с использованием функции createGlobalStyle. Сначала перейдите к компоненту, который находится наверху дерева React.

Например, если вы работаете в проекте приложения create-react-app, это будет файл App.js. Здесь вам нужно будет импортировать createGlobalStyle в свой проект и установить некоторые стили для компонента GlobalStyle (вы можете назвать этот компонент как хотите):

При этом стили пока не будут применяться к проекту. Теперь мы должны использовать компонент GlobalStyle, чтобы применить глобальные стили для приложения. Вы делаете это, помещая компонент GlobalStyle в верхнюю часть дерева React:

Заметили использование короткого синтаксиса фрагментов? Это необходимо, поскольку вы размещаете компонент <GlobalStyle /> как родственный элемент наверху дерева. И это все! Глобальный стиль теперь полностью настроен с помощью стилизованных компонентов.

Заключение

Хорошая работа, если вы добрались до конца. Мы многое рассмотрели! В частности:

Что такое стилизованные компоненты и почему вам следует подумать об их использовании

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

Создание первого стилизованного компонента

Динамичные стилизованные компоненты с помощью свойства

Использование медиа-запросов, чтобы сделать стилизованные компоненты адаптивными

Как обрабатывать псевдо-селекторы с помощью стилизованных компонентов

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

Это основы, которые помогут вам начать работу со стилизованными компонентами. Как и в изучении чего-то нового, практика является ключом к успеху. Попробуйте использовать стилизованные компоненты в своем следующем проекте и посмотрите, к чему это приведет!

Автор: Tom Ray

Источник: https://scalablecss.com

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

React JS. Основы

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

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

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

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

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

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

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