Migration from v0.x to v1

Sim, v1 foi lançada! Tire proveito de 2 anos de esforço.

Perguntas Frequentes

Woah - a API é diferente! Does that mean 1.0 is completely different, I'll have to learn the basics all over again, and migrating will be practically impossible?

A resposta é não. I'm glad you asked! The core concepts haven't changed. Você vai notar que a API oferece mais flexibilidade, mas isso tem um custo – componentes de nível inferior que abstraem menos complexidade.

O que motivou uma mudança tão grande?

Material UI was started 4 years ago. O ecossistema evoluiu muito desde então, também aprendemos muito. @nathanmarks started an ambitious task, rebuilding Material UI from the ground-up taking advantage of this knowledge to address long-standing issues. Para citar algumas das principais mudanças:

New styling solution using CSS-in-JS (better customization power, better performance)
Novo tratamento de tema (aninhamento, auto-suporte, etc.)
Blazing fast documentation thanks to Next.js
Way better test coverage (99%+, run on all the major browsers, visual regression tests)
Full server-side rendering support
Wide range of supported browsers

Onde devo começar a migração?

Start by installing the v1.x version of Material UI along side the v0.x version.

utilizando o yarn:

yarn add material-ui
  yarn add @material-ui/core

Ou utilizando npm:

npm install material-ui
  npm install @material-ui/core

então

import FlatButton from 'material-ui/FlatButton'; // v0.x
import Button from '@material-ui/core/Button'; // v1.x

Execute o auxiliar de migração em seu projeto.
MuiThemeProvider é opcional para v1.x., mas se você tem um tema customizado, você é livre para usar as versões v0.x e v1.x do componente, ao mesmo tempo, como neste exemplo:

import * as React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
import { MuiThemeProvider as V0MuiThemeProvider } from 'material-ui';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const theme = createMuiTheme({
  /* tema para v1.x */
});
const themeV0 = getMuiTheme({
  /* tema para v0.x */
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <V0MuiThemeProvider muiTheme={themeV0}>{/*Components*/}</V0MuiThemeProvider>
    </MuiThemeProvider>
  );
}

export default App;

Depois disso, você está livre para migrar uma instância de componente por vez.

Componentes

Autocompletar

Material UI doesn't provide a high-level API for solving this problem. You're encouraged you to explore the solutions the React community has built.

Execute o auxiliar de migração em seu projeto.

Ícone Svg

Execute o auxiliar de migração em seu projeto.

Caminho de atualização do RaisedButton:

-import AddIcon from 'material-ui/svg-icons/Add';
+import AddIcon from '@material-ui/icons/Add';

<AddIcon />

Botão flat

-import FlatButton from 'material-ui/FlatButton';
+import Button from '@material-ui/core/Button';

-<FlatButton />
+<Button />

Botão elevado

Caminho de atualização do RaisedButton:

-import RaisedButton from 'material-ui/RaisedButton';
+import Button from '@material-ui/core/Button';

-<RaisedButton />
+<Button variant="contained" />

Subcabeçalho

-import Subheader from 'material-ui/Subheader';
+import ListSubheader from '@material-ui/core/ListSubheader';

-<Subheader>Sub Heading</Subheader>
+<ListSubheader>Sub Heading</ListSubheader>

Alternar

-import Toggle from 'material-ui/Toggle';
+import Switch from '@material-ui/core/Switch';

-<Toggle

-  toggled={this.state.checkedA}
-  onToggle={this.handleToggle}
-/>
+<Switch
+  checked={this.state.checkedA}
+  onChange={this.handleSwitch}
+/>

-import MenuItem from 'material-ui/MenuItem';
+import MenuItem from '@material-ui/core/MenuItem';

-<MenuItem primaryText="Profile" />
+<MenuItem>Profile</MenuItem>

Ícone de fonte

-import FontIcon from 'material-ui/FontIcon';
+import Icon from '@material-ui/core/Icon';

-<FontIcon>home</FontIcon>
+<Icon>home</Icon>

Progresso Circular

-import CircularProgress from 'material-ui/CircularProgress';
+import CircularProgress from '@material-ui/core/CircularProgress';

-<CircularProgress mode="indeterminate" />
+<CircularProgress variant="indeterminate" />

-import DropDownMenu from 'material-ui/DropDownMenu';
+import Select from '@material-ui/core/Select';

-<DropDownMenu></DropDownMenu>
+<Select value={this.state.value}></Select>

Continua…

Você migrou sua aplicação com sucesso, e que tal ajudar a comunidade? Existe um problema em aberto para concluir este guia de migração #7195. Qualquer pull request é bem-vindo 😊.