Если посмотреть на общую цель React, он создает быстрые, масштабируемые веб-сайты, которые управляют небольшими частями пользовательского интерфейса. Эти компоненты. определяют функциональность, делая их многоразовыми. Имея это в виду, не облегчило бы жизнь, если бы был способ стилизовать компоненты так, чтобы эти стили также можно было использовать повторно?
К счастью, реактивные стилизованные компоненты были созданы именно для этой цели. React styled-components — это среда JavaScript и CSS, которая позволяет писать стили внутри компонента, а не ссылаться на таблицу стилей CSS.
Встроенный стиль в React имеет свои ограничения, такие как невозможность разрешить медиа-запросы или проблемы с совместимостью браузера. Стилизованные компоненты заботятся об этих и многих других проблемах. Styled-components также совместимы с React-Native.
Styled-components работают с преимуществом стиля области действия, которое позволяет стилям влиять только на то, что предназначено. Способ, которым вы начинаете использовать styled-components, заключается в его установке:
В компоненте, который нужно стилизовать, импортируйте styled из styled-components. Чтобы создать стилизованный элемент, вам нужно объявить переменную, равную элементу, который вы хотите стилизовать. Внутри этого объявления могут быть определены предпочтительные стили.
После того, как компонент создан, его легко повторно использовать по своему усмотрению.
