Highload — медіа для розробників
4.17K subscribers
5.59K photos
277 videos
18 files
6.48K links
Розповідаємо про людей, які створюють код, та про код, який вони пишуть.

Зв'язатися із редакцією можна тут: news@highload.today. А щодо розміщення реклами, будь ласка, пишіть на specials@highload.today.

Наш чат https://t.me/highloadchatt
Download Telegram
​​Как использовать Styled-Components в React

Styled-Components — библиотека, реализующая принцип CSS-in-JS для React.js. Преимущества ее использования: автоматическое добавление префиксов для разных браузеров, удаление неиспользованных стилей и независимость имен компонентов.

Установить библиотеку в проект очень просто. Например, с помощью команды менеджера пакетов Yarn: yarn add styled-components.

Импортируем библиотеку. Далее объявляем наш “стилизованный” компонент StyledButton. Присваиваем ему импортированный объект styled, после точки пишем нужный тег, в данном случае button, и в одинарных кавычках — обычные стили CSS.

Эти стили функциональны, их можно динамически менять. В примере по ссылке динамически меняется цвет кнопки с помощью тернарного оператора. Нужный цвет объявляется в атрибутах объявленного компонента уже внутри обычного React-компонента, у нас это Profile. Эти атрибуты записываются в специальную переменную props, которую можно использовать, в свою очередь, для динамического изменения стилей. Styled-Components рендерят обычные HTML-теги, а значит, они принимают стандартные атрибуты, такие как type="submit" для кнопки или события, например onClick.

Основано на статье: https://dev.to/paulmercieca/how-to-use-styled-components-in-react-54o5

#reactjs #styledcomponents #javascript