В этом руководстве мы обсудим, как настроить внешний вид приложения (панель приложений, нижний колонтитул, главный компонент) таким образом, чтобы предоставить нам механизм для настройки (добавить, опустить,… объяснено позже 😅). Кроме того, мы обсуждаем важную функцию React, называемую Контекст, и то, как Material-UI использует ее, чтобы предоставить разработчику интерфейс для настройки пользовательской темы (или даже переключатель тем в качестве дополнительной функции 😱).
Шаг 01: точка входа (index.js и index.html)
Если вы помните из Учебника №4, мы упомянули index.js как точку входа в webpack.common.js. Это означает, что все приложение должно загружаться из этого файла в папке src. Кроме того, нам нужен html-файл, в который будет загружено содержимое пакетного приложения. Итак, мы создаем два файла index.js & index.html в каталоге src как: -
Это загружает все приложение (из ./app, которое мы сейчас создадим 😉) в <div id="app"> часть html-файла. Важно отметить, что оба файла должны находиться вместе прямо в каталоге src.
Шаг 02: Создайте структуру каталогов пользовательского интерфейса
Создайте следующие файлы в соответствии со структурой каталогов, представленной ниже (|---- означает родительский каталог):
src
|----app
|----ui
|----layout
|-----theme
|----index.js (of ui directory)
|----index.js (of app directory)
index.js (of src directory)
index.html
Каталог layout должен содержать еще 3 каталога, а именно appbar, footer, main. Каждый из этих подкаталогов состоит из index.js файла. Каталог макета также состоит из отдельного файла index.js, который вместе импортирует appbar, footer, main для формирования макета. Содержимое панели приложений показано ниже. Вы можете просмотреть содержимое других файлов, клонировав репозиторий Github и следуя инструкциям в каталоге.
В файле layout/index.js мы видим, что передается опора конфигурации с ключами: config.appbar.display, config.appbar.links, config.footer.display и т. Д. Это требуется для настройки на основе представления, где мы хотим отображать панель приложения, нижний колонтитул (даже их содержимое, как в ссылки) и т. д. в соответствии с представлением (например, читатель, администратор, страница входа). Например, на многих веб-сайтах на странице входа / регистрации нет панели приложений или нижнего колонтитула:
Шаг 03: Реагируйте на контекст и тематику с помощью MuiThemeProvider
В типичном приложении React данные передаются сверху вниз (от родительского к дочернему) через реквизиты, но это может быть обременительным для определенных типов реквизитов, которые необходимо передавать глобально всем компонентам. например (настройки приложения, тема пользовательского интерфейса). Представьте себе передачу свойства темы кнопке, вложенной на 1000 уровней ниже корневого компонента 😵. React представил функцию Context для решения этой проблемы, которая подробно объясняется здесь. Material-UI имеет MuiThemeProvider (компонент контекста React в своей основе) для настройки тем для всех компонентов (Button, TextField и т. д.). Мы используем его в нашем приложении следующим образом:
Мы создаем наш собственный объект темы, используя createMuiTheme, где мы можем настраивать параметры по умолчанию, такие как palette, typography, props и т. Д., Или даже создавать новые. Наконец, мы передаем созданную тему MuiThemeProvider для глобального применения ко всем компонентам, вложенным в нее. Обратитесь к Тематической документации, чтобы более подробно разобраться в тематике и настройке Material-UI. Чтобы наблюдать за темами в действии, вставьте следующий код в app/index.js:
Как мы видим на изображениях выше, изменяя значения темы по умолчанию в файле themes.js, мы можем управлять внешним видом компонентов (здесь кнопка) глобально для страниц. Расширенные варианты использования могут реализовывать сам переключатель тем. Хитрость заключается в том, чтобы загрузить другую тему (светлая / темная) в <MuiThemeProvider theme={newTheme}> при нажатии кнопки или около того.
Для регулярных обновлений и других блогов этой серии руководств. Вы можете подписаться на - Страница React DJ на Facebook
Наша серия учебных пособий в настоящее время организована по адресу - srplabs.in.
Введение в серию руководств вы можете прочитать: Создание практических веб-приложений с помощью React и Django
📝 Прочтите этот рассказ позже в Журнале.
🗞 Просыпайтесь каждое воскресное утро и слышите самые интересные истории, мнения и новости недели, ожидающие в вашем почтовом ящике: Получите примечательный информационный бюллетень›
