Стилизация с помощью 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.