Тема переключение в React Apps с использованием контекста API и в стиле компонентов

Автор оригинала: Manindu Wijewickrama.

(Первоначально опубликовано на jscircle.com )

CSS-in-JS стал одним из самых популярных вариантов для приложений в области реагирования в стиле. Компоненты в стиле (стилизованные компоненты) – очень популярная и широко используемая библиотека CSS-In-JS. В этом руководстве вы узнаете, как реализовать механизм коммутации темы в вашем приложении React, используя контекстные API и стилизованные компоненты.

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

Давайте начнем, создав новое приложение React React. В вашем терминале запустите следующую команду.

npx create-react-app theming

Войти в тематическое каталог проекта с помощью терминала и установки Стильные компоненты и Стильные иконки в качестве зависимостей.

yarn add styled-components styled-icons

Стильные иконки – это библиотека иконок, которая очень хорошо работает со стильными компонентами. Это коллекция различных значков пакетов, таких как материальные иконки, перо иконки, иконы Fontawesome и так далее. Мы собираемся использовать его, чтобы добавить пару значков в наше приложение позже.

Откройте проект, используя ваш любимый редактор кода. Внутри SRC Папка, создайте две папки по имени Компоненты и контексты Отказ Папка компонентов будет включать несколько компонентов, которые мы собираемся создавать. Папка Contexts будет включать в себя контексты RACT, которые мы собираемся создавать. Нам не нужны файлы CSS, которые поставляются с котельной, поскольку мы используем стилизованные компоненты для всех стилей. Удалить файлы app.css и index.css из проекта. Затем, откройте файлы app.js и index.js и удалите импорт CSS. Теперь у вас должна быть структура, как приведена ниже в вашей папке SRC.

Теперь мы можем запустить проект, запустив следующую команду в вашем терминале.

Теперь пришло время создавать некоторые компоненты. Внутри папки компонентов создайте файл с именем Title.js и добавьте код ниже.

import styled from "styled-components"; const Title = styled.h1` color: black;
`; export default Title;

Здесь мы только что создали наш первый стиль компонента с использованием библиотеки стилей компонентов. Этот компонент будет использоваться для отображения заголовка в нашем приложении. Синтаксис, STELLED.H1 просто означает, что мы устанавливаем тег H1 и создавая из него стилизованный компонент, который называется заголовка. Внутри Backticks мы можем написать любые CSS по мере необходимости. Наконец, мы экспортируем компонент, поэтому мы можем использовать его в других местах приложения.

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

import styled from "styled-components"; const ContentContainer = styled.div` display: flex; width: 100vw; height: calc(100vh - 60px); justify-content: center; align-items: center; background-color: white;
`; export default ContentContainer;

Создать другой файл с именем Topbar.js Внутри папки компонентов. Это просто контейнер для значков кликативы, которые мы собираемся использовать для переключения темы. Добавьте следующий код код в файл.

import React, { useContext } from "react";
import styled, { css } from "styled-components";
import { Sun, Moon } from "styled-icons/feather"; const Container = styled.div` width: "100%"; height: 60px; display: flex; justify-content: flex-end; align-items: center; padding-right: 30px; background-color: white;
`; const icon = css` color: black; cursor: pointer;
`; const StyledSun = styled(Sun)` ${icon}
`; const StyledMoon = styled(Moon)` ${icon}
`; const TopBar = () => { return (    );
}; export default TopBar;

Внутри Topbar.js мы импортируем две значки (солнце и луна) из стилей иконок. Затем мы добавляем их укладку на них, используя стиль компоненты. Наконец, внутри функции TOPBAR мы обертываем значок стильюма внутри контейнера в стиле компонента и экспортируйте компонент TOPBAR. На данный момент мы используем только один значок здесь. Позже мы вернемся к этому файлу и сделаем некоторые модификации.

Теперь пришло время добавлять все эти компоненты в App.js. Откройте файл App.js и удалите существующий код. Затем добавьте следующий блок кода в App.js.

import React from "react";
import ContentContainer from "./components/ContentContainer";
import Title from "./components/Title";
import TopBar from "./components/TopBar"; const App = () => { return ( <>      );
}; export default App;

Теперь, если вы посетите приложение внутри браузера, вы увидите что-то вроде этого.

Теперь у нас есть основная настройка UI для нашего приложения. Пришло время работать над тематической функциональностью. Чтобы переключить темы Betweem и отслеживать активную тему, мы собираемся использовать API API-контекста RACT. Внутри папки Contexts создайте файл с именем Themestore.js и добавьте следующий код.

import React, { useState } from "react"; const ThemeContext = React.createContext(); const ThemeStore = ({ children }) => { const [theme, setTheme] = useState("light"); const switchTheme = (theme) => setTheme(theme); return (  {children}  );
}; export { ThemeStore, ThemeContext };

