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

1662843639 kratkoe rukovodstvo po stilizovannym komponentam s interaktivnymi primerami

Мацея Новаковского

1*Iqjo47QeVFf2kb9-SAxh8Q

«Это интересно…», — подумал я, когда впервые прочитал о styled-components. А потом я вернулся к своим испытанным компонентам React.

Но потом Макс Штойбер, соавтор styled-components, показал нам свою новую библиотеку на курсе кодирования React in Flip Flops. «Это интересно» превратилось в «Это невероятно!»

Я едва сдерживал волнение. Наконец-то я понял концепцию styled-components. Это открыло так много новых возможностей для стилизации компонентов. Это упростило способ структурирования веб-приложений. И это обеспечило согласованность стиля приложений React.

РЕКЛАМА

Все началось с тегированных шаблонных литералов

Вы можете подумать, что я чуть-чуть старый школьник, но я считаю, что если вы хотите по-настоящему понять любую идею, вам нужно разобраться в основных концепциях. Мы могли бы проникнуть непосредственно в стилизованные компоненты. Но сначала давайте узнаем, что вызвало интерес Макса и Глена к тому, как они начали проект и фактически создали стилизованные компоненты.

Шаблонные литералы ES6 упрощают способ сочетания переменных и текста. Если взять две переменные: name и moodс присвоенными значениями «Alice» и «happy» соответственно, литерал шаблона:

const sentence = `${name} is ${mood}.`;

создаст предложение: «Алиса счастлива».

Литералы шаблона с тэгами расширяют синтаксис.

Теги являются функциями JavaScript. Но есть два существенных отличия по сравнению с обычными функциями:

  • функции тегов вызываются с использованием обратных меток вместо круглых скобок. В примере ниже мы вызываем greetingTag функция, заворачивая аргументы в обратные галочки:
greetingTag`${name} is ${mood}.`;
  • JavaScript рассматривает литерал шаблона – все между обратными галочками – как аргументы функции. На первом шаге JavaScript преобразует литерал шаблона в массив строк. За строчками идут вытянутые переменные. Если мы возьмем приведенный выше пример, преобразованные аргументы передаются в greetingTagфункция будет выглядеть следующим образом:
["", " is ", "."], name, mood

Первый аргумент, массив, содержит все строки, которые мы разместили до, между и после name и mood переменные. В нашем примере первая строка пуста, поскольку перед ним ничего нет name. Следующие два аргумента, name и moodбыли извлечены из литерала шаблона как переменные.

Теперь, greetingTag функция может применять любую логику к массиву текстов и name и mood переменные и возвращает желаемый результат.

Давайте создадим функцию тегов, the greetingTagчто требует трех аргументов: a texts массив, a name, и а mood переменные. И вот какую логику он будет использовать: если значение mood «счастлив», он вернет обычное предложение приветствия. Во всех остальных случаях он вернет бодрящую версию приветствия:

const greetingTag = (texts, name, mood) => {   if (mood === 'happy') {     return `Hi ${name}!`;   } else {     return `Hi ${name}, you are awesome!`;   } } const greeting = greetingTag`${name} is ${mood}.`;

Теперь, если мы назначили «Алису» в name и «счастливый» для mood, greetingTag функция вернет: «Привет, Алиса!». Если мы изменили значение mood на любое другое слово, кроме «счастливого», скажите «взволнованный» или «кошка». greetingTag ответит: «Привет, Алиса, ты прекрасна!».

Но как вы можете использовать эти знания для стилизации компонентов React?

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

Именно этот вопрос озадачил Макса и Глена, когда они искали лучший и последовательный способ стилизации компонентов React. Ага! настал момент, когда они поняли, что литералы шаблона с тэгами принимают не только переменные, но и функции. Как в примере ниже:

const greeting = greetingTag`${ name => `Hi ${name}!` }`;

Вот, greetingTag получает литерал шаблон с функцией. После выполнения функции greetingTag, greetingTag может применить дальнейшую логику к возвращенному значению и вернуть результат.

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

Позвольте мне показать вам, как это работает.

