Как писать стили в react

5 подходов к стилизации React-компонентов на примере одного приложения

Сегодня я хочу поговорить с вами о стилизации в React.

Почему данный вопрос является актуальным? Почему в React существуют разные подходы к работе со стилями?

Когда дело касается разметки (HTML), то React предоставляет в наше распоряжение JSX (JavaScript и XML). JSX позволяет писать разметку в JS-файлах — данную технику можно назвать «HTML-в-JS».

Однако, когда речь идет о стилях, то React не предоставляет каких-либо специальных инструментов (JSC?). Поэтому каждый разработчик волен выбирать такие инструменты по своему вкусу.

Всего можно выделить 5 подходов к стилизации React-компонентов:

• Глобальные стили — все стили содержатся в одном файле (например, index.css)
• Нативные CSS-модули — для каждого компонента создается отдельный файл со стилями (например, в директории «css»); затем эти файлы импортируются в главный CSS-файл (тот же index.css) с помощью директивы «@import»
• «Реактивные» CSS-модули (данная техника используется не только в React-проектах; «реактивными» я назвал их потому, что библиотека «css-modules» в настоящее время интегрирована в React, т.е. не требует отдельной установки, по крайней мере, при использовании «create-react-app») — для каждого компонента создается файл «Component.module.css», где «Component» — название соответствующего компонента (обычно, такой файл размещается рядом с компонентом); затем стили импортируются в JS-файл в виде объекта, свойства которого соответствуют селекторам класса (например: import styles from ‘./Button.module.css’; >Нажми на меня)
• Встроенные («инлайновые») стили — элементы стилизуются с помощью атрибутов «style» со значениями в виде объектов со стилями (например, >>Нажми на меня)
• «CSS-в-JS» — библиотеки, позволяющие писать CSS в JS-файлах; одной из таких библиотек является «styled-components»: import styled from ‘styled-components’; const Button = styled`какой-то css`; Нажми на меня

Шпаргалку по использованию библиотеки «styled-components» можно найти здесь. Возможно, вам также интересно будет взглянуть на шпаргалку по хукам.

Ну, а худшим подходом, по моему мнению, являются встроенные стили. Стоит, однако, отметить, что определение объектов со стилями перед определением компонента и последующее использование этих объектов напоминает CSS-в-JS, но остаются «camelCase-стиль», атрибуты «style» и сами встроенные стили, которые затрудняют инспектирование DOM.

Предлагаю вашему вниманию простое приложение-счетчик, реализованное на React, в котором последовательно используются все названные подходы к стилизации (за исключением встроенных стилей).

Выглядит приложение так:

Приложение состоит из трех компонентов: Title — заголовок, Counter — значение счетчика и информация о том, каким является число: положительным или отрицательным, четным или нечетным, Control — панель управления, позволяющая увеличивать, уменьшать и сбрасывать значение счетчика.

Структура проекта следующая:

|--public |--index.html |--src |--components |--Control |--Control.js |--Control.module.css |--package.json |--styles.js |--Counter |--Counter.js |--Control.module.css |--package.json |--styles.js |--Title |--Title.js |--Title.module.css |--package.json |--index.js |--css |--control.css |--counter.css |--title.css |--App.js |--global.css |--index.js |--nativeModules.css |--reactModules.css . 

Пройдемся по некоторым файлам, находящимся в директории «src»:

