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

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

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

npm

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

// для npm
npm install @material-ui/core@next @emotion/react @emotion/styled

// для yarn
yarn add @material-ui/core@next @emotion/react @emotion/styled

Обратите внимание, что react >= 17.0.0 и react-dom >= 17.0.0 взаимозависимы (peer dependencies).

Or if you want to use styled-components as a styling engine:

// with npm
npm install @material-ui/core@next @material-ui/styled-engine-sc@next styled-components

// with yarn
yarn add @material-ui/core@next @material-ui/styled-engine-sc@next styled-components

Take a look at the Styled Engine guide for more information about how to configure styled-components as the style engine.

Шрифт Roboto

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

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

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

To use the font Icon component, you must first add the Material icons font. Вот некоторые инструкции как это сделать. Например, через 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: Большой UI-набор из более чем 600 самодельных компонентов Material-UI.
• Adobe XD: Большой UI-набор из более чем 600 самодельных компонентов Material-UI.
• Sketch: Большой UI-набор из более чем 600 самодельных символов Material-UI.
• Framer: Framer for Material-UI — A small MIT UI kit preview of handcrafted Material-UI's component.