Использование

Начните работу с React и Material-UI в кратчайшие сроки.

Компоненты Material-UI работают изолированно. Они самодостаточны и внедрят только те стили, которые им нужны для отображения. Они не зависят от каких-либо глобальных стилей, таких как normalize.css .

Вы можете использовать любой из компонентов, как показано в документации. Пожалуйста, обратитесь к демо-странице каждого компонента, чтобы увидеть, как они должны быть импортированы.

Быстрый старт

Вот краткий пример для начала, это буквально все что вам нужно:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Да, это действительно все, что вам нужно для начала, как вы можете увидеть в этой интерактивной демонстрации:

Глобальная настройка

Опыт использования Material-UI может быть улучшен с помощью ряда важных глобальных настроек, о которых вам нужно знать.

Responsive meta tag

Чтобы обеспечить правильный рендеринг и масштабирование касанием для всех устройств, добавьте метатег реагирующего окна просмотра в элемент <head>. Чтобы обеспечить правильный рендеринг и масштабирование касанием для всех устройств, добавьте метатег реагирующего окна просмотра в элемент <head>.

<meta
  name="viewport"
  content="minimum-scale=1, initial-scale=1, width=device-width"
/>

CssBaseline

Material-UI предоставляет опциональный компонент CssBaseline. Он исправляет некоторые несоответствия между браузерами и устройствами, обеспечивая несколько более упорядоченный сброс стилей HTML элементов.

Версионная документация

Данная документация всегда отражает последнюю стабильную версию Material-UI. You can find older versions of the documentation on a separate page.

Дальнейшие шаги

Теперь, когда у вас есть представление о базовых настройках, можно узнать больше:

Как предоставить шрифт и оформление Material Design.
Как воспользоваться механизмом тем.
Как переопределить внешний вид компонентов.