Styled Components

Опубликовано от

 Styled Components - это библиотека для React, которая позволяет писать стили в JavaScript файлах. 



Для того, чтобы работать с библиотекой необходимо установить в свой проект:

npm install styled-components

Файлы, которые будут использовать данную библиотеку должны импортировать стилизованные

компоненты:

import styled from 'styled-components';


Чем же хороша библиотека?

- Синтаксис.

При использовании стилизованных компонентов используется обычный CSS.

Единственное поменялось расположение. Раннее стили вы писали в *.css файлах, теперь в *.js.

const Button = styled.div`
  color: red;
`


- Очищение неиспользуемых стилей.


Стилизованные компоненты, которые объявлены в JS, но не используются в дальнейшем


удаляются.



-Классы


Нет необходимости думать о методологиях нейминга классов CSS.


Имена классов генерируются автоматически.

  
- Динамические стили

При передаче props в компонент, можно управлять стилем компонента. То есть пропадает необходимость в написании десятков классов.  

const Button = styled.div`
  color: ${props => props.primary ? "black" : "red"};

- Локализация.

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

Создадим первый компонент.

Создадим файл Button.js  с React-компонентом Button.  Импортируем необходимые зависимости React, styled-components

3
4
5
6
7
8
9
10
11
12
13
14
15
// Button.js
import React from 'react';
import styled from 'styled-components';

const WhiteButton = styled.button`
  color: white;
`
const Button = () => {
  return (
    <WhiteButton >White button</WhiteButton>
  )
}
export default Button;

Объявление стилизованного компонента не отличается от объявления компонента функционального компонента React.
const WhiteButton

Далее мы используем HTML элементы как стилизованные компоненты. Для этого мы перед тэгом button пишем styled, тем самым используем импортированный функционал. WhiteButton возвращает React-компонент, который можно использовать в сложно устроенном компоненте.

Использование свойств

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

<WhiteButton isRemove>White button</WhiteButton>

const WhiteButton = styled.button`
  border: 1px solid ${props => props.isRemove ? "red" : "white" }

`

Наследование

Стилизованные компоненты могут наследовать стили от других компонентов. Это позволяет
избавиться от лишнего дублирования кода. Объявить более простые элементы типичные
вашему проекту и наследовать их стили для добавления новых отличительных компонентов.

const Text= styled.button`
 font-size: 12px;

`
const GeneralText= styled(Text)`
 color: blue;

`

Использование CSS

Можно создавать фрагменты CSS, которые будут использоваться внутри компонента.
Это позволяет упростить компонент, не используя наследование.

import styled, {css} from 'styled-components';

const fontStyles = css`
  font-size: 12px;
`
const Text2 = styled.p`
color: blueviolet;
 ${fontStyles}
`
Заключение
Styled-components позволяет добавлять гибкость коду, избавляться от дублирования фрагментов кода. Позволяет удобно стилизовать React компоненты.