• index.js — входная точка JavaScript (в терминологии «бандлеров»), где импортируются глобальные стили и рендерится компонент «App»
• App.js — основной компонент, где импортируются и объединяются компоненты «Control», «Counter» и «Title»
• global.css — глобальные стили, т.е. стили всех компонентов в одном файле
• nativeModules.css — файл, где импортируются и объединяются нативные CSS-модули из директории «css» (control.css, counter.css и title.css)
• reactModules.css — глобальные стили для «реактивных» CSS-модулей
• components/Control/Control.js — три реализации компонента «Control» (с глобальными стилями/нативными CSS-модулями, c «реактивными» CSS-модулями и стилизованными компонентами), а также пример объекта со встроенными стилями
• components/Control/Control.module.css — «реактивный» CSS-модуль для компонента «Control»
• components/Control/styles.js — стилизованные компоненты для компонента «Control» (когда стилизованных компонентов много, я предпочитаю выносить их в отдельный файл)
• components/Control/package.json — файл с «main»: «./Control», облегчающий импорт компонента (вместо import Control from ‘./Control/Control’ можно использовать import Control from ‘./Control’
• components/index.js — повторный экспорт, позволяющий разом импортировать все компоненты в App.js

Благодарю за внимание и хорошего дня.

• Веб-разработка
• JavaScript
• Программирование
• ReactJS

10 способов стилизации React-приложений

React — это библиотека для создания пользовательских интерфейсов, она не имеет собственного подхода к стилизации. Это и хорошо, и плохо одновременно. Разработчик может выбрать любой способ, однако сделать этот выбор совсем непросто.

В этой статье мы разберем 10 различных способов добавления стилей в React-приложение:

Инлайн-стили

Инлайн-стили указываются прямо на самом DOM-элементе в атрибуте style. Мы можем передавать их в JSX в виде объекта, что удобнее, чем перечисление в строке через точку с запятой.

import React from "react"; const container = < padding: 12, background: 'red' >const Homepage = () => < return ( 
> 
Welcome to React
 
This is a simple homepage
 
 ); >; export default Homepage;

Внешние таблицы стилей

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

Создаем обычную таблицу стилей:

.container

И импортируем ее в компонент:

 import React from "react"; import "homepage.css"; const Homepage = () => < return ( 
Welcome to React
 
This is a simple homepage





 
 ); >; export default Homepage;

Утилита create-react-app также добавляет PostCSS-обработку стилей.

CSS-модули

CSS-модули решают проблему изоляции стилей, создавая уникальное имя для каждого класса.

Create-react-app поддерживает работу с CSS-модулями.

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

// homepage.module.css .container < padding:12px; background:red; >// contactpage.module.css .container

Импортируем нужный файл в компоненте:

import React from "react"; import styles from "./homepage.module.css"; // Импорт CSS-модуля import "./another-stylesheet.css"; // Импорт обычного файла стилей const Homepage = () => < return ( 
> 
Welcome to React
 
This is a simple homepage
 
 ); >; export default Homepage;

CSS-препроцессоры

Мы можем использовать Sass, Scss, Less, Stylus и другие препроцессоры CSS в React-приложениях, используя специальные лоадеры для Webpack. К сожалению, они не поддерживаются в Create-react-app из коробки.

Например, чтобы использовать Scss или Sass нам нужно установить node-sass:

npm i node-sass

Styled Components

Пакет styled-component позволяет писать стили как обычный CSS-код, пользуясь при этом всеми преимуществами JS.

Перед началом работы нужно установить npm-модуль:

npm i styled-components 

Стили создаются прямо в файле компонента:

 import React from "react"; import styled from "styled-components"; const Container = styled.div` padding: 12px; background: red; `; const Homepage = () => < return ( 
Welcome to React
 
This is a simple homepage
  ); >; export default Homepage;

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

React JSS

JSS позволяет писать CSS прямо в JS декларативно, без конфликтов и с возможностью переиспользования.

Установите react-jss с помощью npm:

npm i react-jss 

Стили создаются с помощью функции createUseStyles :

import React from "react"; import < createUseStyles >from "react-jss"; const useStyles = createUseStyles(< container: < padding: "20px", backgroundColor: "red" >, button: < backgroundColor: "green", color: "white" >>); const Homepage = () => < const classes = useStyles(); return ( 
> 
Welcome to React
 
This is a simple homepage
 
 ); >; export default Homepage;

Для применения стилей используйте хук useStyles .

Radium

Radium — это набор инструментов для создания инлайновых стилей с помощью JavaScript. Radium использует tree-shaking для удаления неиспользуемого кода.

JavaScript не дает возможности использовать псевдоселекторы вроде :hover, :focus и т. д. Radium решает эту проблему.

Сначала установите модуль radium:

npm i radium 

А затем просто пишите нужные стили:

import React from "react"; import Radium from 'radium'; const Homepage = () => < const style = < padding:"12px", background:'red', ":hover":< background:'blue' >> return ( 
> 
Welcome to React
 
This is a simple homepage
 
 ); >; export default Radium(Homepage);

Перед экспортом оберните ваш компонент в декоратор Radium .

React Shadow

React Shadow создает теневой DOM (Shadow DOM), что дает возможность использовать все плюшки инкапсуляции стилей.

Установка React Shadow из npm:

npm i react-shadow 

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

import React from "react"; import root from "react-shadow"; import styles from "homepage.css"; const Homepage = () => < return (  
Welcome to React
 
This is a simple homepage
 
  ); >; export default Homepage;

JSX Style

jsxstyle — это инлайновая система стилей для React и Preact, которая предоставляет максимально удобный для разработчика способ стилизовать компоненты без ущерба для производительности приложения.

