A theme patch function for Material-UI v3 that adds a spacing helper function like in Material-UI v4 but keeps theme.spacing.unit intact.

patchTheme.js

/**
 * Add a Material-UI v4-like spacing helper to the theme.
 * @param {object} theme Material-UI v3 theme
 * @returns Material-UI v3 theme with the spacing helper function added
 */
function patchTheme(theme) {
  const { unit } = theme.spacing;
  const spacing = (...args) => args.map(factor => `${factor * unit}px`).join(' '); // spacing helper like in Material-UI v4
  spacing.unit = unit; // spacing like in Material-UI v3
  return {
    ...theme,
    spacing,
  };
}

// enhance your theme:
// <MuiThemeProvider theme={patchTheme(yourTheme)}>

// using the helper:
const styles = theme => ({
  root: {
    margin: theme.spacing(2, 0), // '16px 0px'
    padding: theme.spacing(2), // '16px'
    height: 3 * theme.spacing.unit, // 24
  },
});