A non-comprehensive guide to upgrading Material-UI from v0 to v4

upgrade-mui-v0-v4.md

Upgrading Material-UI from v0 to v4

LeftIcon, RightIcon

- import LeftIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-left';
- import RightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right';

+ import { KeyboardArrowLeftIcon, KeyboardArrowRightIcon } from '@material-ui/icons/Keyboard';

FloatingActionButton

- import FloatingActionButton from 'material-ui/FloatingActionButton'; // mini={true}
+ import { Fab } from '@material-ui/core'; // size="small" variant="round"

MUIThemeProvider

- import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+ import { MuiThemeProvider } from '@material-ui/core/styles';

RaisedButton

- import RaisedButton from 'material-ui/RaisedButton';
+ import { Button } from '@material-ui/core'; // variant="contained"

IconButton

- import IconButton from 'material-ui/IconButton';
+ import { IconButton } from '@material-ui/core';

ListItem with Avatar

( - )

<ListItem
  leftAvatar={<Avatar icon={<img src="xyz.png" />} />}
  primaryText={<span>Primary text</span>}
  secondaryText={<span>Secondary text</span>}
/>

( + )

<ListItem>
  <ListItemAvatar>
    <Avatar src="xyz.png">
  </ListItemAvatar>
  <ListItemText
    primary={<span>Primary text</span>}
    secondary={<span>Secondary text</span>}
  />
</ListItem>

TextField

- import TextField from 'material-ui/TextField';
+ import { TextField } from '@material-ui/core';

props

• hintText -> placeholder
• floatingLabelText -> label

FlatButton

- import FlatButton from 'material-ui/FlatButton';
+ import { Button } from '@material-ui/core'; // variant="text", which is default

Dialog

- import Dialog from 'material-ui/Dialog';
+ import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core';

(-)

<Dialog title="My Dialog Title" modal={false} actions={<button>Hello!</button>}>
  {children}
</Dialog>

(+)

<Dialog aria-labelledby="my-dialog-title" disableBackdropClick={false}>
  <DialogTitle id="my-dialog-title">My Dialog Title</DialogTitle>
  <DialogContent>
    {children}
  </DialogContent>
  <DialogActions>
    <button>Hello!</button>
  </DialogActions>
</Dialog>

props

• modal -> disableBackrpoClick *
• autoScrollBodyContent={true} -> scroll="paper"
• onRequestClose -> onClose

*[if modal is false, just get rid of this prop, no worries!]

MenuItem

- import MenuItem from 'material-ui/MenuItem';
+ import { MenuItem } from '@material-ui/core'; // primaryText -> children

IconMenu

(-)

import IconMenu from 'material-ui/IconMenu';
import IconButton from 'material-ui/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

<IconMenu iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}>
  {children}
</IconMenu>

(+)

import { IconButton, Menu } from '@material-ui/core';
import MoreVertIcon from '@material-ui/icons/MoreVert';

// function component
const IconMenu = ({ children }) => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);

  const handleClick = event => setAnchorEl(event.currentTarget);
  const handleClose = () => setAnchorEl(null);

  return (
    <div>
      <IconButton onClick={handleClick}><MoreVertIcon /></IconButton>
      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
        <div onClick={handleClose}>
          {children}
        </div>
      </Menu>
    </div>
  )
}

SelectField

(-)

import SelectField from 'material-ui/SelectField';

/// Code

<SelectField
  value={myVariable}
  onChange={changeHandler}
  floatingLabelText='Select an option'
>
  {children}
</SelectField>

(+)

import {
  FormControl,
  FormHelperText,
  Select
} from '@material-ui/core';

/// Code

<FormControl>
  <Select value={myVariable} onChange={changeHandler}>
    {children}
  </Select>
  <FormHelperText>Select an option</FormHelperText>
</FormControl>

TimePicker

(-)

import TimePicker from 'material-ui/TimePicker';

/// Code

<TimePicker
  format='24hr'
  defaultTime={defTime}
  hintText='Pickup a follow-up time'
  onChange={timeChangeHandler}
/>

(+)

import { TextField } from '@material-ui/core';

/// Code

<TextField
  type="time"
  defaultValue={defTime}
  InputLabelProps={{ shrink: true }}
  inputProps={{ step: 300 }} // 5 min
  placeholder="Pickup a follow-up time"
  onChange={timeChangeHandler}
/>

RadioButton, RadioButtonGroup

(-)

import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';

/// Code

<RadioButtonGroup valueSelected={gender} onChange={setGender}>
  <RadioButton value="F" label="Female" />
  <RadioButton value="M" label="Male" />
</RadioButtonGroup>

(+)

import { FormControlLabel, Radio, RadioGroup } from '@material-ui/core';

/// Code

<RadioGroup value={gender} onChange={setGender}>
  <FormControlLabel value="F" control={<Radio />} label="Female" />
  <FormControlLabel value="M" control={<Radio />} label="Male" />
</RadioGroup>