Дополнительное примечание: Нижеследующие примеры кода являются интерактивными. Вы можете играть с ними, добавлять стили и изменять назначенные значения. Вы можете проверять разные файлы, нажимая на их вкладки. Или нажмите оранжевую, сине-оранжевую или синюю кнопку вверху, чтобы переключаться между разными видами.

Если вы хотите использовать стилизованные компоненты в вашем приложении, вам нужно установить styled-components сначала:

npm install --save styled-components

Ниже я создал стилизованный компонент Title:

The styled.h1 является функцией тега. Он возвращает компонент React, идентичный следующему:

import React from 'react'; const Title = ({children}) => <h1>{children}</h1>

Прелесть этого решения заключается в том, что styled-components выполняют тяжелую работу за вас – ваш компонент Title будет иметь color с royalblue.

Я знаю, что вы думаете: если бы нам пришлось писать стили каждого отдельного компонента таким образом, это мало отличалось бы от написания классов CSS. К счастью, стилизованные компоненты гораздо умнее!

Представьте, что вы хотели бы, чтобы ваши заголовки были черными большую часть времени и только спорадически выделяли их другим цветом. С помощью стилизованных компонентов мы можем создавать цвета. Title это будет black по умолчанию и изменить на royalblue каждый раз, когда мы проходим его a primary опора:

Вы можете передать реквизит Title как и любой другой компонент React. Вот, второй Title получает primary опора Мы можем получить доступ к атрибутам в стилизованном объявлении компонента. Это открывает целый новый мир возможностей.

Выше я определил стилевой компонент Title. Потому что props доступны в объявлении стилизованного компонента, мы можем решить, какого цвета будет наш компонент. Функция использует тернарный оператор и возвращает royalblue когда primary собственность есть true и black иначе.

Вам не нужно писать это явно, как в:

<Title primary={true}>Hi Bob, you are awesome!&lt;/Title>

Проходя primary prop без присвоения похоже на передачу
primary={true}.

Поскольку дверь сейчас широко открыта, давайте сделаем свой Title более универсален. Иногда вам может понадобиться ваш Title использовать меньшие шрифты, а иногда и побольше. Иногда может потребоваться, чтобы он имел нормальную плотность, а иногда вы можете выделяться и предоставлять ему жирный шрифт. Иногда вам может понадобиться написать слово с прописной или прописной буквы Title.

Стилизованные компоненты позволяют создать единый универсальный компонент. Тогда вы сможете использовать его повсюду, больше не думая о стилях:

В приведенном выше примере font-size присваиваются явные значения: 48px или 32px. Такой код трудно поддерживать, когда кодовая база увеличивается.

РЕКЛАМА

Темы

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

Стилизованные компоненты дают вам инструмент для выполнения именно этого темы.

А theme это объект JavaScript, где можно определить параметры стиля:

const theme = {   colors: {     primary: "royalblue",     secondary: "teal",     text: "black"   },   fontSize: {     xl: "2.4rem",     lg: "1.8rem",     md: "1.3rem",     nm: "1rem",     sm: "0.75rem"   } }

The theme выше определяет colors и fontSize свойства. Вы будете иметь доступ к ним во всех стилизованных компонентах программы.

Но сначала вам нужно сообщить программу о theme. Вы должны передать его как сопротивление к ThemeProvider — компонент-обертка, предоставленный стилизованными компонентами:

import { ThemeProvider } from "styled-components"; import theme from "./theme.js";
const App = () => (   <ThemeProvider theme={theme}>     <div>       <Title>Hi, Alice!</Title>     &lt;/div>   </ThemeProvider> )

Рассмотрим предыдущий пример, чтобы узнать, как использовать a theme и как получить доступ к его свойствам в стилизованных компонентах.

В Titleвы можете получить доступ к theme объект через props.theme. Например, чтобы выбрать Titleцвет, вы сначала проверяете, был ли данный атрибут передан в Title (primary или secondary). Затем верните подходящее color значение, заявленное в theme. Если ни одного не было передано, вы возвращаете стандарт text цвет.

The Title теперь также может разрешать размер шрифта. Сначала он проверяет, есть ли xl, lg, md или sm prop был передан и – на основе этого – присваивает соответствующее значение font-size собственность. Если проп не был передан, он назначит значение fontSize.nm определены в theme.

