Недавно я создал веб-сайт с Material UI и ReactJS. Я быстро понял, что мои описания цветов становятся хаотичными и непоследовательными. Изучив другие варианты, я остановился на этом чистом и эффективном способе определения и использования пользовательской цветовой схемы для всего приложения.
Создать и экспортировать тему
Я определил новый файл MaterialTheme.js в папке src, той же папке, в которой находились компоненты моего приложения. Используя createMuiTheme, мы создаем и экспортируем пользовательский объект Theme. Мой MaterialTheme.js файл:
Импорт и использование пользовательской темы
Используя MuiThemeProvider из Material UI, мы можем использовать пользовательские объекты Theme при стилизации компонентов. Просто импортируйте свой пользовательский объект темы и оберните свои компоненты JSX тегом MuiThemeProvider. Передайте импортированную тему в theme prop MuiThemeProvider.
Компоненты, заключенные в тег <MuiThemeProvider>, могут получить доступ к цветовым схемам. В этом примере компонент ColoredIcons содержит два других пользовательских компонента: TweetOptionsMenu и FlagMenu. Поскольку оба они заключены в <MuiThemeProvider>, я могу передать им цвета, которые я ранее определил в MaterialTheme.js как просто 'primary' ‘secondary’ или ‘blue’ .