В линия Мы создаем контекст с именем themecontext. В линия b Мы используем Usestate крючок, чтобы установить начальное состояние темы на «свет». Мы можем изменить состояние темы, вызвав функцию SetTheMe Updater. В очереди C мы объявляем функцию под названием SwitcheMee. Это функция, которую мы будем звонить, когда мы нажимаем на тему тумблер. Затем мы создаем функциональный компонент с именем Themestore, который принимает детей в качестве реквизита. Мы обертываем детей внутри . Затем мы устанавливаем значение TheContext, пройдя в целевой пример в IMECONTEXT.PROVIDER. Теперь значение TheContextext будет доступно от детей, которые были переданы. Это значение, которое мы только что прошли, является объектом, который имеет ссылки на функцию распределительной техники и состояние темы. Теперь, когда мы обертываем детей внутри …, они будут иметь доступ к функции распределительной сети и состояние темы.

Внутри папки SRC создайте файл с именем Theme.js. Это где мы создаем наши темы. Добавьте следующий импорт в верхнюю часть файла.

import React, { useContext } from "react";
import { ThemeProvider, createGlobalStyle } from "styled-components";
import { ThemeContext } from "./contexts/ThemeStore";

ThemeProvider – это компонент, который поставляется со стильными компонентами, которые позволяют легко реализовать темы легко в наших приложениях. Createglobalstyle – это функция, которая устанавливает глобальные стили для приложения, такого как сброс полей и площадков, установка размеров шрифта и т. Д., Затем мы импортируем их элемент, потому что в Theme.js нам нужно проверить текущее значение темы и передавать его в тематику Тема пропры

Теперь давайте объявляем наши темы и установите глобальные стили.

const themes = { dark: { background: "#272823", title: "#6495ed", text: "#fff", }, light: { background: "#fff", title: "#ff6347", text: "#000", },
}; const GlobalStyle = createGlobalStyle` * { margin: 0; padding: 0; transition: all 0.5s; }
`;

Мы только что создали две темы, темные и светлые. Каждый из цветов для фона, названия и текста. Затем мы применили несколько глобальных стилей, используя функцию CreateClobalStyle. Мы устанавливаем поля и прокладки до 0. Затем мы устанавливаем время перехода 0,5 секунды. Это мы даем нам гладкий эффект перехода при переключении между тем.

Наконец-то давайте создадим тему компонента и экспортируйте его.

const Theme = ({ children }) => { const { theme } = useContext(ThemeContext); return (   {children}  );
}; export default Theme;

Внутри функции сначала мы получаем текущее значение темы. Затем мы проходим в правильном теме объектом как тематическое опору темыпроводов. Все обернутое внутри темепроводов будет иметь доступ к выбранной теме. Итак, когда мы проходим в детских реквизитах в тематическую компонент, у тех детей будут доступ к текущей выбранной теме, поскольку мы обертываем их внутри темыпроводов.

Теперь мы можем обновить наше app.js, чтобы использовать тему и тему. Добавьте следующий код в файл App.js.

import React from "react";
import ContentContainer from "./components/ContentContainer";
import Title from "./components/Title";
import TopBar from "./components/TopBar";
import Theme from "./Theme";
import { ThemeStore } from "./contexts/ThemeStore"; const App = () => { return (         );
}; export default App;

Теперь все компоненты, которые обернуты внутри .. могут получить доступ к текущей теме объекта и использовать цвета. Поэтому пришло время обновить компоненты, которые мы создали ранее. Давайте начнем с TOPBAR.JS

Изменить контейнер фона-цвет от белого до $ {(реквизит) => ropps.theme.background} Отказ Затем измените цвет значка из черного до $ {(реквизит) => rops.theme.text} Отказ Теперь ваш код должен выглядеть так.

const Container = styled.div` width: "100%"; height: 60px; display: flex; justify-content: flex-end; align-items: center; padding-right: 30px; background-color: ${(props) => props.theme.background};
`; const icon = css` color: ${(props) => props.theme.text}; cursor: pointer;
`;

Теперь давайте обновим функцию TOPBAR.

const TopBar = () => { const { theme, switchTheme } = useContext(ThemeContext); return (  {theme === "dark" ? (  switchTheme("light")} /> ) : (  switchTheme("dark")} /> )}  );
};

Мы получаем тему состоянию и выключательную функцию из TheMeContext. Затем внутри блока возврата мы проверяем текущую тему и отображаю правильный значок. И, пропустите Listner OnClick каждому значку, чтобы установить тему, когда мы нажимаем на них. Нажатие на значок Солнца позволит легкому режиму. И нажатие на луну значок позволит темному режиму. Мы закончили с Topbar.js. Давайте отправимся на Title.js.

Внутри компонента title.js измените цвет, чтобы использовать заголовок цвет, который доступен в теме. Теперь код должен выглядеть так.

import styled from "styled-components"; const Title = styled.h1` color: ${(props) => props.theme.title};
`; export default Title;

Наконец, давайте изменим цвет фона в компоненте ContentContainer, чтобы использовать фоновое значение, которое устанавливается в тему. Результат будет.

import styled from "styled-components"; const ContentContainer = styled.div` display: flex; width: 100vw; height: calc(100vh - 60px); justify-content: center; align-items: center; background-color: ${(props) => props.theme.background};
`; export default ContentContainer;

Это это для этого учебника. Теперь вы можете нажать на значки Солнца и Луны, чтобы переключаться между светом и темными тем.

Вы можете найти окончательную версию кода на Гадость

Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать их в разделе «Комментарий» ниже 😊.