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

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

Гиладом Даяги

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

В этом посте я посмотрю в один аспект компонентов стилизации:

Как реализовать компонент, который может иметь несколько визуальных вариантов.

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

1: классический подход

2: компонентный подход

3: расширяющийся подход

Я предполагаю, что некоторые знания реагирования и стилизованных компонентов. Но если вам нужна ссылка, оба имеют отличную документацию. Вы можете найти React Docs здесь и стиль-компонент здесь Отказ

Вы можете увидеть живую демонстрацию каждого подхода здесь Отказ

Визуальные варианты

В реакции компонент переводит состояние и реквизит в визуальное представление. Это обычно означает в элемент DOM.

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

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

Хороший пример этого визуального варианта шаблона Стили кнопок Bootstrap Отказ Вы стиль кнопку независимой от его содержания и выбираете среди множества вариантов. И каждый вариант кнопки обслуживает собственную семантическую цель (как успех или отключение), в отличие от внешнего вида (как синий, круглый и т. Д.).

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

# 1: классический подход

Стильные компоненты полностью поддерживают CSS. Который включает в себя возможность применять правила стиля к «подклассам» элементов. Это означает, что вы можете создавать визуальные варианты, используя классы CSS, не так отличающиеся от того, как это делается с простыми CSS.

Чтобы выбрать вариант компонента, который вы измените классное значение пропры Вы также можете пройти несколько классов таким образом и объединить несколько вариантов, скажем, «первичный» и «большой».

Пример

// ButtonClassic.jsximport styled from 'styled-components'

const ButtonClassic = styled.button`  background: #fff;  color: #333;  font-size: 1em;  margin: 1em;  padding: 6px 12px;  border: 1px solid #ccc;  border-radius: 4px;  cursor: pointer;

/* Style sub-classes */  &.primary {    color: #fff;    background: #337ab7;    border-color: #2e6da4;  }  &.success {    color: #fff;    background-color: #5cb85c;    border-color: #4cae4c;  }  &.link {    color: #337ab7;    background-color: transparent;    border: none;    border-radius: 0;    font-weight: 400;  }  &.large {    font-size: 1.2em;    padding: 10px 16px;    border-radius: 6px;  }  &.disabled {    color: #ddd;    background-color: #aaa;    border: 1px solid #aaa;  }`;

export default ButtonClassic

Применение

// ... DefaultPrimarySuccessLink

// With Combos  Primary Large

  Primary Large Disabled

Плюс

• Легко поддерживать несколько вариантов.
• Легко объединить список вариантов (например, первичный + большой + отключен)
• Код читается и компактный
• Легко в портах стилей из простых CSS

Господин

• Не использует стандартные составляющие составляющие (реквизиты)
• При сочетании классов результаты зависят от порядка декларации правила стиля. Как в классических CSS. Это может привести к неожиданному поведению.

# 2: компонентный подход

Слифовые компоненты, как и их имя, предложили просто нормальные компоненты. Что означает, что они могут получать реквизиты. Опоры, которые могут быть доступны в стиле объявления и используются для определения значений для правил стиля.

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

Пример

// ButtonComponent.jsx import styled from 'styled-components'

const ButtonComponent = styled.button`  background: ${props => props.primary ? '#337ab7' : '#fff'};  color: ${props => props.primary ? '#fff' : '#333'};  font-size: 1em;  margin: 1em;  padding: 6px 12px;  border: ${props => props.primary ? '1px solid #2e6da4' : '1px solid #ccc'};  border-radius: 4px;  cursor: pointer;`

export default ButtonComponent

Применение

// ...DefaultPrimary

Плюс

• Стандартное поведение компонентов реагирования, получение визуального представления от реквизитов

Господин

• Если необходимы более двух состояний, код может стать нечитаемым
• Существует некоторое повторение кода, особенно если многие правила отличаются между вариантами.

# 3: расширяющийся подход

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

Пример

// ButtonExtend.jsximport styled from 'styled-components'

const ButtonExtend = styled.button`  background: #fff;  color: #333;  font-size: 1em;  margin: 1em;  padding: 6px 12px;  border: 1px solid #ccc;  border-radius: 4px;  cursor: pointer;`

export default ButtonExtend

export const ButtonExtendPrimary = styled(ButtonExtend)`  color: #fff;  background: #337ab7;  border-color: #2e6da4;`

export const ButtonExtendSuccess = styled(ButtonExtend)`  color: #fff;  background-color: #5cb85c;  border-color: #4cae4c;`

export const ButtonExtendLink = styled(ButtonExtend)`  color: #337ab7;  background-color: transparent;  border: none;  border-radius: 0;  font-weight: 400;`

Применение

// ...DefaultPrimary<;/ButtonExtendPrimary>SuccessLink

Плюс

• Каждый вариант – отдельный компонент
• Легко иметь много вариантов
• Код очень читаемый

Господин

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

Резюме

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

Если вы пропустили ссылку выше, в этом доступен живая демонстрация примеров кода WebPack Bin Отказ

Если вы знаете о других подходах с использованием стилизованных компонентов, дайте мне знать в комментариях ниже.

Обновление (9 июня 2017)

Стильные компоненты V2 были выпущен несколько дней назад с немного лучшим способом использования расширяющегося подхода.

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

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

// ButtonExtendV2.jsximport styled from 'styled-components'

const ButtonExtendV2 = styled.button`  background: #fff;  color: #333;  font-size: 1em;  margin: 1em;  padding: 6px 12px;  border: 1px solid #ccc;  border-radius: 4px;  cursor: pointer;`

export default ButtonExtendV2

export const ButtonExtendV2Primary = ButtonExtendV2.extend`  color: #fff;  background: #337ab7;  border-color: #2e6da4;`

export const ButtonExtendV2Success = ButtonExtendV2.extend`  color: #fff;  background-color: #5cb85c;  border-color: #4cae4c;`// ...