Инструкция по установке

Установите Material-UI, самый популярный в мире фреймворк для пользовательского интерфейса React.

Material-UI доступен в виде пакета npm .

npm

Для установки и сохранения в вашем package.json зависимости, запустите:

// with npm
npm install @material-ui/core@next @emotion/react @emotion/styled

// with yarn
yarn add @material-ui/core@next @emotion/react @emotion/styled

Обратите внимание, что react > = 16.8.0 и react-dom > = 16.8.0 являются одноранговыми зависимостями.

Шрифт Roboto

Material-UI был разработан на основе шрифта Roboto. Поэтому обязательно следуйте этим инструкциям. Например, через Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Иконочный шрифт

Вот некоторые инструкции как это сделать. Вот некоторые инструкции как это сделать. Например, через Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

SVG Иконки

Для того, чтобы использовать предварительно собранные SVG-иконки Material, такие как те, которые используются для демонстрации, сначала необходимо установить пакет @material-ui/icons:

// через npm
npm install @material-ui/icons

// через yarn
yarn add @material-ui/icons

CDN

Вы можете начать использовать Material-UI с минимальной интерфейсной инфраструктурой, что отлично подходит для прототипирования.

Предоставляются два файла в формате UMD:

• один для разработки: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
• один для публикации: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js

Вы можете следовать этому примеру CDN для быстрого старта.

Использование этого подхода в продакшене не рекомендуется - клиент вынужден загружать целую библиотеку независимо от того, какие компоненты он реально использует. Это плохо влияет на производительность.

В ссылках на UMD-файлы используется тег latest для указания на последнюю версию библиотеки. Этот указатель нестабильный, он изменяется при появлении новых версий. Вы можете указывать конкретную версию, например, v4.4.0.

Design resources

A set of reusable components for design tools is available, designed to match the React components, and to help you craft great products:

• Figma: A large UI kit with over 600 handcrafted Material-UI components.
• Sketch: Sketch for Material-UI — A large UI kit with over 600 handcrafted Material-UI's symbols 💎.
• Adobe XD: A large UI kit with over 600 handcrafted Material-UI components.
• Framer: Framer for Material-UI — A small MIT UI kit preview of handcrafted Material-UI's component.