npm i jsxstyle

import React from "react"; import < Block >from "jsxstyle"; const Homepage = () => < return ( backgroundColor="#f5f5f5" borderRadius=> 
Welcome to React
 
This is a simple homepage





  ); >; export default Homepage;

Утилитарные фреймворки

Утилитарные CSS-фреймворки предназначены для того, чтобы писать стили без CSS. Самый известный из них — tailwindcss.

Create-react-app не поддерживает tailwindcss из коробки, поэтому нам нужно использовать расширенные версии этой утилиты, например, CRACO.

Более подробная информация — в официальной документации.

import React from "react"; const Homepage = () => < return ( 
Welcome to React
 
This is a simple homepage





 
 ); >; export default Homepage;

Какой способ стилизации React-приложений используете вы?

Лучшие практики стилизованных компонентов React

Приведённые в статье советы и рекомендации должны помочь вам грамотно использовать стилизованные компоненты React.

От переводчика

В данной статье, автор Robin Wieruch раскрывает тему использования пакета styled-components в контексте React приложений. Рассматриваются различные подходы к использованию стилизации, приводятся рекомендации, полученные из практического опыта реализации проектов. В переводе используется русский вариант названия styled-components — «стилизованные компоненты».

1. Введение
2. Совместно расположенные стилизованные компоненты
3. Импорт стилизованных компонентов как объекта
4. Один/множество стилизованных компонентов
5. Пропсы или классы для стилизованных компонентов
6. Лучшие практики использования пропсов в стилизованных компонентах
7. Заключение

Введение

При работе нескольких разработчиков над одним React-приложением, всегда полезно нацеливать команду на работу с общим набором лучших практик. Это утверждение также правдиво для стилизации компонентов React. За последние годы мне посчастливилось работать со многими фриланс-разработчиками React над различными приложениями, где нам приходилось выстраивать лучшие практики на протяжении всего проекта. Хотя, конечно, были приложения стилизованные с использованием CSS-in-CSS (например, CSS-модули) или Utility-first CSS (например, Tailwind), вероятность работы со стилизованными компонентами (CSS-in-JS) была довольно высокой, потому что это один из самых популярных стилистических подходов.

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

5 современных способов создания анимации в React

Совместно расположенные стилизованные компоненты

Самое замечательное в стилизованных компонентах и CSS-in-JS в целом — то, что CSS определен в файлах JavaScript. Начиная работу со стилизованными компонентами вы часто будете просто определять стилизованный компонент рядом с вашим фактическим компонентом React:

const Headline = styled.h1` color: red; `; const Content = (< title, children >) => < return (  ); >; 

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

До тех пор, пока файл JavaScript остаётся небольшим, можно хранить стилизованные компоненты рядом с фактическими компонентами в одном файле. Некоторые разработчики предпочитают чтобы фактический компонент был вверху, а стилизованный компонент внизу, что возможно из-за “поднятия” (hoisting) JavaScript:

const Content = (< title, children >) => < return (  ); >; const Headline = styled.h1` color: red; `; 

При увеличении размера файла компонента я и моя команда всегда перемещали стили в другой файл рядом с фактическим файлом компонента. Это всегда отличная возможность вывести структуру папок вашего проекта React на новый уровень. Вы часто будете встречать схожие варианты каталога компонента:

- Section/ --- index.js --- styles.js 

Такой подход по-прежнему помещает стилизованные компоненты рядом с вашим фактическим компонентом, однако теперь они находятся не в одном файле, а в одном каталоге. Следуя этому подходу вы и ваша команда по-прежнему получаете те же преимущества, что и при совместном размещении ваших стилей и компонентов React в одном файле; также есть дополнительные преимущества.

Во-первых, меньше помех для разработчиков React, потому что они могут сосредоточиться либо на деталях реализации фактического компонента, либо на его стиле. Во-вторых, это помогает разработчикам, которые привыкли работать с CSS-in-CSS, принять стратегию работы с CSS-in-JS, по-прежнему работая с совместно размещенными файлами стилей. В-третьих, разработчики могут сохранять высокую степень уверенности в своем коде и в том, что они не нарушают другие стили, потому что всё хранится в одном каталоге компонентов.

В качестве примечания: если вы встретите дубликаты стилей в стилизованных компонентах, рассмотрите возможность использования служебной функции css стилизованных компонентов:

import styled, < css >from 'styled-components'; const red = css` color: red; `; const Headline = styled.h1` $ font-size: 20px; `; const Text = styled.p` $ font-size: 16px; `; 

