Введение в стилизованные компоненты React

Введение

React Styled Components — это простой способ включить стили в ваши компоненты React. У него очень низкий начальный уровень для разработчиков, знакомых с CSS, но еще не знакомых с библиотеками дизайна, такими как Bootstrap или Ant Design. Кроме того, его очень легко настроить в приложении и приступить к работе, что вы увидите ниже. Использование стилизованных компонентов устраняет необходимость использования встроенных стилей в вашем рендеринге React, поэтому это дополнительно помогает удалить HTML-контент из стилевого содержимого вашего документа.

Использование стилизованных компонентов

Предполагая, что у вас уже запущено приложение React, начать работу со Styled Components очень просто. Во-первых, мы начнем с установки зависимостей из npm:

npm install styled-components

Затем нам нужно будет импортировать стилизованные компоненты в наше приложение вместе с импортом React:

import React from ‘react’;
import styled from ‘styled-components;

Чтобы использовать стилизованные компоненты, мы должны создать переменную, которая будет содержать стиль, который мы хотим для любого элемента DOM, который мы будем использовать со стилизованными компонентами, и инициализировать с помощью styled.‹element›``. Между нашими обратными кавычками мы можем добавить столько CSS, сколько нам нужно для этого компонента, и при написании он будет выглядеть почти так же, как CSS. Давайте начнем с простой кнопки и тега абзаца, а затем добавим адаптивный стиль для этой кнопки.

const PinkPTag = styled.p`
   background-color: pink;
   font-weight: bold;
`;

Выше мы создаем переменную и инициализируем ее с помощью «styled.p», а затем пишем то, что позже будет преобразовано в CSS, точно так же, как мы пишем CSS в таблице стилей. Буква p в объявлении styled.p означает, что любой PinkPTag в нашем HTML-коде или компонентах React будет эффективно отображаться как обычные HTML-теги ‹p› с любым добавленным стилем.

const Button = styled.button`
   border-radius: 5px;
   border: 4px solid red;
   background-color: lightblue;
   font-weight: normal;
   font-size: 24px;
   color: red;
`;

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

<div>
   <PinkPTag>This paragraph and button were formatted with styled 
   components!</PinkPTag>
   <Button>Click Me!</Button>
</div>

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

const Button = styled.button`
   border-radius: 5px;
   border: 4px solid red;
   background-color: lightblue;
   font-weight: normal;
   font-size: 24px;
   color: red;
   :hover {
      border: 4px solid blue;
      background-color: red;
      font-weight: bold;
      color: lightblue;
   }
`;

Вывод

Хотя работа со стилизованными компонентами может быть немного более трудоемкой при реализации полного веб-сайта, чем библиотека, такая как Bootstrap или Ant Design, это отличный инструмент, который нужно знать, как использовать, если вы работаете над незначительными стилистическими изменениями внутри. меньшие компоненты React. Необходимые базовые знания — это просто базовое рабочее понимание CSS, а стилизованные компоненты помогут поднять ваши приложения React на новый уровень!

Введение в стилизованные компоненты React