Skip to content
Edit this page

Установка

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

Стандартная установка

Выполните одну из следующих команд, чтобы добавить Material UI в ваш проект:

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

Установка с styled-components

Material UI использует Emotion в качестве механизма стилизации по умолчанию. Если вы хотите использовать styled-components вместо этого, выполните одну из следующих команд:

npm

npm install @mui/material @mui/styled-engine-sc styled-components

yarn

yarn add @mui/material @mui/styled-engine-sc styled-components

Peer dependencies

react >= 17.0.0 и react-dom >= 17.0.0 являются peer dependencies.

Шрифт Roboto

По умолчанию Material UI использует шрифта Roboto. Вы можете добавить его в свой проект с помощью npm или yarn через Fontsource, или с помощью Google Fonts CDN.

npm

npm install @fontsource/roboto

yarn

yarn add @fontsource/roboto

Затем вы можете импортировать его в точке входа следующим образом:

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Google Web Fonts

Чтобы установить шрифт Roboto в свой проект с помощью Google Web Fonts CDN, добавьте следующий фрагмент кода в тег <head /> вашего проекта:

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

Иконки

Чтобы использовать компонент font Icon или готовые SVG-иконки Material Icons (например, те, что находятся в icon demos), необходимо сначала установить шрифт Material Icons. Это можно сделать с помощью npm или yarn, или с помощью Google Web Fonts CDN.

npm

npm install @mui/icons-material

yarn

yarn add @mui/icons-material

Google Web Fonts

Чтобы использовать шрифт Icon компонента, вы должны сначала добавить шрифт Material Icons. Вот некоторые инструкции о том, как это сделать. Например, через Google Web Fonts:

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

CDN

Вы можете сразу же начать использовать Material UI, подключив его через CDN, что является отличным вариантом для быстрого прототипирования. Для начала работы следуйте этому примеру.

Предоставляются два файла Universal Module Definition (UMD):