И последнее, но не менее важное: что должно произойти, если вы захотите использовать стилизованный компонент в нескольких фактических компонентах? Ответ такой же, как и для любого другого компонента React: сохраняйте стили в каталоге более высокого уровня, откуда он может быть импортирован более чем одной папкой компонента. Если вы меняете стиль стилизованного компонента, проверьте все фактические компоненты которые его импортируют. Если ни один компонент больше не использует стиль, удалите стилизованный компонент из каталога верхнего уровня. Если вы хотите использовать глобальные стили, вы можете применить служебную функцию стилизованных компонентов createGlobalStyle .

Способы передачи данных между компонентами в React

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

Размещение стилизованных компонентов в дополнительном файле JavaScript рядом с файлом фактического компонента в конечном итоге становится обычной практикой для растущих приложений React. Следующий шаблон для импорта стилизованных компонентов должен быть хорошо знаком разработчикам:

import < Headline >from './styles'; const Content = (< title, children >) => < return (  ); >; 

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

Импорт всего содержимого файла как объекта часто имеет больше преимуществ:

import * as Styled from './styles'; const Content = (< title, children >) => < return (  ); >; 

Разработчики стремятся импортировать все свои стили либо с помощью имени Styled, либо в еще более краткой форме, установленной в соглашениях об именах:

import * as S from './styles'; const Content = (< title, children >) => < return (  ); >; 

Импорт стилизованных компонентов таким образом дает три преимущества: во-первых, ваш оператор импорта простой, краткий и везде одинаковый. Во-вторых, чтобы предоставить новый стилизованный компонент из вашего файла стилей требуется только именованный экспорт из этого файла. И в-третьих, при согласовании командой общей структуры именования для объектов стилей, стилизованные компоненты в JSX-разметке вашего компонента React становятся более очевидными.

В заключение, при импорте стилизованных компонентов с именованным импортом часто проект придёт к тому, что будет несколько соглашений об именах для таких компонентов (обычно называемых StyledHeadline или Headline), которые не всегда согласуются друг с другом. Если ваша команда с самого начала придерживается одного соглашения об именах, плохих подходов легче избежать при импорте всего содержимого файла, чем при импорте каждого компонента по отдельности.

Один/множество стилизованных компонентов

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

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

const Section = styled.section` border-bottom: 1px solid grey; padding: 20px; `; const Headline = styled.h1` color: red; `; const Text = styled.span` padding: 10px; `; const Content = (< title, children >) => < return (  ); >; 

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

На другой стороне спектра несколько сторонников согласились с использованием только одного корневого компонента (обычно называемого Container или Wrapper), а все остальное становится CSS. Обычно этот подход предпочитают разработчики более опытные в CSS, поскольку они используют все преимущества CSS (и его расширений). Он также сохраняет JSX-разметку более чистой с помощью использования HTML (семантически) и CSS вместо повсеместного использования компонентов.

const Container = styled.section` border-bottom: 1px solid grey; padding: 20px; h1 < color: red; >.text < padding: 10px; >`; const Content = (< title, children >) => < return (  ); >; 

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

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

Пропсы или классы для стилизованных компонентов

Ранее я упоминал, что разработчики больше склоняются к использованию JavaScript, чем CSS. Вы часто можете заметить это, когда пропсы React или класс CSS используются также для стилизованного компонента. Давайте рассмотрим следующий пример, где мы могли бы использовать пропсы или класс.

Мы начнем с класса CSS:

import styled from 'styled-components'; import cs from 'classnames'; . const Text = styled.span` padding: 10px; &.invalid < text-decoration: line-through; >`; const Content = (< title, isStrikeThrough, children >) => < return ( 
 )>>
 ); >; 

В качестве примера использования пропсов React, рассмотрим код ниже:

. const Text = styled.span` padding: 10px; text-decoration: $ props.invalid ? 'line-through' : 'none'>; `; const Content = (< title, isStrikeThrough, children >) => < return ( 
 >
 ); >; 

Любой способ работает, и ваша команда должна решить, что лучше подходит для вас и проекта. Однако мне нравится применять первый подход с использованием класса CSS, хотя он кажется менее популярным и даже несмотря на то, что для его чистоты часто требуется служебная библиотека имён классов.

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

В конце концов, я не против использования пропсов React для стилей, я просто за их использование в определённых ситуациях. Я бы рекомендовал использовать пропсы только если необходим динамический стиль:

