Как использовать 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
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
