Styled components что это

Styled components что это

После этого можно начинать работать над использованием Styled Components. Для этого понадобится собственно проект и компонент, который нужно стилизовать. Разберем на примере этого кода.

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

Здесь мы видим, что объявление имени компонента производится через const Button. Обратите внимание на styled — их мы импортировали и через это получили нужный функционал Styled Components.

В данном случае «а» — это HTML-код, привычный элемент ссылки. Но, производя объявление компонента, допускается применять все элементы из HTML, которые будут нужны.

В компоненте App мы видим — привычный компонент из Реакта. Аналогично можно реализовать стилизованный компонент в отдельном файле. Это будет выглядеть так:

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

Настраиваем компонент

Рассмотрим простую задачу — создать несколько вариантов одной кнопки. В Styled Components props позволяют реализовать это решение максимально элегантно. Пропсы это свойства или произвольные входные данные компонентов, которые возвращают элемент React. К ним мы еще вернемся.

Напишем код с компонентами Button. Одному из них пропишем свойство primary.

Теперь мы можем вложить в него нужные нам динамические стили. Вот так это будет выглядеть на практике:

Мы применяем интерполяцию функции, которая возвращаем нам значение, основанное на свойстве. Если primary=true, то фон становится белым. Если нет, то используется фон palevioletred.

В React color background будет сложно прописать таким образом, если свойств больше двух. Также это неудобно, когда применяется много строк из CSS. В этом случае логичнее настроить импорт стилей иначе. Например:

Таким образом мы можем раздельно прописать стили для нескольких свойств. Попробуем добавить их для danger. В результате получится:

Как работать с React media

Если перед нами встанет задача сделать наши компоненты адаптивными, то решить ее будет несложно. Для этого нужно использовать React media, добавив их в литерал нашего шаблона. Как это будет выглядеть:

Псевдо-селекторы

Рассмотрим их на примере добавления состояния наведения для нашей кнопки. Вот так решается эта задача.

Глобальные стили

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

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

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

Для этого в Styled Components применяется оптимальное решение. Глобальные функции задаются здесь с использованием createGlobalStyle.

Но для этого нужно забраться на «верхушку» дерева Реакта. Например, в файл App.js. Именно туда нужно произвести import react файла createGlobalStyle. А затем — поставить стили для глобального компонента.

На практике это будет выглядеть вот так:

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

Заключение

Мы разобрали основы работы со Styled Components. Теперь вы знаете, как их правильно установить, создать первый стилизованный компонент и использовать media-запросы, чтобы сделать компоненты полностью адаптивными.

Использование Styled Components, в частности, и любых библиотек CSS-in-JS — современное решение, серьезно упрощающее работу программисту. Выбор именно этой библиотеке обусловлен большим количеством документации и наличием встроенной поддержки в next.js.

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

Чтобы это сделать придется написать код буквально на сотни и возможно даже тысячи строк. А при помощи Styled Components можно отказаться от CSS, заменив его на TypeScript. Это позволит создать максимально лаконичный и понятный код.

Немаловажное преимущество — его вес. За счет Styled Components вес стилей будет в несколько раз меньше, чем в CSS. А это окажет положительное влияние на скорость работы любого приложения или платформы.

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

В проектах, которые мы создали, всегда применяют оптимальные способы написания кода. Они позволяют эффективно решать бизнес-задачи, поставленные клиентами студии. Больше интересных статей про программирование и ИТ-сферу можно найти в блоге студии web-разработки YuSMP Group.

Разбираемся с styled-components и prop-types

Чтобы начать использовать Scss в React необходимо подключить scss файл в нужный компонент:

import "./Header.scss";

const Header = () => < return ( 
 
 
Cv builder 
 Print 
Github
 
 
 
 
 ); >;

А Header/Header.scss тогда будет выглядеть как-то так:

.Header < padding: 1rem 0; margin-bottom: 1rem; background-color: white; >.Header_wrapper < display: flex; align-items: center; justify-content: space-between; >.Header_logo

Установка styled-components

Styled-components — это библиотека под React / React Native для написания и управления CSS. Это решение «CSS-in-JS»., то есть вы пишете CSS в файлах js / jsx. Более того, Styled-components больше похож на SCSS, что дает преимущества в использовании переменных и тп.

Чтобы установить styled-components необходимо прописать команду:

// with npm npm install styled-components // with yarn yarn add styled-components

Использование styled-components в реакте

Чтобы начать использовать styled-components нужно прописать импорт в файле jsx:

import styled from "styled-components";

Пример Avatar.jsx при помощи styled-components:

const Wrapper = styled.div` width: 10rem; height: 10rem; background-color: #bfbfbf; align-items: center; margin-right: 4rem; `; const Avatar = () => < return ; >;

Или еще красивее:

import styled from "styled-components"; const Avatar = styled.div` width: 10rem; height: 10rem; background-color: #bfbfbf; align-items: center; margin-right: 4rem; `; export default Avatar;