Мы только что создали гибкий Title компонент. Теперь вы можете использовать его, не беспокоясь о CSS. Определиться с его видом можно исключительно путём прохождения определенного набора props.

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

Создание только одного Title компонента недостаточно. К примеру, на странице блога вам понадобится h1 тег для заголовка публикации и ан h2 тег для субтитров. Вам также нужны абзацы для отображения текста.

Стилизованные компоненты легко расширяются. Вы можете создать новый Subtitleкомпонент из ан h2 тег, копирование и вставка всех правил стиля с Title. Или вы можете продолжить Title компонент из withComponentвспомогательный способ. The Subtitle будет иметь все свойства a Title но будет использовать an h2 тег:

const Subtitle = Title.withComponent("h2");

Вы можете продолжить Title создать Text компонент с a p тег и одновременно исправить его color как theme.text и установите line-height к 1.65? Здесь также сияют стилизованные компоненты:

const Paragraph = Title.withComponent("p");const Text = Paragraph.extend`   color: ${props => props.theme.colors.text};   line-height: 1.65;

Во-первых, мы создали посредника Paragraph компонент, который будет иметь все правила стиля Title. Однако мы будем использовать p тег, а затем тег Textкомпонент, который расширяет Paragraph и устанавливает его color и line-heightсвойства. Ниже вы можете проверить код для Title, Subtitleи Text компоненты:

Стилизованные компоненты позволяют писать обычный CSS в JavaScript. Кроме того, вы можете вкладывать стили CSS и псевдоклассы. Вы можете добавлять медиазапросы и атрибуты. Наконец используя injectGlobal вспомогательный метод, можно вводить глобальные правила стиля и импортировать шрифты.

РЕКЛАМА

Псевдоклассы

Чтобы научиться использовать псевдоклассы, давайте создадим a Button компонент, который будет изменять цвет, когда мы наведем курсор мыши.

Выше я вложил &:hover псевдокласс для смены color всякий раз, когда вы наводите курсор мыши на кнопку. Таким же образом можно использовать любой псевдокласс, доступный в CSS.

Добавление глобальных стилей с помощью styled-components

Вместо импорта файла глобальных стилей можно использовать injectGlobal помощник для добавления глобальных стилей в вашу программу. Во-первых, вам нужно импортировать injectGlobal помощник:

import styled, { ThemeProvider, injectGlobal } from "styled-components";

В следующем примере я использую injectGlobal к:

  • импортируйте шрифты и установите font-family для всех элементов в «Монсеррат».
  • сбросить поля, отступы и границы.
  • изменить корневой элемент font-size использование медиа-запроса для размера экрана меньше screen.medium и screen.mobile. Оба определены в theme.

Стилизованные темы компонент обеспечивают последовательность. Чтобы узнать больше, просмотрите один из лучших документов, которые я когда-либо видел: Styled Components Docs.

Благодаря любопытству Макса и Глена, стилизованные компоненты предлагают вам удивительный набор инструментов для стилизации программ React. Экосистема стилизованных компонентов процветает. Посетите страницу Ecosystem, чтобы ознакомиться с готовыми к использованию компонентами и сетевыми системами. Просмотрите многие другие инструменты, созданные с помощью стилизованных компонентов.

РЕКЛАМА

Вывод

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

Стилизованные компоненты – это новый способ стилизации программ React. С коробки стилизованные компоненты:

  • позволяют создавать многоразовые и универсальные компоненты
  • обеспечить последовательность укладки
  • позволяют вкладывать стили
  • добавьте префиксы поставщиков, если это необходимо
  • просто великолепны!

Если вам понравилась эта статья, ? даже 50 раз — Я был бы очень благодарен, и для меня это очень важно.

1*u5zyRKX71tdYC430kIpnmA

Недавно я опубликовал бесплатное руководство по React для начинающих. Если вы хотите научиться создавать веб-приложение с нуля, это отличная отправная точка. Вы узнаете, как создать приложение, которое поможет вам найти лучший фильм для просмотра? Сладкие тыквы

Если статья была полезна, напишите ее в Twitter.

Добавить комментарий

Ваш адрес email не будет опубликован.