В этой статье я покажу вам, как мы можем использовать перехватчики и контекст React для создания темной темы в пользовательском интерфейсе материалов.
Что такое контекст?
В типичном приложении React мы можем обмениваться данными между компонентами с помощью свойств, однако по мере роста приложения и добавления новых компонентов этот метод обмена данными между компонентами становится сложным и трудным в управлении.
Чтобы решить эту проблему, React представил Context. Контекст предоставляет способ, с помощью которого мы можем обмениваться данными между компонентами, без необходимости передавать реквизиты каждому компоненту вручную.
Создание приложения
Откройте терминал и создайте новое приложение для реагирования, используя следующие команды:
npx create-react-app myapp cd myapp yarn start
Это запустит локальный сервер разработки реакции по адресу http: // localhost: 3000
Установка зависимостей
установить материал пользовательского интерфейса, используя
yarn add @material-ui/core yarn add @material-ui/icons
Создание тем
В папке src создайте новый файл JavaScript с именем theme.js и вставьте в него следующий код:
Создание контекста темы
в папке src создайте новую папку хуки, внутри этой папки создайте новый файл JavaScript, themeContext.js
В этом файле будет храниться весь код для управления текущей темой.
Теперь вставьте следующий код в файл themeContext.js
Теперь откройте файл index.js и вставьте следующий код:
Теперь, чтобы переключить тему, мы можем создать компонент панели навигации внутри App.js, а затем вызвать функцию handleDarkMode внутри панели навигации.
Ниже приведена гифка, как выглядит окончательное приложение.
И все, надеюсь, у вас впереди отличный день !!
