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

Стилизованные компоненты - один из новых способов использования CSS в современном JavaScript. Он предназначен для того, чтобы стать преемником модулей CSS, способом написания CSS, который привязан к одному компоненту и не проникает в какой-либо другой элемент на странице.

Краткая история

Когда-то Интернет был действительно простым, а CSS даже не существовало. Мы выложили страницы с помощьюстолыи рамы. Хорошие времена.

потомCSSожили, и через некоторое время стало ясно, что фреймворки могут сильно помочь, особенно в построении сеток и макетов, причем большую роль в этом играют Bootstrap и Foundation.

Препроцессоры вродеSASSи другие очень помогли замедлить внедрение фреймворков и лучше организовать код, такие соглашения, какБЭМиSMACSSросло в использовании, особенно внутри команд.

Соглашения - это не решение всего, и их сложно запомнить, поэтому в последние несколько лет с увеличением числаJavaScriptи построения процессов в каждом внешнем проекте, CSS нашел свое место в JavaScript (CSS-в-JS).

Новые инструменты исследовали новые способы создания CSS-in-JS, и некоторые из них стали пользоваться все большей популярностью:

React Style
jsxstyle
Радий

и больше.

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

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

Он призван стать преемникомМодули CSS, способ написать CSS, ограниченный одним компонентом, без утечки в какой-либо другой элемент на странице.

(подробнее о модулях CSSздесьиздесь)

Стилизованные компоненты позволяют вам писать простой CSS в ваших компонентах, не беспокоясь о конфликтах имен классов.

Установка

Установите стилизованные компоненты, используяnpmили жепряжа:

npm install styled-components
yarn add styled-components

Вот и все! Теперь все, что вам нужно сделать, это добавить этот импорт:

import styled from 'styled-components'

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

Сstyledобъект импортирован, теперь вы можете приступить к созданию стилизованных компонентов. Вот первый:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

ButtonсейчасРеагироватьКомпонент во всем величии.

Мы создали его, используя функцию стилизованного объекта, названнуюbuttonв этом случае и передача некоторых свойств CSS влитерал шаблона.

Теперь этот компонент можно отобразить в нашем контейнере с использованием обычного синтаксиса React:

render(<Button />)

Стилизованные компоненты предлагают другие функции, которые вы можете использовать для создания других компонентов, а не толькоbutton, подобноsection,h1,inputи много других.

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

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

Когда вы передаете некоторые свойства стилизованному компоненту, он передает их вДОМузел смонтирован.

Например, вот как мы передаемplaceholderиtypeреквизит дляinputкомпонент:

const Input = styled.input`
  //...
`
render(
<div>
<Input placeholder="…" type=“text” />
</div>
)

Это сделает то, что вы думаете, вставив эти реквизиты как атрибуты HTML.

Реквизит вместо того, чтобы слепо передаватьсяДОМтакже может использоваться для настройки компонента на основе значения свойства. Вот пример:

const Button = styled.button`
  background: ${props => (props.primary ? 'black' : 'white')};
  color: ${props => (props.primary ? 'white' : 'black')};
`
render(
<div>
<Button>A normal button</Button>
<Button>A normal button</Button>
<Button primary>The primary button</Button>
</div>
)

Установкаprimaryprop меняет цвет кнопки.

Расширение существующего стилизованного компонента

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

const Button = styled.button`
  color: black;
  //...
`
const WhiteButton = Button.extend </span><span style="color:#e6db74">  color: white; </span><span style="color:#e6db74">
render(
<div>
<Button>A black button, like all buttons</Button>
<WhiteButton>A white button</WhiteButton>
</div>
)

Это обычный CSS

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

Вы можете использовать медиа-запросы,гнездованиеи все, что вам может понадобиться.

Вот пример медиа-запроса:

const Button = styled.button`
  color: green;
  @media screen and (max-width: 800px) {
    color: black;
  }
`

Использование префиксов поставщиков

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

Вывод

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

Скачать мою бесплатнуюСправочник по React