> For the complete documentation index, see [llms.txt](https://gpeterhand.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gpeterhand.gitbook.io/react/dizain/material-ui.md).

# material-ui

Библиотека, реализующая интерфейс Google Material Design

> yarn add @material-ui/core

В файл **src/App.js**  добавляем

```jsx
...
import Button from '@material-ui/core/Button'
...

// Hello, React! заменяем на
    <Button variant="raised" color="primary">
      Hello World
    </Button>
```

Запускаем. Должна появится кнопка "Hello, world!".

## Шрифт Roboto

Material-ui использует шрифт **Roboto**

Добавляем в файл **src/App.js** в секцию \<Helmet>:

```jsx
<Helmet>
  ...
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
   />
  ...
</Helmet>
```

Можно также [установить](https://material-ui.com/style/typography/#install-with-a-href-https-www-npmjs-com-package-typeface-roboto-npm-a-) Roboto с помощью npm/yarn.

*Какой способ лучше?*

**Вопросы:**

* *Как извлечь стили material-ui во внешний файл?*