Установка prop-types в React

Prop-types — нужен для проверки типов во время рендера для React props.

Команда для установки prop-types:

npm install --save prop-types

Использование prop-types в связке с styled-components:

Для использования prop-types нужно прописать импорты:

// ES6 (for react) import propTypes from 'prop-types'; // Or ES5 (for node) var PropTypes = require('prop-types');

Передача props в styled-components выглядит так (на примере того-же аватара):

import styled from "styled-components"; const Avatar = styled.div` width: 10rem; height: 10rem; border-radius: $ (props.isSquare ? "10px" : "50%")>; background-color: #bfbfbf; align-items: center; margin-right: 4rem; `; export default Avatar;

Пример валидация пропов при помощи props-types и передача этих props в styled-component выглядит следующим образом:

Объявление props в компоненте, где Wrapper это тот же аватар:

const Avatar = () => < return onClick= />; >;

Avatar.propTypes = < isSquare: propTypes.bool, onClick: propTypes.func, >; Avatar.defaultProps = < isSquare: false, onClick: () =><>, >;

Осталось только отловить onClick на родителе App.js :

И написать функцию на handleAvatarClick :

const handleAvatarClick = () => console.log("avatar clicked");

Что выбрать styled-components или scss?

Выбирать styled-components или scss это ваше дело. По своему опыту могу сказать, что styled-components откровенно «тупит» в компоненах, где происходит частый ререндер.

Например, я делал color-picker на реакте и там был компонент палетты (это когда надо дергать ползунок и выбирать цвет) и каждый раз, когда менялся цвет, то styled-components начинал рерндерить компонент, в который этот цвет передавался, что приводило к диким лагам (даже с withDebounceInput на инпуте), а подключив scss лаги моментально прошли (по-хорошему, там надо было переписать код, тогда бы и на styled-components лагов не было).

Поэтому я предпочитаю комбинировать styled-components с scss либо чистый css-in-js. Потому что плюсы, которые дает styled-components:

• читаемость кода;
• удобство использования;
• подход css-in-js, который подразумевает, что стили являются динамическими и файла .css просто не будет

перевешивают минусы, как мне кажется.

UPD: когда загрузил видео, вспомнил, что забыл сказать про конфигурации для styled-compoennts и что можно сделать так, чтобы классы генерировались с названием компонента, например: класс kav01 будет выглядеть как Avatar-kav01 . Такое также можно настроить только на dev разработке, а на prod оставлять все без префиксов. Подробнее об этом можете почитать тут.

Исходники:

• Полный плейлист этого курса доступен на ютубе
• Код из текущего видео можно скачать кликнув тут
• Исходный код и весь проект вы можете скачать на гитахбе буду рад вашей звездочке ✨

Знакомство с библиотекой Styled Components в React

Styled Components — общеизвестная библиотека для стилизации приложений React. Она позволяет создавать пользовательские компоненты посредством написания самого CSS в JavaScript.

В статье будут рассмотрены принципы применения Styled Components в приложении React.

По итогам изучения материала вы узнаете, как:

• создать стилизованный компонент;
• передать ему свойства;
• создать и работать с темой.

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

Styled Components

Для стилизации приложения React существует множество вариантов. Традиционно создается внешний файл CSS, после чего атрибуты в виде строки передаются свойству className .

Кроме того, можно воспользоваться техникой CSS-in-JS, которая предусматривает написание CSS в файле JavaScript. И Styled Components предполагает как раз данный подход.

“Используйте лучшие наработки ES6 и CSS для комфортной стилизации приложений”. (Цитата с сайта Styled Components).

Преимущества Styled Components

• Автоматическая генерация критического CSS. Библиотека отслеживает компоненты, отображаемые на странице, и добавляет только их стили.
• Отсутствие ошибок в именах класса. Она создает уникальное имя класса для стилей.
• Упрощенное удаление CSS. Стили прикрепляются к определенному компоненту, а не добавляются как имя класса.
• Простая динамическая стилизация. Стили присоединяются на основе свойств или темы.
• Удобное обслуживание. Добавление стилей происходит не в разных файлах, а в одном месте.
• Автоматическое применение вендорных префиксов. Styled Components берет все в свои руки.

Создание стилизованного компонента

Для начала создадим первый стилизованный компонент. В качестве базового проекта задействуем create-react-app с поддержкой TypeScript. Вы же можете параллельно работать как с ним, так и без него.

Как правило, в Styled Components файлу присваивается имя componentName.styled.ts , в котором вместо “componentName” указывается имя компонента.

Например, создадим компонент в новом файле /src/components/styles/Button.styled.ts , в котором начнем с import styled from ‘styled-components’; . После этого мы сможем воспользоваться styled для создания стилизованного компонента.

“В Styled Components для стилизации компонентов применяются теговые шаблонные литералы”. (Цитата с сайта библиотеки).

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

