Создать собственную цветовую тему для вашего следующего проекта React легко
Недавно я начал использовать Material-UI для всех своих проектов на React и наслаждался тем, насколько просто создавать красивые интерфейсы. В этой статье я хочу объяснить, как начать работу с Material-UI и настроить тему цветовой палитры для использования в вашем следующем проекте.
Что такое Material-UI?
Material-UI - это фреймворк React UI, который следует принципам материального дизайна. Материальный дизайн - это дизайн-система, созданная Google. Если вам интересно узнать больше о Material Design, посмотрите видео ниже.
Что мне нравится в Material-UI, так это то, что он упрощает настройку. Вы можете легко изменить цвета, типографику, интервалы и многое другое в отдельных компонентах или глобально, настроив тему. Давайте начнем!
Начиная
Во-первых, я предполагаю, что вы можете настроить базовое приложение для реагирования. Самый простой способ - использовать приложение create-react-app. После того, как вы настроили базовое приложение, нам нужно установить основной пакет Material-UI. Откройте свой терминал и запустите следующий код.
// with npm npm install @material-ui/core // with yarn yarn add @material-ui/core
Затем мы хотим очистить код из нашей папки src. Удалите файлы CSS и очистите файл App.js. Ваш файл App.js должен выглядеть примерно так.
import React from 'react';
const App = () => {
return (
<div>App</div>
);
}
export default App;
Какая тема по умолчанию?
Material-UI имеет тему по умолчанию, которая устанавливает значения по умолчанию для точек останова, типографики, цветовой палитры и многого другого. Значение, которое нас здесь интересует, - это палитра. В объекте палитры есть вложенные объекты для первичного и вторичного, а внутри каждого объекта есть свойства light, main, dark и contraText.
Вы увидите, что основная основная палитра по умолчанию установлена на голубоватый цвет (# 3f51b5), а основная вторичная палитра по умолчанию установлена на розоватый цвет (# f50057). Это значения, которые мы будем игнорировать.
Создание темы с помощью createMuiTheme
Следующим шагом будет создание собственной темы. В свой файл App.js импортируйте createMuiTheme и ThemeProvider (мы будем использовать это в следующем разделе) из ‘@ material-ui / core’. Затем мы создадим тему, вызывающую функцию createMuiTheme. В функции мы передадим объект в качестве аргумента и установим основное значение для первичной и вторичной цветовых палитр. Это переопределит тему по умолчанию и установит новую цветовую палитру для нашего проекта. Вам нужно только установить основной цвет, так как Material-UI автоматически установит для нас светлые и темные цвета на основе значения основного цвета. Это будет выглядеть примерно так.
import { createMuiTheme, ThemeProvider } from '@material-ui/core';
const theme = createMuiTheme({
palette: {
primary: {
main: "HEXADECIMAL COLOR"
},
secondary: {
main: "HEXADECIMAL COLOR"
}
}
});
Обратите внимание, что в документации по Material-UI показан пример импорта фиолетового и зеленого цветов из основного пакета Material-UI. Это еще один способ установить цвет, но я считаю, что использование шестнадцатеричного значения было для меня более простым подходом.
import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';
const theme = createMuiTheme({
palette: {
primary: {
main: purple[500]
},
secondary: {
main: green[500]
}
}
});Вот самое интересное! Выберите два цвета, которые вы хотите использовать в качестве основного и дополнительного цветов для своего приложения. Этот инструмент цвета от Material.io помог мне в выборе правильных цветов. Он покажет вам примеры того, где и когда будут использоваться первичный и вторичный цвета, и вы сможете получить визуальное изображение совместной работы цветовой схемы. Поиграйте с ним, пока не найдете два цвета, которые хотите использовать.
Выбрать подходящую цветовую палитру для вашего приложения непросто. Если вы только начинаете, я рекомендую выбирать цвета, которые вам нравятся и которые, по вашему мнению, выглядят хорошо, и не тратить слишком много времени на то, чтобы поначалу беспокоиться об этом. Настроив тему таким образом, вы сможете легко изменить цветовую схему позже в вашем проекте, если вы захотите это сделать.
Если вы похожи на меня и не очень хороши в дизайне и выборе эффективной цветовой палитры, вот статья, которая может дать вам некоторое представление о выборе правильных цветов для вашего веб-сайта.
Использование компонента ThemeProvider
Теперь, когда вы выбрали цветовую палитру и создали тему, пришло время внедрить тему в свой проект. Мы можем сделать это с помощью компонента ThemeProvider. Компонент ThemeProvider обернет все компоненты, которые будут использовать нашу настраиваемую тему. В идеале он должен находиться в корне дерева компонентов. Мы передадим этому компоненту свойство темы, которое будет равно объекту темы, который вы создали ранее.
<ThemeProvider theme={theme}>
COMPONENTS TO USE THEME
</ThemeProvider>
Заключение
Если вы зашли так далеко, ваш окончательный файл App.js должен выглядеть примерно так. В приведенном ниже примере я также импортировал компонент Button из библиотеки Material-UI и визуализирую две кнопки. Один - с основным цветом, а другой - со второстепенным цветом.
Результат должен выглядеть так. Как видите, еще одна замечательная вещь, которую Material-UI делает для нас, - это автоматически меняет цвет текста для нас. Для основного цвета задан темно-зеленый цвет, поэтому текст будет светлым, а для дополнительного цвета - более светло-оранжевым, поэтому текст будет темным.
Спасибо за прочтение! Я надеюсь, что эта статья была полезной для вас, когда вы начали работу с Material-UI и настройкой цветовой темы для вашего следующего проекта React. Для получения дополнительной информации о настройке темы палитры с помощью Material-UI вы можете просмотреть их документацию здесь.