const Headline = styled.h1` color: $ props.color>; `; const Text = styled.span` padding: 10px; &.invalid < text-decoration: line-through; >`; const Content = (< title, isStrikeThrough, color, children >) => < return ( 
> )>>
 ); >; 

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

Лучшие практики использования пропсов в стилизованных компонентах

Я вижу несколько лучших практик использования пропсов для динамического стиля в стилизованных компонентах. Во-первых, используйте короткое имя параметра или сразу же деструктурируйте его. Здесь применяются те же правила, что и для функциональных компонентов в React, потому что пропсы почти никогда не используются напрямую, вместо этого мы хотим использовать их содержимое:

const Headline = styled.h1` color: $ p.color>; `; const Text = styled.span` padding: $<(< padding >) => padding>px; `; 

Далее желательно использовать временные свойства со стилизованными компонентами, потому что они приносят нам двойную пользу: во-первых, такой подход использует пропс только в стилизованном компоненте, и таким образом пропс не будет передан HTML-элементу как атрибут. Во-вторых, такой подход явно даёт понять каждому разработчику, при чтении JSX React, какие пропсы используются стилизованным компонентом, а какие пропсы использует DOM:

const Button = styled.button` color: $ p.$color>; `; const ClickMe = (< color, disabled, onClick >) => < return ( disabled= onClick= > Click Me ); >; 

И последнее, но не менее важное: используйте полиморфные свойства, если вы хотите изменить HTML-элемент, лежащий в основе вашего стилизованного компонента. Например, для кнопки которая должна быть просто ссылкой на другой URL-адрес, вы можете, в зависимости от условий, назначить другой элемент HTML:

const ClickMe = ( < to = '', onClick = () =><> >) => < return ( to= onClick= > Click Me ); >; 

В API стилизованных компонентов есть несколько скрытых ошибок, поэтому учтите их все, чтобы получить максимум пользы. Также имеет смысл изучить особенности вместе со всей командой, чтобы выработать согласованные способы работы.

Заключение

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

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

Styled Components — стилизация React-приложений

Сегодня мы рассмотрим удобную библиотеку для React – Styled Components. Она предназначена для реализации стилей в JavaScript файлах на основании входных данных React-компонентов — пропсов (props).

Експертний курс від mate.academy: Fullstack Web Development.
Відкрийте світ розробки у свій вільний час.

Особенности Styled Components

React — это отличный способ писать большие и быстрые JavaScript-приложения. При разработке динамических приложений c этим инструментом часто приходится стилизовать контент. По ряду причин использование стандартных средств CSS для этого не совсем удобно. Библиотека Styled Components дает возможность выполнить стилизацию React-приложения, упростив и ускорив написание кода. Styled Components позволяет работать со стилями прямо в JavaScript — это компонент, который в стиль подсовывает функцию от каких-то аргументов. В Styled Components вы обращаетесь к функции и она, по сути, может делать что угодно, возвращая любое строковое значение для стиля этого компонента.

Преимущества и недостатки Styled Components в React-приложениях

Ранее, до появления Styled Components, если нужно было сделать динамические стили, их нужно было выносить в inline или писать много className. Но с этой библиотекой вы больше не стилизуете элементы HTML или компоненты на основании их класса или HTML-элемента. Отпадает необходимость в тернарных операторах, нет надобности прибегать к className . Вместо этого используются пропсы внутри компонент, с указанием стилей, а классы генерируются автоматически (к слову, проблема коллизии имен отсутствует как таковая). Обращение к стилям CSS происходит прямо в JavaScript, благодаря чему им легко управлять, он понятен, нет необходимости учить какой-то дополнительный синтаксис.

Стили легко отслеживать. Предположим, вы написали какой-то компонент, а затем его убрали, а стили остались – от них нужно избавиться, чтобы они лишний раз не грузились на клиент. Такая проблема со Styled Components решается автоматически — удалили компонент, удалились стили. Также к преимуществам Styled Components можно отнести наличие серверного рендеринга и модульных тестов.

Інноваційний курс від robotdreams: Android Developer.
Творіть для мобільного світу.

Очевидный недостаток Styled Components – привязка к React. Кроме того, зарезервированные названия (height, width, background-color и пр.) мы не должны использовать как входные данные React-компонентов. Еще один минус данной библиотеки – стили не сохраняются в кеше, стиль появляется только тогда, когда исполняется JavaScript. Это несколько влияет на производительность.

Установка Styled Components

Для начала разберемся с установкой Styled Components. Ее можно выполнить одной командой в командной строке:

# менеджер пакетов npm

npm install —save styled-components