Всем здравствуйте! Я давно писал статью, и вот я здесь! Вы, должно быть, видели «Темный режим» в большинстве приложений в настоящее время. Некоторые приложения даже поддерживают полностью настраиваемую тему. Вы когда-нибудь задумывались, как работает тематика на ходу. Что ж, со стилизованными компонентами это довольно просто.
Стилизованные компоненты:
Styled-Components - это библиотека, которая с легкостью используется для стилизации ваших веб-приложений. Чтобы загрузить стилизованные компоненты, выполните: «npm install - save styled-components»
Давайте посмотрим на пример.
Допустим, вы хотите создать простой и многократно используемый компонент ‹Button /›, который можно использовать во всем приложении.
Эта переменная Button теперь является компонентом React, который вы можете использовать, как и любой другой компонент React! Вы можете стилизовать разные кнопки, то есть первичные и вторичные кнопки, а затем отображать их в любом месте, где захотите.
Прохладный! Теперь перейдем к тематике нашего веб-приложения.
Тематика:
Сохраните тему в одном месте. Всегда используйте центральное место для хранения информации, связанной с темой, например: Redux.
Половина работы уже сделана.
Провайдер темы
Styled-Components предлагает нам API под названием «поставщик тем».
Вспомогательный компонент для создания тем. Внедряет тему во все стилизованные компоненты в любом месте под ней в дереве компонентов через контекстный API.
Вот как это работает!
Здесь тема - это объект, который будет вставлен как тема во все интерполяции в стилизованных компонентах под поставщиком, к которым можно получить доступ через реквизиты, то есть this.props.theme.
Теперь, в соответствии со значением темы, предоставленным пользователем, мы изменим тему веб-приложения. Посмотрим как!
Теперь, если компонент подключен к Redux, мы можем получить тему из Redux и при изменении пользователем, он изменит состояние, и все приложение будет мгновенно повторно отрисовано с темной темой.
Для получения дополнительной информации о стилизованных компонентах и поставщике тем ознакомьтесь с их официальной документацией.
Вот и все, ребята! Спасибо, что прочитали это!
