Pular para o conteúdo
Ajude a traduzir esta página

Uso

Comece com React e Material-UI em pouco tempo.

Componentes do Material-UI funcionam isoladamente. Eles são auto-suficientes, e só irão injetar os estilos que eles precisam para exibir. Eles não contam com qualquer folha de estilo global como normalize.css.

Você pode usar qualquer um dos componentes conforme demonstrado na documentação. Por favor, consulte a página de demonstração de cada componente para ver como eles devem ser importados.

Vamos começar!

Aqui está um exemplo rápido para você começar, é literalmente tudo que você precisa:

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

function App() {
  return (
    <Button variant="contained" color="primary">
      Olá Mundo
    </Button>
  );
} ReactDOM.render(<App />, document.querySelector('#app'));

Sim, isso é tudo o que você precisa para começar, como você pode ver nesta demonstração ao vivo e interativa:

Globais

Material-UI usage experience can be improved with a handful of important globals that you'll need to be aware of.

Meta tag para responsividade

O Material-UI é desenvolvido com a estratégia mobile-first, uma estratégia na qual primeiro escrevemos código para dispositivos móveis e, em seguida, dimensionamos componentes conforme necessário, usando consultas de mídia CSS. Para garantir a renderização adequada e o zoom de toque para todos os dispositivos, adicione a meta tag de visualização responsiva ao seu elemento <head>.

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

CssBaseline

Material-UI fornece um componente opcional CssBaseline. Ele corrige algumas inconsistências nos navegadores e dispositivos, ao mesmo tempo em que fornece redefinições ligeiramente mais opinativas para elementos HTML comuns.

Versões da documentação

Esta documentação sempre reflete a última versão estável do Material-UI. Você pode encontrar versões mais antigas da documentação em uma página separada.

Próximos passos

Agora que você tem uma ideia da configuração básica, é hora de aprender mais sobre: