Библиотеки CSS-in-JS, такие как стилизованные компоненты, в последние годы стали более популярными. Они инкапсулируют CSS вплоть до уровня компонентов и позволяют использовать JavaScript для определения повторно используемых стилей.

Используя styled-components, вы можете поддерживать архитектуру, основанную на компонентах, которую React уже поддерживает. Но у библиотеки есть и недостатки.

Как работают стилизованные компоненты

стилизованные компоненты Библиотека CSS-in-JS позволяет вам писать CSS внутри ваших файлов компонентов. Его синтаксис такой же, как и в CSS, так что разобраться в нем довольно легко. Это идеальная золотая середина для разработчиков JavaScript, которые стараются держаться подальше от чистого CSS.

Чтобы увидеть, как это работает, рассмотрим следующий компонент Title, отображающий элемент h1.

константа Заголовок = стилизованный.h1`
размер шрифта: 1.5em;
 выравнивание текста: по центру;
 красный цвет;
`;

Вы можете использовать этот компонент, как и любой другой компонент React.

instagram viewer 
константа Главная = () => {
возвращаться (
<Заголовок>Стилизованный заголовок компонента</Title>
	)
}

Это также очень мощно, потому что упрощает работу с реквизитами и состоянием.

Например, цвет и фон этого компонента зависят от реквизита.

импорт стилизованный из "стилизованные компоненты";
константа Кнопка = стилизованная.кнопка`
набивка: 0.8рем 1.6рем;
 цвет фона: ${(реквизит) => (реквизит.первичный? "пурпурный": "белый")};
 граница: 1пиксели сплошные #00000;
 цвет: ${(реквизит) => (реквизит.первичный? "белый": "пурпурный")};
`;
экспортдефолтфункцияДом() {
 возвращаться <Кнопка первичная>Начальный</Button>
}

Со стилизованными компонентами вам не нужно вручную передавать реквизиты в CSS. Он доступен автоматически, упрощая стили написания, зависящие от данных компонента.

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

Вот некоторые преимущества использования библиотеки styled-components.

Это решает проблемы специфичности CSS

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

Позволяет писать CSS внутри компонентов

Как видно из примера компонента кнопки, styled-components позволяет комбинировать CSS и JS в одном файле. Таким образом, вам не нужно создавать отдельный файл CSS или постоянно переключаться с файла на файл.

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

Кроме этого, написание CSS внутри компонентов. Это упрощает обмен реквизитами и состояниями со стилями.

Позволяет проверять тип

Со стилизованными компонентами вы можете проверять свойства и значения, используемые в ваших стилях. Например, вы можете переписать компонент кнопки выше, используя TypeScript.

интерфейсреквизит{
 начальный: логический
}
константная кнопка = стилизованная.кнопка<реквизит>`
набивка: 0.8рем 1.6рем;
 цвет фона: ${(реквизит) => (реквизит.первичный? "пурпурный": "белый")};
 граница: 1пиксели сплошные #00000;
 цвет: ${(реквизит) => (реквизит.первичный? "белый": "пурпурный")};
`;

Использование TypeScript в компоненте означает проверку ошибок типов при написании кода и сокращение времени отладки.

Поддерживает тему из коробки

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

константа Кнопка = style.main`
 цвет фона: ${реквизит => реквизит.тема.свет.фон};
 цвет: ${реквизит => props.theme.light.fontColor};
`
<Тема ThemeProvider={тема}>
<Кнопка>
 Кнопка света
</Button>
</ThemeProvider>

Компонент ThemeProvider передает темы всем стилизованным компонентам, которые он обертывает. Затем эти компоненты могут использовать значения темы в своих стилях. В этом примере кнопка использует значения темы для фона и цвета шрифта.

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

Хотя использование библиотеки styled-components имеет много преимуществ, у нее также есть недостатки.

Это не зависит от фреймворка

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

Это требует времени и затрат. С использованием CSS-модули или независимая от фреймворка библиотека, такая как эмоция, более ориентирована на будущее.

Это может быть трудно читать

Различие между стилизованными компонентами и компонентами React может быть затруднено, особенно за пределами системы атомарного дизайна. Рассмотрим этот пример:

<Главный>
<навигация>
<Пункт списка>
<Текст ссылки>Принять питомца</LinkText>
</ListItem>
<Пункт списка>
<Текст ссылки>Пожертвовать</LinkText>
</ListItem>
</Nav>
<Заголовок>Прими, дон'магазин!</Header>
<ВторичныйBtnbtnText="Пожертвовать" />
</Main>

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

Например, компонент «Заголовок» может быть заголовком, но пока вы не проверите стили, вы никогда не узнаете, является ли это h1, h2 или h3.

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

В этом примере компонент заголовка может использовать тег h1.

<h1>Прими, дон'магазин!</h1>

Вы можете пойти дальше, определив стилизованные компоненты в другом файле (например, styled.js), который вы позже сможете импортировать в компонент React.

импорт * в качестве Стилизованный из './стиль'
// используем styled.components
<стилизованный. Главный>
// код
</styled.Main>

Это дает вам четкое представление о том, какие компоненты стилизованы, а какие являются компонентами React.

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

Для приложений, использующих стилизованные компоненты, браузер загружает CSS и анализирует его с помощью JavaScript, прежде чем внедрять их на страницу. Это вызывает проблемы с производительностью, поскольку пользователь должен загрузить много JavaScript при начальной загрузке.

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

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

Некоторым разработчикам нравится писать CSS в файлах JS, в то время как другие предпочитают иметь отдельные файлы CSS. То, как вы решите писать CSS, в конечном итоге должно зависеть от самого проекта и от того, что нравится вам или вашей команде. Стилизованные компоненты — хороший выбор для создания библиотеки пользовательского интерфейса, поскольку все они могут быть в одном файле и легко экспортироваться и использоваться повторно.

Если вы предпочитаете писать на чистом CSS, используйте модули CSS. У вас могут быть отдельные файлы CSS, и по умолчанию стили применяются локально. Независимо от того, какой выбор вы сделаете, очень важно иметь глубокие знания CSS.