Инструкция по установке
Установите 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/iconsCDN
Вы можете начать использовать 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:
- Sketch: Sketch for Material-UI — A large UI kit with over 600 handcrafted Material-UI's symbols 💎.
- Figma: Figma for Material-UI — A large UI kit with over 600 handcrafted Material-UI's components 🎨.
- Framer: Framer for Material-UI — A small MIT UI kit preview of handcrafted Material-UI's component.