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

1656540258 kak sozdat nastraivaemyj stilevoj komponent

от ChunLin Wu

1*OArsqiCwxTb78iN27XtVdg
https://unsplash.com/photos/4gKHjKG7ty4

Styled-components – это библиотека CSS-In-JavaScript. Это позволяет вам писать код CSS внутри файлов React JSX. Жизнь хорошо, когда свойства CSS вашего компонента можно динамически изменять с помощью styled-components.

Однако есть некоторые недостатки, когда вы пытаетесь наладить свои стилизованные компоненты. В этой статье я расскажу вам о плюсах и минусах построения компонентов с помощью традиционных CSS и стилизованных компонентов. Затем я покажу вам простой способ побороть недостатки создания стилизованного компонента. Следите за обновлениями!

Начинаем

Сначала создадим компонент с обычным файлом CSS.

В настоящее время компонент выглядит как на изображении ниже.

1*bMJr4IzslE0CGmTvCcT_jg

Достаточно мыло, а!?

Сделайте название «Cute Puppy» другого цвета

Давайте дадим Content.jsx реквизит. Чтобы сделать это просто, дайте ему название голубое небо.

Теперь мы можем измениться Content.jsx Свойства CSS на основе skyblue. Я хочу познакомить вас с двумя методами добавления новых свойств CSS с помощью общего CSS.

Встроенный стиль

Как видите, берем skyblue как условие для добавления свойств CSS к объекту стиля. Затем мы вводим объект стиля как встроенный стиль. Теперь результат будет выглядеть так…

1*heUmDWYNGBJjKDM7nc2kAA

Цвет названия теперь небесно-голубой! Теперь перейдем ко второму способу.

Добавить новые классы CSS

Как вы знаете, мы создали класс CSS под названием content--skyblue. Это просто сделать цвет небесно-голубым. Мы хотим добавить этот класс к названию Cute Puppy. Мы создаем массив для хранения классов CSS, а затем используем join способ разделения классов пробелом. Итак, теперь имя класса будет таким<div className="content__title content--skyblue">Cute Puppy

. Результат также будет смотреться так же, как метод встроенного стиля.

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

Итак, какие плюсы и минусы обоих встроенный стиль и добавление новых классов CSS?

Плюсы

  1. Это общий CSS и обычный JS – вам не нужно изучать новый синтаксис и API.
  2. Легко отлаживать с помощью инструментов разработчика браузеров.

Минусы

  1. Изменять встроенный стиль нельзя по специфичности CSS. Вы не можете просто добавить класс, чтобы заменить встроенный стиль, поскольку встроенный стиль имеет более высокую специфичность.
  2. Непонятно, в какие классы входят className с помощью способа добавления новейших классов CSS. Когда вы видите такой код <div className={titleStyles.join(' ')}>Cute Puppy

, вы должны оглянуться на логику, которую вы добавили в классы. Это будет серьезным недостатком, когда вы have lots className, чтобы изменить.

Вот почему я хочу познакомить вас со styled-components.

Styled-компоненты

Используйте лучшие версии ES6 и CSS, чтобы стилизовать свои приложения без стресса?

1*WI_n7M5OYeUh0SrkXZVGyw
styled-components

Styled-components – это библиотека, которая позволяет легко изменять свойства CSS. Вы можете просто установить его через npm install styled-components --save или yarn add styled-components. Затем вы можете использовать styled-components для стилизации компонентов. Возьмем для примера Милый щенок.

Сначала нам нужно импортировать styled-components в наш компонент. Мы импортируем его как название styled. Тогда мы можем определить, какой HTML элемент следует использовать для каждого компонента стиля. Например,

const Button = styled.button` /* CSS Properties */ `

означает, что этот компонент Button означает визуализацию стилизованного компонента a <button />. Тогда мы можем просто переместить свойства CSS к каждому стилизованному компоненту. Это! Так просто! Теперь можно увидеть оригинальную версию Cute Puppy.

1*bMJr4IzslE0CGmTvCcT_jg

Как изменить цвет заголовка с помощью стилизованных компонентов? Стилизованные компоненты используют преимущества шаблонных литералов JavaScript ES6. Вы можете передать функцию шаблонным литералам. Это полезно, если вы хотите изменить свойства CSS на основе реквизитов. Давайте глубже погрузимся в тему через Cute Puppy.

Передаем сопротивление skyblue к Title компонент, построенный с помощью styled-components. Затем мы можем просто передать функцию свойствам CSS, которые мы хотим изменить, с помощью шаблонных литералов. Как видите, мы передаем стрелковую функцию props => (props.skyblue ? 'skyblue' : 'black’), чтобы определить, при каком условии цвет Title должен быть голубым, и мы просто заканчиваем изменять цвет Title!

1*heUmDWYNGBJjKDM7nc2kAA

Как наладить

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

1*McKlxIMuHFOWXY_tswRzDg
Что произошло с Chrome Devtools

Styled-компоненты обладают встроенной системой модулей CSS. Это отлично подходит для решения проблемы конфликта имен классов. Однако, мы точно не знаем, какие классы мы используем, когда пытаемся наладить Chrome Devtools. Кроме того, когда мы проверяем функцию визуализации в Content.jsx:

Знаете ли вы, какой элемент HTML мы используем? совершенно нет, правда? Вы должны оглянуться на каждый стилеваемый компонент, чтобы проверить, какой элемент HTML он использует. Это действительно раздражает. Кроме того, когда вы создаете стилизованные компоненты таким образом, вы просто отказываетесь от мощных функций селекторов CSS.

Учитывая проблемы выше, я хочу представить простой метод для создания настраиваемого styled-component, который объединяет общий CSS со styled-components.

Комбинируйте CSS-селекторы с компонентами Styled

В начале этой части я хочу, чтобы вы знали, как стилизовать существующие компоненты с помощью styled-component.

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

Надо добавить className к общим компонентам, и мы можем легко стилизовать их с помощью styled-component. Давайте посмотрим, как воспользоваться этим, чтобы создать отлаживаемый styled-component.

Нам нужно завернуть Content.jsx через className prop, и мы можем стилизовать его с помощью этого шаблона:

const StyledContent = styled(Content)` /* CSS Properties */ `

Тогда мы можем обернуть любой компонент в styled-component. Кроме того, мы также можем использовать мощность CSS селекторов внутри styled-component. Более того, синтаксис SCSS доступен в стилизованных компонентах! Давайте посмотрим, как это происходит, когда мы открываем консоль в Chrome Devtools.

1*aUt6gsRAGgRr_ewJ6c_E8w

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

1*heUmDWYNGBJjKDM7nc2kAA

Жизнь еще никогда не была такой прекрасной!

Заверните

Мы прошли через два метода стилизации компонента с помощью обычного CSS. Затем мы научились легко стилизовать компоненты с помощью styled-components. В конце концов мы объединили селекторы CSS из styled-components. Теперь компоненты можно легко стилизовать, а также отлаживать.

Если вы хотите испытать styled-components для стилизации ваших компонентов, но чувствуете боль во время отладки, я бы рекомендовал вам попробовать этот метод.

ДЕМО

Исходный код

Вы можете проверить исходный код каждого метода в моем репозитории Github

1. Встроенный стиль

2. Добавьте новый класс

3. Styled-компоненты

4. Комбинируйте CSS-селекторы со стилизованными компонентами

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

Следите за мной в Twitter

Следите за мной на Github

Подключите меня к LinkedIn

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

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