Сначала вводим styled. , за которым указываем корректный компонент React или имя тега, например ‘div’. В данном случае это будет стилизованный компонент Button :

export const Button = styled.button` 
background-color: springGreen; 
color: black; 
font-size: 16px; 
border-radius: 4px; 
padding: 0.5rem 1rem; 
margin: 1rem; 
cursor: pointer; 
border: none; 
outline: none
`;

Теперь можно задействовать компонент Button , как любой обычный элемент в приложении.

Styled Button

При отрисовке кнопки все стили остаются с ней.

Вы можете вложить правила, добавить медиа-запросы и псевдоклассы для определения конкретного состояния элемента. Например, добавим в компонент Button псевдокласс :hover , как показано ниже:

export const Button = styled.button` 
background-color: springGreen; 
color: black; 
font-size: 16px; 
border-radius: 4px; 
padding: 0.5rem 1rem; 
margin: 1rem; 
cursor: pointer; 
border: none; 
outline: none 
&:hover background-color: green; 
color: white; 
>
`;

Теперь наведение курсора на кнопку приведет к соответствующим изменениям цветов фона и текста надписи.

Передача свойств стилизованному компоненту

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

Например, передадим Button свойство bgcolor=»springGreen» и в файле Button.styled.ts получим к нему доступ.

background-color: $ props.bgcolor>;

Если у вас JavaScript, то все сработает отлично. Но в случае с TypeScript возникнет ошибка.

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

interface ButtonProps bgcolor: string;
>

Затем передаем данный интерфейс в компонент Button и получаем доступ к свойству bgcolor . При этом TypeScript не сигнализирует об ошибке.

export const Button = styled.button ` 
background-color: $ props.bgcolor>; 
. other styles
`;

export const Button = styled.button ` 
background-color: $<(< bgcolor >) => bgcolor>; 
. other styles
`;

function App() return ( 
> 
 
Styled Button 
 
 
);
>

export const theme = color: primary: 'springGreen', 
>,
>;

export const Button = styled.button` 
background-color: $ props.theme.color.primary>; 
. other styles
`;

export const Button = styled.button` 
background-color: $<(< theme >) => theme.color.primary>; 
. other styles
`;

button className="btn">Clickbutton>

button.btn  font-size: 2em; background-color: black; color: white; >

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

npm install styled-components

yarn add styled-components

import styled from "styled-components"; const Button = styled.button` // тут стили `; render( div> Button> Button Button> div>, );

const Input = styled.input` font-size: 18px; padding: 10px; margin: 10px; background: papayawhip; border: none; border-radius: 3px; ::placeholder `; render( div> Input type="text" placeholder="Name" /> Input type="text" placeholder="Last Name" /> div>, );

const Button = styled.button` color: $(props) => (props.primary ? "white" : "palevioletred")>; background: $(props) => (props.primary ? "palevioletred" : "white")>; font-size: 20px; margin: 10px; padding: 5px 20px; border: 2px solid palevioletred; border-radius: 3px; `; render( div> Button> Normal Button Button> Button primary> Primary Button Button> div>, );

const Button = styled.button` color: palevioletred; font-size: 20px; margin: 10px; padding: 5px 20px; border: 2px solid palevioletred; border-radius: 3px; `; // Новый компонент на основе Button, но с новыми стилями const TomatoButton = styled(Button)` color: tomato; border-color: tomato; `; render( div> Button> Normal Button Button> TomatoButton>Tomato ButtonTomatoButton> div>, );

const Button = styled.button` font-family: monospace; display: inline-block; color: palevioletred; font-size: 18px; margin: 20px; padding: 10px 20px; border: 2px solid palevioletred; border-radius: 3px; display: block; text-decoration: none; `; const TomatoButton = styled(Button)` color: tomato; border-color: tomato; `; render( div> Button>Normal ButtonButton> Button as="a" href="/"> Link with Button styles Button> TomatoButton as="a" href="/"> Link with Tomato Button styles TomatoButton> div>, );

const Button = styled.button` // тут стили `; const ReversedButton = (props) => ( button . props> children=props.children.split("").reverse()> /> ); render( div> Button>Normal ButtonButton> Button as=ReversedButton>>Custom Button with Normal Button stylesButton> div>, );

// Это может быть ссылка Link с react-router-dom, например: const Link = ( className, children >) => ( a className=className>>children>a> ); const StyledLink = styled(Link)` color: palevioletred; font-weight: bold; `; render( div> Link>Unstyled, boring LinkLink> br /> StyledLink>Styled, exciting LinkStyledLink> div>, );

const Thing = styled.button` color: blue; ::before < content: "��"; >:hover `; render(Thing>Hello world!Thing>);

const Thing = styled.div` && `; const GlobalStyle = createGlobalStyle` div$Thing> `; render( React.Fragment> GlobalStyle /> Thing>I'm blue, da ba dee da ba daaThing> React.Fragment>, );