Автор оригинала: FreeCodeCamp Community Member.

Maciej Nowakowski

«Это интересно …» Я думал, когда я впервые прочитал о стилизованных компонентах. И тогда я вернулся к моим проверенным и протестированным компонентам реагирования.

Но тогда Макс Stoiber , со-создатель стилизованных компонентов, показал нам свою новую библиотеку в Реагируйте в флип-флопсах кодирования bootcamp Отказ «Это интересно» превратилось в «Это разум!»

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

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

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

Шаблонные литералы ES6 упрощают способ, которым вы можете смешивать переменные и текст. Если вы берете две переменные: Имя и настроение , с назначенными ценностями «Алиса» и «счастливая» соответственно, шаблон литерал:

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

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

Тежные шаблонные литералы делают синтаксис еще дальше.

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

• Функции тегов называются с использованием обозначения BackTicks вместо скобок. В приведенном ниже примере мы называем приветствию Функция, обертывая аргументы в Backticks:

greetingTag`${name} is ${mood}.`;

• JavaScript обрабатывает шаблон литерал – все между backticks – как аргументы функции. На первом этапе JavaScript преобразует шаблон литерал в массив строк. Строки сопровождаются экстрагированными переменными. Если мы возьмем пример выше, преобразованные аргументы передавались на приветствию Функция будет выглядеть следующим образом:

["", " is ", "."], name, mood

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

Теперь приветствию Функция может применять любую логику на массив Texts и Имя и настроение Переменные и вернуть желаемый результат.

Давайте создадим функцию тега, приветствию это займет три аргумента: а Тексты массив, а Имя, и а настроение Переменные. И вот логика это будет использовать: если значение настроение «Happy», это вернет регулярное приветствие. Во всех остальных случаях он вернет версию приветствия:

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

Теперь, если мы присваиваем «Алису» к Имя и «счастлив» к настроение , приветствию Функция вернется: «Привет Алиса!». Если мы изменили значение настроение Любое другое слово, чем «счастливое» – говорите «взволнованно» или «кот» – приветствию Вернется бы: «Привет Алиса, ты потрясающий!».

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

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

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

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

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

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

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

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

Если вы хотите использовать созданные компоненты в вашем приложении, вы должны установить Стильные компоненты первый:

npm install --save styled-components

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

STELLED.H1 это функция тега. Он возвращает компонент React, который идентичен ниже:

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

Красота этого решения заключается в том, что стилизованные компоненты делают тяжелый подъем для вас – ваш компонент Название будет иметь цвет RoyalBlue Отказ

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

Представьте, что вы хотели бы держать свои заголовки большинством большую часть времени, и только спорадически выделите их, используя другой цвет. С введенным в стиле компонентов мы можем создать цвет Color-Aware Название это будет черный По умолчанию и измените RoyalBlue Всякий раз, когда мы проходим это Первичный проп

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

Выше я определил стиль компонента Заголовок. Потому что реквизит Доступны внутри объявления о стиле компонента, мы можем решить, какой цвет наш компонент будет. Функция использует тройной оператор и возврат RoyalBlue Когда Первичный Собственность правда и черный иначе.

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

Передача Первичный опоры без назначения похоже на прохождение Primary = {True} Отказ

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

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

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

Темы

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

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

А Тема Это объект 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"   } }

Тема выше определяет Цвета и fontsize характеристики. Вы сможете получить доступ к ним во всех созданных компонентах в приложении.

Но во-первых, вам нужно сделать приложение знать о Тема Отказ Вы должны передать его как опоры Темапровидер – Компонент обертки, предоставляемый в стиле компонентов:

import { ThemeProvider } from "styled-components"; import theme from "./theme.js";

const App = () => (        
            
    )

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

В Название , вы можете получить доступ к Тема объект через rops.theme Отказ Например, чтобы выбрать Название Цвет, вы проверяете сначала, если данный атрибут был передан на Название ( Первичный или Среднее ). Тогда верните соответствующие цвет Значение объявлено в Тема Отказ Если никто не был передан, вы возвращаете стандарт текст цвет.

Название Теперь можно решить и о его размерах шрифтов. Он проверяет сначала, если XL , LG , MD или СМ PROP был передан и на основании этого – назначает соответствующее значение для Размер шрифта имущество. Если не было пропущено, он назначит значение fontsize.nm Определяется в Тема Отказ

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

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

Создание только один Название компонент недостаточно. Например, на странице блога вам понадобится H1 Тег для заголовка поста и H2 Тег для субтитров. Вам также нужно также абзацы для отображения текста.

Слифовые компоненты легко выдвигаются. Вы можете создать новый Субтитры Компонент с H2 Тег и копирование и копирование всех правил стиля из Заголовок. Или вы можете продлить Название Компонент с с Компонентом Метод помощника. Субтитры будет иметь все свойства Название Но будет использовать H2 тег:

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

Вы можете продлить Название создать Текст Компонент с P Тег и – в то же время – исправить его цвет как Тема. Тест и установить Высота линии к 1.65 ? Здесь тоже стилизованные компоненты сияют:

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

Во-первых, мы создали посредник Пункт Компонент, который будет иметь все правила стиля Заголовок. Тем не менее, мы будем использовать P тег, а затем Текст Компонент, который расширяет Пункт и устанавливает его цвет и Высота линии характеристики. Ниже вы можете проверить код для Название , Субтитры и Текст составные части:

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

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

Чтобы узнать, как использовать псевдо-классы, давайте создадим Кнопка Компонент, который изменит цвет, когда мы наведите курсор на нем.

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

Инъекция глобальных стилей со стилью стилей

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

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

В приведенном ниже примере я использую Инкглобал к:

• Импортировать шрифты и установить Семья шрифта Для всех элементов к «Монтсеррату».
• Сбросить поля, прокладки и границы.
• Изменить корневой элемент Размер шрифта Использование медиа-запроса для размера экрана ниже экран. Медиум и экран. Оба определены в тема.

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

Благодаря любопытству Max и Glen, созданные компоненты, предлагают вам удивительный набор инструментов для стиля реагирования. Экосистема в стиле компонентов процветает. Посетите Экосистема Страница для изучения готовых к использованию компонентов и систем сетки. Изучите многие другие инструменты, построенные со стильными компонентами.

Заключение

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

Стильные компоненты – это новый способ стиля реактивных приложений. Вне коробки, в стиле компонентов:

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

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

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