Руководство по настройке Material UI с помощью React

Что такое Material UI?

Популярная библиотека пользовательского интерфейса, которая позволяет разработчикам повторно использовать хорошо продуманные компоненты из Material Design , передовой системы проектирования для интерфейсной разработки. MUI хорошо взаимодействует с React и предоставляет интерактивные компоненты для разработки адаптивных пользовательских интерфейсов.

MUI имеет отличную документацию

Документация по Material UI предоставляет массу информации о нескольких компонентах: от простой кнопки до навигационных меню, вкладок, таблиц, ползунков и т. д. Вы называете это, и в Material UI есть компонент, который соответствует вашим потребностям. Документация по API компонента MUI содержит подробную информацию о свойствах каждого компонента, описание свойства со значениями по умолчанию, правила CSS, демонстрации и примеры кода.

Быстрое начало работы с React и Material UI

1. Давайте сначала настроим React. Если у вас уже есть готовый и ожидающий проект React, вы можете перейти к разделу «Использование компонентов MUI». Если нет, создайте в терминале новую папку с помощью команд git: mkdir и того, что вы хотите, чтобы папка вашего приложения называлась. Давайте назовем: Material-UI-App

mkdir material-ui-app

2- Откройте свой проект в VScode или любой другой локальной среде разработки, которую вы используете. В терминале LDE вы можете быстро запустить новый проект с помощью команды git:

npx create-react app

3- Запустите сервер разработки с помощью

npm start

4- Затем соедините приложение в статические файлы для производства с помощью

npm run build

React — это статья (несколько статей) для другого раза. На данный момент мы собираемся использовать его прямо из коробки и перейдем к установке того, что нам нужно, чтобы начать использовать компоненты Material UI.

Использование компонентов MUI

Первый шаг: давайте добавим библиотеку Material UI в качестве зависимости к нашему проекту React, и это предоставит нам все необходимое для начала импорта компонентов. В вашем терминале LDE введите:

npm i —save @material-ui/core

Давайте перейдем к вашему файлу App.js и убедимся, что ваш исходный файл выглядит примерно так:

import React from 'react';
import './App.css';


function App() {

  return (
    <div className="App"></div>
  );
}

export default App;

Мы собираемся начать с основ, наш файл App.js. Давайте импортируем компонент Typography Нам нужно будет импортировать деструктурированный компонент непосредственно из библиотеки MUI и добавить <Typography> теги прямо в наше приложение <div>. Подробнее читайте в документации по Typography API . Как вы, наверное, догадались, позже мы добавим компонент переключателя, поэтому я напишу «Вот наш переключатель» в качестве текста между <Typography> теги компонентов.

import React from 'react';
import { Typography } from '@material-ui/core';
import './App.css';


function App() {

  };

  return (
    <div className="App"> 
      <Typography>
        Here's Our Switch
      </Typography>
    </div>
  );
}

export default App;

Давайте настроим наш тип:

Мы собираемся использовать встроенные свойства MUI: выравнивание (align), цвет (color) и вариант (variant).

align

это свойство имеет значения типа: «left», «center», «right» и «justify».

variant

этот props использует значения типов стандартных тегов HTML: от h1 до h6, body1, caption и т. д.

color

этот props имеет значения ‘inherit’, ‘primary’, secondary’ и т. д.

Цвет каждого компонента поддерживается темами MUI. Каждый цветовой props по умолчанию автоматически адаптируется для каждого компонента.

В нашем примере мы будем использовать: align="center" color="primary" variant="h2", но вы можете свободно выбирать значения, которые вам больше всего нравятся.

import React from 'react';
import { Typography } from '@material-ui/core';
import './App.css';


function App() {
  return (
    <div className="App"> 
      <Typography align="center" color="primary" variant="h2">
        Here's Our Switch
      </Typography>
    </div>
  );
}

export default App;

Вы можете спросить... Откуда берется цвет? И могу ли я его изменить? Это подводит нас к самому интересному. Темы!

Темы MUI

По теме каждого компонента имеется много отличной документации.

Темы настраиваются. Мы бы рекомендовали углубиться в объект темы по умолчанию. Найдено здесь: https://v4.mui.com/customization/default-theme/#default-theme ,

Отсюда берутся все наши значения по умолчанию, и именно так мы получим доступ к каждому свойству, которое собираемся настроить. Тема по умолчанию создана для того, чтобы помочь нам поддерживать единообразие всех стилей — это лучшая практика пользовательского интерфейса.

Давайте создадим нашу собственную тему:

Вам понадобится создать новый js-файл с именем theme.js . С объектом темы можно многое сделать, но для простоты мы сосредоточимся на настройке основных и дополнительных цветов.

Мы добавили собственные HEX-коды к основному и дополнительному объекту. Не стесняйтесь выбирать свои собственные цвета. Если вы не уверены в выборе цветовой палитры, Coolors.co — отличное место, где можно найти идеи и отличные цветовые комбинации.

Ниже приведен пример нашего файла theme.js.

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  palette: {
    primary: {
      light: '#b4d6e4',
      main: '#09BC8A',
      dark: '#004346',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});

export default theme;

В наш index.js нам нужно импортировать ThemeProvider и наш файл theme.js следующим образом:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ThemeProvider } from '@material-ui/core';
import theme from './theme'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
     </ThemeProvider>
  </React.StrictMode>
);

Хорошо, вернемся к App.js. файлу Давайте добавим компонент переключателя просто для развлечения. Опять же, просто вернитесь к параметрам компонента MUI. Выберите тип переключателя, который вы хотите добавить в свое приложение React. Используйте их код компонента и вуаля. Как видите, ваш переключатель также унаследует пользовательскую тему/цвет, которые мы создали ранее.

import React from 'react';
import Switch from '@material-ui/core/Switch';
import { Typography } from '@material-ui/core';
import './App.css';


function App() {
const [state, setState] = React.useState({
    checkedA: true,
    checkedB: true,
  });

  const handleChange = (event) => {
    setState({ ...state, [event.target.name]: event.target.checked });
  };

  return (
    <div className="App"> 
      <Typography align="center" color="primary" variant="h2">
        Here's Our Switch
      </Typography>
      <Switch
        checked={state.checkedB}
        onChange={handleChange}
        color="primary"
        name="checkedB"
        inputProps={{ 'aria-label': 'primary checkbox' }}
      />
    </div>
  );
}

export default App;

И вот наш тип и переключатель.

В заключение

Вот и все, ваши первые настроенные компоненты пользовательского интерфейса Material. Спасибо за прочтение.