# Стилизация с помощью Styled Components в React

В предыдущих уроках мы рассмотрели приемы стилизации с использованием глобального CSS и инлайновой стилизации. В этом уроке мы поработаем с более эффективным для больших приложений подходом - использованием библиотеки styled-components.

Итак, возьмем наш компонент без CSS стилей, который мы использовали в прошлых уроках:

`function App() { return ( <div> <p>text</p> <p>text</p> <p>text</p> </div> ); }`

Для начала установим библиотеку `Styled Components`:

`npm install --save styled-components`

Затем импортируем необходимый нам пакет в компонент `App`:

`import styled from 'styled-components';`

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

Давайте стилизуем первый абзац. Для этого перед функцией `App` после строк импорта создадим компонент `Text1`. В объекте `styled` из библиотеки нам нужен абзац, поэтому мы пишем `styled.p`. Затем, в шаблонной строке перечисляем необходимые нам CSS стили - как в обычном CSS:

`const Text1 = styled.p` color: orangered; font-weight: bold; `;`

Как видите, мы используем здесь чистый CSS в виде шаблонных строк, что очень удобно. Подобным образом мы можем использовать медиа-запросы, псевдоэлементы, селекторы и другой функционал CSS.

Теперь внутри функции компонентa `App` заменим тег `p` на созданный нами компонент `Text1` с CSS стилями:

`<Text1>text</Text1>`

Подобным образом стилизуем второй и третий абзацы. Для этого создадим компоненты `Text2` и `Text3`:

`const Text2 = styled.p` font-style: italic; color: brown; `; const Text3 = styled.p` background-color: orange; font-weight: bold; color: white; `;`

И, наконец, стилизуем наш див. Для этого создадим компонент и назовем его `Container`:

`const Container = styled.div` width: 200px; border: 2px solid brown; padding: 10px; text-align: center; `;`

Заменим все наши теги созданными компонентами:

`import styled from "styled-components"; const Container = styled.div` width: 200px; border: 2px solid brown; padding: 10px; text-align: center; `; const Text1 = styled.p` color: orangered; font-weight: bold; `; const Text2 = styled.p` font-style: italic; color: brown; `; const Text3 = styled.p` background-color: orange; font-weight: bold; color: white; `; function App() { return ( <Container> <Text1>text</Text1> <Text2>text</Text2> <Text3>text</Text3> </Container> ); }`

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

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

Подобным образом можно стилизовать компоненты, используя, к примеру, библиотеку Emotion.

Возьмите React компонент, который вы делали в задаче к прошлому уроку, стилизуйте его, использовав библиотеку Styled Components.

← →
↑