diff --git a/.size-limit.js b/.size-limit.js
index deb14e53b5ee21..2cff31bb2ed41a 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -27,7 +27,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '94.9 KB',
+    limit: '94.6 KB',
   },
   {
     name: 'The main bundle of the docs',
diff --git a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
index e9921da8c56990..cac891d6d153e3 100644
--- a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
+++ b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
@@ -83,11 +83,11 @@ const styles = theme => ({
     fontSize: 16,
     color: theme.palette.text.primary,
     '& .anchor-link': {
-      marginTop: -theme.spacing.unit * 12, // Offset for the anchor.
+      marginTop: -8 * 12, // Offset for the anchor.
       position: 'absolute',
     },
     '& pre, & pre[class*="language-"]': {
-      margin: `${theme.spacing.unit * 3}px 0`,
+      margin: `${8 * 3}px 0`,
       padding: '12px 18px',
       backgroundColor: theme.palette.background.paper,
       borderRadius: theme.shape.borderRadius,
@@ -110,26 +110,26 @@ const styles = theme => ({
     '& h1': {
       ...theme.typography.display2,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`,
+      margin: `${8 * 4}px 0 ${8 * 2}px`,
     },
     '& .description': {
       ...theme.typography.headline,
-      margin: `0 0 ${theme.spacing.unit * 5}px`,
+      margin: `0 0 ${8 * 5}px`,
     },
     '& h2': {
       ...theme.typography.display1,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
+      margin: `${8 * 4}px 0 ${8 * 3}px`,
     },
     '& h3': {
       ...theme.typography.headline,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
+      margin: `${8 * 4}px 0 ${8 * 3}px`,
     },
     '& h4': {
       ...theme.typography.title,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 2}px`,
+      margin: `${8 * 3}px 0 ${8 * 2}px`,
     },
     '& p, & ul, & ol': {
       lineHeight: 1.6,
@@ -149,7 +149,7 @@ const styles = theme => ({
       '&:hover .anchor-link-style': {
         display: 'inline-block',
         opacity: 1,
-        padding: `0 ${theme.spacing.unit}px`,
+        padding: '0 8px',
         color: theme.palette.text.hint,
         '&:hover': {
           color: theme.palette.text.secondary,
@@ -199,16 +199,14 @@ const styles = theme => ({
     },
     '& td': {
       borderBottom: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px ${theme.spacing.unit}px ${
-        theme.spacing.unit
-      }px`,
+      padding: `8px ${8 * 2}px 8px 8px`,
       textAlign: 'left',
     },
     '& td:last-child': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 8 * 3,
     },
     '& td compact': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 8 * 3,
     },
     '& td code': {
       fontSize: 13,
@@ -218,11 +216,11 @@ const styles = theme => ({
       whiteSpace: 'pre',
       borderBottom: `1px solid ${theme.palette.divider}`,
       fontWeight: theme.typography.fontWeightMedium,
-      padding: `0 ${theme.spacing.unit * 2}px 0 ${theme.spacing.unit}px`,
+      padding: `0 ${8 * 2}px 0 8px`,
       textAlign: 'left',
     },
     '& th:last-child': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 8 * 3,
     },
     '& tr': {
       height: 48,
@@ -236,8 +234,8 @@ const styles = theme => ({
     '& blockquote': {
       borderLeft: `5px solid ${theme.palette.text.hint}`,
       backgroundColor: theme.palette.background.paper,
-      padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 3}px`,
-      margin: `${theme.spacing.unit * 3}px 0`,
+      padding: `${8 / 2}px ${8 * 3}px`,
+      margin: `${8 * 3}px 0`,
     },
     '& a, & a code': {
       // Style taken from the Link component
diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
index 4d9c2e42b4fe68..3b9545f7458351 100644
--- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
+++ b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
@@ -10,7 +10,7 @@ import { duration } from '@material-ui/core/styles/transitions';
 import Button from '@material-ui/core/Button';
 import { isMuiElement } from '@material-ui/core/utils/reactHelpers';
 
-const styles = theme => ({
+const styles = {
   root: {
     zIndex: 1050,
     display: 'flex',
@@ -19,12 +19,12 @@ const styles = theme => ({
   actions: {
     display: 'flex',
     flexDirection: 'column-reverse', // Display the first action at the bottom.
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: 8 * 2,
   },
   actionsClosed: {
     transition: 'top 0s linear 0.2s',
   },
-});
+};
 
 class SpeedDial extends React.Component {
   state = {
diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
index 9318d0aab83552..e67655c30017e7 100644
--- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
+++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
@@ -10,7 +10,7 @@ const styles = theme => ({
     position: 'relative',
   },
   button: {
-    margin: theme.spacing.unit,
+    margin: 8,
     color: theme.palette.text.secondary,
     transition: `${theme.transitions.create('transform', {
       duration: theme.transitions.duration.shorter,
diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js
index 34916fd78ae114..7328a259b93ac1 100644
--- a/packages/material-ui/src/Avatar/Avatar.js
+++ b/packages/material-ui/src/Avatar/Avatar.js
@@ -10,8 +10,8 @@ export const styles = theme => ({
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
-    width: theme.spacing.unit * 5,
-    height: theme.spacing.unit * 5,
+    width: 8 * 5,
+    height: 8 * 5,
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(20),
     borderRadius: '50%',
diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
index 3990a9febdd0fc..7c9e44bd17cc7a 100644
--- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
+++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
@@ -12,7 +12,7 @@ export const styles = theme => ({
     transition: theme.transitions.create(['color', 'padding-top'], {
       duration: theme.transitions.duration.short,
     }),
-    paddingTop: theme.spacing.unit,
+    paddingTop: 8,
     paddingBottom: 10,
     paddingLeft: 12,
     paddingRight: 12,
@@ -21,7 +21,7 @@ export const styles = theme => ({
     color: theme.palette.text.secondary,
     flex: '1',
     '&$iconOnly': {
-      paddingTop: theme.spacing.unit * 2,
+      paddingTop: 8 * 2,
     },
     '&$selected': {
       paddingTop: 6,
diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js
index f5f9ea312e63f5..ece6a285951330 100644
--- a/packages/material-ui/src/CardActions/CardActions.js
+++ b/packages/material-ui/src/CardActions/CardActions.js
@@ -10,13 +10,13 @@ export const styles = theme => ({
     display: 'flex',
     alignItems: 'center',
     boxSizing: 'border-box',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+    padding: `8px ${8 / 2}px`,
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+      padding: `8px ${8 * 1.5}px`,
     },
   },
   action: {
-    margin: `0 ${theme.spacing.unit / 2}px`,
+    margin: `0 ${8 / 2}px`,
   },
 });
 
diff --git a/packages/material-ui/src/CardContent/CardContent.js b/packages/material-ui/src/CardContent/CardContent.js
index d8c8dc633ec854..4bef602359e19d 100644
--- a/packages/material-ui/src/CardContent/CardContent.js
+++ b/packages/material-ui/src/CardContent/CardContent.js
@@ -5,10 +5,10 @@ import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
   root: theme.mixins.gutters({
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    paddingTop: 8 * 2,
+    paddingBottom: 8 * 2,
     '&:last-child': {
-      paddingBottom: theme.spacing.unit * 3,
+      paddingBottom: 8 * 3,
     },
   }),
 });
diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js
index afb8beb1bc1886..99ab7d479251b8 100644
--- a/packages/material-ui/src/CardHeader/CardHeader.js
+++ b/packages/material-ui/src/CardHeader/CardHeader.js
@@ -8,18 +8,18 @@ export const styles = theme => ({
   root: theme.mixins.gutters({
     display: 'flex',
     alignItems: 'center',
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    paddingTop: 8 * 2,
+    paddingBottom: 8 * 2,
   }),
   avatar: {
     flex: '0 0 auto',
-    marginRight: theme.spacing.unit * 2,
+    marginRight: 8 * 2,
   },
   action: {
     flex: '0 0 auto',
     alignSelf: 'flex-start',
-    marginTop: theme.spacing.unit * -1,
-    marginRight: theme.spacing.unit * -2,
+    marginTop: 8 * -1,
+    marginRight: 8 * -2,
   },
   content: {
     flex: '1 1 auto',
diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
index d6dca8f4ee190a..a6ed1615677396 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -5,19 +5,19 @@ import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
     flex: '0 0 auto',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+    margin: `8px ${8 / 2}px`,
   },
   action: {
-    margin: `0 ${theme.spacing.unit / 2}px`,
+    margin: `0 ${8 / 2}px`,
     minWidth: 64,
   },
-});
+};
 
 function DialogActions(props) {
   const { disableActionSpacing, children, classes, className, ...other } = props;
diff --git a/packages/material-ui/src/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js
index c0373857868d78..80362d7e5054fc 100644
--- a/packages/material-ui/src/DialogContent/DialogContent.js
+++ b/packages/material-ui/src/DialogContent/DialogContent.js
@@ -3,19 +3,16 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => {
-  const spacing = theme.spacing.unit * 3;
-  return {
-    root: {
-      flex: '1 1 auto',
-      overflowY: 'auto',
-      WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
-      padding: `0 ${spacing}px ${spacing}px ${spacing}px`,
-      '&:first-child': {
-        paddingTop: spacing,
-      },
+export const styles = {
+  root: {
+    flex: '1 1 auto',
+    overflowY: 'auto',
+    WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+    padding: `0 ${8 * 3}px ${8 * 3}px ${8 * 3}px`,
+    '&:first-child': {
+      paddingTop: 8 * 3,
     },
-  };
+  },
 };
 
 function DialogContent(props) {
diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js
index a859f6aa89279e..db6708cfc5773d 100644
--- a/packages/material-ui/src/DialogTitle/DialogTitle.js
+++ b/packages/material-ui/src/DialogTitle/DialogTitle.js
@@ -4,14 +4,13 @@ import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     margin: 0,
-    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px \
-      20px ${theme.spacing.unit * 3}px`,
+    padding: `${8 * 3}px ${8 * 3}px 20px ${8 * 3}px`,
     flex: '0 0 auto',
   },
-});
+};
 
 function DialogTitle(props) {
   const { children, classes, className, disableTypography, ...other } = props;
diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
index 42510a3d4ac802..89f5111eec560f 100644
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -19,7 +19,7 @@ export const styles = theme => ({
     width: '100%',
   },
   inset: {
-    marginLeft: theme.spacing.unit * 9,
+    marginLeft: 8 * 9,
   },
   light: {
     backgroundColor: fade(theme.palette.divider, 0.08),
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
index ceee29677e2f0b..3ec14f1ccf742b 100644
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -60,7 +60,7 @@ export const styles = theme => {
       },
     },
     expanded: {
-      margin: `${theme.spacing.unit * 2}px 0`,
+      margin: `${8 * 2}px 0`,
       '&:first-child': {
         marginTop: 0,
       },
diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
index 676c6e19f5d3ac..6f1361d987237a 100644
--- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
+++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
@@ -5,17 +5,17 @@ import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px`,
+    padding: `${8 * 2}px 8px`,
   },
   action: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: 8,
   },
-});
+};
 
 function ExpansionPanelActions(props) {
   const { children, classes, className, ...other } = props;
diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
index cbc2f76ad6c4e7..7dfc5cec899890 100644
--- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
+++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
+    padding: `8px ${8 * 3}px ${8 * 3}px`,
   },
-});
+};
 
 function ExpansionPanelDetails(props) {
   const { classes, children, className, ...other } = props;
diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
index 04b7918022640c..cacc70bd6e3273 100644
--- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
+++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
@@ -14,9 +14,9 @@ export const styles = theme => {
   return {
     root: {
       display: 'flex',
-      minHeight: theme.spacing.unit * 6,
+      minHeight: 8 * 6,
       transition: theme.transitions.create(['min-height', 'background-color'], transition),
-      padding: `0 ${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 3}px`,
+      padding: `0 ${8 * 3}px 0 ${8 * 3}px`,
       '&:hover:not($disabled)': {
         cursor: 'pointer',
       },
@@ -39,7 +39,7 @@ export const styles = theme => {
       transition: theme.transitions.create(['margin'], transition),
       margin: '12px 0',
       '& > :last-child': {
-        paddingRight: theme.spacing.unit * 4,
+        paddingRight: 8 * 4,
       },
       '&$expanded': {
         margin: '20px 0',
@@ -48,7 +48,7 @@ export const styles = theme => {
     expandIcon: {
       position: 'absolute',
       top: '50%',
-      right: theme.spacing.unit,
+      right: 8,
       transform: 'translateY(-50%) rotate(0deg)',
       transition: theme.transitions.create('transform', transition),
       '&:hover': {
diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
index a0086ccd5c867e..05f3c63a9fabbb 100644
--- a/packages/material-ui/src/FormControl/FormControl.js
+++ b/packages/material-ui/src/FormControl/FormControl.js
@@ -6,7 +6,7 @@ import { isFilled, isAdornedStart } from '../Input/Input';
 import { capitalize } from '../utils/helpers';
 import { isMuiElement } from '../utils/reactHelpers';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'inline-flex',
     flexDirection: 'column',
@@ -18,17 +18,17 @@ export const styles = theme => ({
     border: 0,
   },
   marginNormal: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit,
+    marginTop: 8 * 2,
+    marginBottom: 8,
   },
   marginDense: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit / 2,
+    marginTop: 8,
+    marginBottom: 8 / 2,
   },
   fullWidth: {
     width: '100%',
   },
-});
+};
 
 /**
  * Provides context such as filled/focused/error/required for form inputs.
diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
index da5db998b6e7fd..2754820c1922e7 100644
--- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js
+++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
@@ -16,7 +16,7 @@ export const styles = theme => ({
     // Remove grey highlight
     WebkitTapHighlightColor: 'transparent',
     marginLeft: -14,
-    marginRight: theme.spacing.unit * 2, // used for row presentation of radio/checkbox
+    marginRight: 8 * 2, // used for row presentation of radio/checkbox
     '&$disabled': {
       cursor: 'default',
     },
diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js
index 74b740ebb4acb1..ef1c849073b395 100644
--- a/packages/material-ui/src/FormHelperText/FormHelperText.js
+++ b/packages/material-ui/src/FormHelperText/FormHelperText.js
@@ -9,7 +9,7 @@ export const styles = theme => ({
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(12),
     textAlign: 'left',
-    marginTop: theme.spacing.unit,
+    marginTop: 8,
     lineHeight: '1em',
     minHeight: '1em',
     margin: 0,
@@ -23,7 +23,7 @@ export const styles = theme => ({
   error: {},
   disabled: {},
   marginDense: {
-    marginTop: theme.spacing.unit / 2,
+    marginTop: 8 / 2,
   },
 });
 
diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
index bf11e28cc5bd21..bf0a372f36c86c 100644
--- a/packages/material-ui/src/Input/Input.js
+++ b/packages/material-ui/src/Input/Input.js
@@ -71,7 +71,7 @@ export const styles = theme => {
     },
     formControl: {
       'label + &': {
-        marginTop: theme.spacing.unit * 2,
+        marginTop: 8 * 2,
       },
     },
     focused: {},
@@ -121,7 +121,7 @@ export const styles = theme => {
     },
     error: {},
     multiline: {
-      padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
+      padding: `${8 - 2}px 0 ${8 - 1}px`,
     },
     fullWidth: {
       width: '100%',
@@ -129,7 +129,7 @@ export const styles = theme => {
     input: {
       font: 'inherit',
       color: 'currentColor',
-      padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
+      padding: `${8 - 2}px 0 ${8 - 1}px`,
       border: 0,
       boxSizing: 'content-box',
       verticalAlign: 'middle',
@@ -172,7 +172,7 @@ export const styles = theme => {
       },
     },
     inputMarginDense: {
-      paddingTop: theme.spacing.unit / 2 - 1,
+      paddingTop: 8 / 2 - 1,
     },
     inputMultiline: {
       resize: 'none',
diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.js b/packages/material-ui/src/InputAdornment/InputAdornment.js
index 66f45d43751cad..51c3875149d886 100644
--- a/packages/material-ui/src/InputAdornment/InputAdornment.js
+++ b/packages/material-ui/src/InputAdornment/InputAdornment.js
@@ -4,19 +4,19 @@ import classNames from 'classnames';
 import Typography from '../Typography';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
     maxHeight: '2em',
     alignItems: 'center',
   },
   positionStart: {
-    marginRight: theme.spacing.unit,
+    marginRight: 8,
   },
   positionEnd: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: 8,
   },
-});
+};
 
 function InputAdornment(props) {
   const {
diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js
index e0169b95b7ce82..a96b373cef2b3b 100644
--- a/packages/material-ui/src/InputLabel/InputLabel.js
+++ b/packages/material-ui/src/InputLabel/InputLabel.js
@@ -15,11 +15,11 @@ export const styles = theme => ({
     left: 0,
     top: 0,
     // slight alteration to spec spacing to match visual spec result
-    transform: `translate(0, ${theme.spacing.unit * 3}px) scale(1)`,
+    transform: `translate(0, ${8 * 3}px) scale(1)`,
   },
   marginDense: {
     // Compensation for the `Input.inputDense` style.
-    transform: `translate(0, ${theme.spacing.unit * 2.5 + 1}px) scale(1)`,
+    transform: `translate(0, ${8 * 2.5 + 1}px) scale(1)`,
   },
   shrink: {
     transform: 'translate(0, 1.5px) scale(0.75)',
diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js
index 6362cab1cac991..a8dd3fb90e23b6 100644
--- a/packages/material-ui/src/List/List.js
+++ b/packages/material-ui/src/List/List.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     listStyle: 'none',
     margin: 0,
@@ -11,17 +11,17 @@ export const styles = theme => ({
     position: 'relative',
   },
   padding: {
-    paddingTop: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
+    paddingTop: 8,
+    paddingBottom: 8,
   },
   dense: {
-    paddingTop: theme.spacing.unit / 2,
-    paddingBottom: theme.spacing.unit / 2,
+    paddingTop: 8 / 2,
+    paddingBottom: 8 / 2,
   },
   subheader: {
     paddingTop: 0,
   },
-});
+};
 
 class List extends React.Component {
   getChildContext() {
diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
index 0a2fcb3377d693..7650ad1372d7a2 100644
--- a/packages/material-ui/src/ListItem/ListItem.js
+++ b/packages/material-ui/src/ListItem/ListItem.js
@@ -27,8 +27,8 @@ export const styles = theme => ({
     paddingBottom: 12,
   },
   dense: {
-    paddingTop: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
+    paddingTop: 8,
+    paddingBottom: 8,
   },
   disabled: {
     opacity: 0.5,
@@ -54,7 +54,7 @@ export const styles = theme => ({
   secondaryAction: {
     // Add some space to avoid collision as `ListItemSecondaryAction`
     // is absolutely positionned.
-    paddingRight: theme.spacing.unit * 4,
+    paddingRight: 8 * 4,
   },
 });
 
diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
index f168f88cbb1fda..653352ab0f33b3 100644
--- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js
+++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
@@ -5,7 +5,7 @@ import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
   root: {
-    marginRight: theme.spacing.unit * 2,
+    marginRight: 8 * 2,
     color: theme.palette.action.active,
     flexShrink: 0,
   },
diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js
index ecdba460a5f191..3ef4acd843ac55 100644
--- a/packages/material-ui/src/ListItemText/ListItemText.js
+++ b/packages/material-ui/src/ListItemText/ListItemText.js
@@ -8,14 +8,14 @@ export const styles = theme => ({
   root: {
     flex: '1 1 auto',
     minWidth: 0,
-    padding: `0 ${theme.spacing.unit * 2}px`,
+    padding: `0 ${8 * 2}px`,
     '&:first-child': {
       paddingLeft: 0,
     },
   },
   inset: {
     '&:first-child': {
-      paddingLeft: theme.spacing.unit * 7,
+      paddingLeft: 8 * 7,
     },
   },
   dense: {
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js
index 01943f012d62c3..8dbc4a57e8b113 100644
--- a/packages/material-ui/src/ListSubheader/ListSubheader.js
+++ b/packages/material-ui/src/ListSubheader/ListSubheader.js
@@ -21,7 +21,7 @@ export const styles = theme => ({
     color: 'inherit',
   },
   inset: {
-    paddingLeft: theme.spacing.unit * 9,
+    paddingLeft: 8 * 9,
   },
   sticky: {
     position: 'sticky',
diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js
index 2f8aebf5e7eb12..5fef22e62ae304 100644
--- a/packages/material-ui/src/MenuItem/MenuItem.js
+++ b/packages/material-ui/src/MenuItem/MenuItem.js
@@ -9,14 +9,14 @@ import ListItem from '../ListItem';
 export const styles = theme => ({
   root: {
     ...theme.typography.subheading,
-    height: theme.spacing.unit * 3,
+    height: 8 * 3,
     boxSizing: 'content-box',
     width: 'auto',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    paddingLeft: theme.spacing.unit * 2,
-    paddingRight: theme.spacing.unit * 2,
+    paddingLeft: 8 * 2,
+    paddingRight: 8 * 2,
     '&$selected': {
       backgroundColor: theme.palette.action.selected,
     },
diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.js b/packages/material-ui/src/MobileStepper/MobileStepper.js
index ad8bca60a0d974..2ed4f6dcb58d96 100644
--- a/packages/material-ui/src/MobileStepper/MobileStepper.js
+++ b/packages/material-ui/src/MobileStepper/MobileStepper.js
@@ -15,7 +15,7 @@ export const styles = theme => ({
     justifyContent: 'space-between',
     alignItems: 'center',
     background: theme.palette.background.default,
-    padding: theme.spacing.unit,
+    padding: 8,
   },
   positionBottom: {
     position: 'fixed',
@@ -39,8 +39,8 @@ export const styles = theme => ({
   dot: {
     backgroundColor: theme.palette.action.disabled,
     borderRadius: '50%',
-    width: theme.spacing.unit,
-    height: theme.spacing.unit,
+    width: 8,
+    height: 8,
     margin: '0 2px',
   },
   dotActive: {
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js
index 18c0838118050c..3caf212b6970a6 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -18,9 +18,9 @@ export const styles = theme => ({
     // When interacting quickly, the text can end up selected.
     // Native select can't be selected either.
     userSelect: 'none',
-    paddingRight: theme.spacing.unit * 4,
-    width: `calc(100% - ${theme.spacing.unit * 4}px)`,
-    minWidth: theme.spacing.unit * 2, // So it doesn't collapse.
+    paddingRight: 8 * 4,
+    width: `calc(100% - ${8 * 4}px)`,
+    minWidth: 8 * 2, // So it doesn't collapse.
     cursor: 'pointer',
     '&:focus': {
       // Show that it's not an text input
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 89aeef5aba3775..ccbe97b5852d37 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -10,7 +10,7 @@ import Slide from '../Slide';
 import SnackbarContent from '../SnackbarContent';
 
 export const styles = theme => {
-  const gutter = theme.spacing.unit * 3;
+  const gutter = 8 * 3;
   const top = { top: 0 };
   const bottom = { bottom: 0 };
   const right = { justifyContent: 'flex-end' };
diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js
index 6c5b7f766ba583..f5de3dc9ce3467 100644
--- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js
+++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js
@@ -20,7 +20,7 @@ export const styles = theme => {
       display: 'flex',
       alignItems: 'center',
       flexWrap: 'wrap',
-      padding: `6px ${theme.spacing.unit * 3}px`,
+      padding: `6px ${8 * 3}px`,
       [theme.breakpoints.up('md')]: {
         minWidth: 288,
         maxWidth: 568,
@@ -31,14 +31,14 @@ export const styles = theme => {
       },
     },
     message: {
-      padding: `${theme.spacing.unit}px 0`,
+      padding: '8px 0',
     },
     action: {
       display: 'flex',
       alignItems: 'center',
       marginLeft: 'auto',
-      paddingLeft: theme.spacing.unit * 3,
-      marginRight: -theme.spacing.unit,
+      paddingLeft: 8 * 3,
+      marginRight: -8,
     },
   };
 };
diff --git a/packages/material-ui/src/Step/Step.js b/packages/material-ui/src/Step/Step.js
index 4b36656c0df491..83578980e0e622 100644
--- a/packages/material-ui/src/Step/Step.js
+++ b/packages/material-ui/src/Step/Step.js
@@ -4,11 +4,11 @@ import classNames from 'classnames';
 import warning from 'warning';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => ({
+export const styles = {
   root: {},
   horizontal: {
-    paddingLeft: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
+    paddingLeft: 8,
+    paddingRight: 8,
     '&:first-child': {
       paddingLeft: 0,
     },
@@ -21,7 +21,7 @@ export const styles = theme => ({
     flex: 1,
     position: 'relative',
   },
-});
+};
 
 function Step(props) {
   const {
diff --git a/packages/material-ui/src/StepButton/StepButton.js b/packages/material-ui/src/StepButton/StepButton.js
index 5200d4a9ddd1ec..ab338038ed7d64 100644
--- a/packages/material-ui/src/StepButton/StepButton.js
+++ b/packages/material-ui/src/StepButton/StepButton.js
@@ -8,11 +8,11 @@ import ButtonBase from '../ButtonBase';
 import StepLabel from '../StepLabel';
 import { isMuiElement } from '../utils/reactHelpers';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     width: '100%',
-    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
-    margin: `${-theme.spacing.unit * 3}px ${-theme.spacing.unit * 2}px`,
+    padding: `${8 * 3}px ${8 * 2}px`,
+    margin: `${-8 * 3}px ${-8 * 2}px`,
     boxSizing: 'content-box',
   },
   vertical: {
@@ -21,7 +21,7 @@ export const styles = theme => ({
   touchRipple: {
     color: 'rgba(0, 0, 0, 0.3)',
   },
-});
+};
 
 function StepButton(props) {
   const {
diff --git a/packages/material-ui/src/StepConnector/StepConnector.js b/packages/material-ui/src/StepConnector/StepConnector.js
index 8de7b2860b6a5d..f269be9e9aa4d0 100644
--- a/packages/material-ui/src/StepConnector/StepConnector.js
+++ b/packages/material-ui/src/StepConnector/StepConnector.js
@@ -10,11 +10,11 @@ export const styles = theme => ({
   horizontal: {},
   vertical: {
     marginLeft: 12, // half icon
-    padding: `0 0 ${theme.spacing.unit}px`,
+    padding: '0 0 8px',
   },
   alternativeLabel: {
     position: 'absolute',
-    top: theme.spacing.unit + 4,
+    top: 8 + 4,
     left: 'calc(50% + 20px)',
     right: 'calc(-50% + 20px)',
   },
@@ -29,7 +29,7 @@ export const styles = theme => ({
   lineVertical: {
     borderLeftStyle: 'solid',
     borderLeftWidth: 1,
-    minHeight: theme.spacing.unit * 3,
+    minHeight: 8 * 3,
   },
 });
 
diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js
index 3356b2e8f21d95..34fa520389f8b6 100644
--- a/packages/material-ui/src/StepContent/StepContent.js
+++ b/packages/material-ui/src/StepContent/StepContent.js
@@ -7,10 +7,10 @@ import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
   root: {
-    marginTop: theme.spacing.unit,
+    marginTop: 8,
     marginLeft: 12, // half icon
-    paddingLeft: theme.spacing.unit + 12, // margin + half icon
-    paddingRight: theme.spacing.unit,
+    paddingLeft: 8 + 12, // margin + half icon
+    paddingRight: 8,
     borderLeft: `1px solid ${
       theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
     }`,
diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js
index 123803b50f6b3e..dfe219202b78c2 100644
--- a/packages/material-ui/src/StepLabel/StepLabel.js
+++ b/packages/material-ui/src/StepLabel/StepLabel.js
@@ -35,14 +35,14 @@ export const styles = theme => ({
     },
     '&$alternativeLabel': {
       textAlign: 'center',
-      marginTop: theme.spacing.unit * 2,
+      marginTop: 8 * 2,
     },
     '&$error': {
       color: theme.palette.error.main,
     },
   },
   iconContainer: {
-    paddingRight: theme.spacing.unit,
+    paddingRight: 8,
     '&$alternativeLabel': {
       paddingRight: 0,
     },
diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js
index 090d0a99d6bf2a..a8b962a11672e5 100644
--- a/packages/material-ui/src/Stepper/Stepper.js
+++ b/packages/material-ui/src/Stepper/Stepper.js
@@ -7,10 +7,10 @@ import withStyles from '../styles/withStyles';
 import Paper from '../Paper';
 import StepConnector from '../StepConnector';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
-    padding: theme.spacing.unit * 3,
+    padding: 8 * 3,
   },
   horizontal: {
     flexDirection: 'row',
@@ -22,7 +22,7 @@ export const styles = theme => ({
   alternativeLabel: {
     alignItems: 'flex-start',
   },
-});
+};
 
 function Stepper(props) {
   const {
diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js
index bdea8c4d5511d3..07c4c8406b454b 100644
--- a/packages/material-ui/src/Tab/Tab.js
+++ b/packages/material-ui/src/Tab/Tab.js
@@ -72,8 +72,8 @@ export const styles = theme => ({
     paddingLeft: 12,
     paddingRight: 12,
     [theme.breakpoints.up('md')]: {
-      paddingLeft: theme.spacing.unit * 3,
-      paddingRight: theme.spacing.unit * 3,
+      paddingLeft: 8 * 3,
+      paddingRight: 8 * 3,
     },
   },
   label: {
diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
index e3a7701d0e10b2..f8a25629aa97aa 100644
--- a/packages/material-ui/src/TableCell/TableCell.js
+++ b/packages/material-ui/src/TableCell/TableCell.js
@@ -18,10 +18,9 @@ export const styles = theme => ({
         : darken(fade(theme.palette.divider, 1), 0.8)
     }`,
     textAlign: 'left',
-    padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 7}px ${theme.spacing.unit /
-      2}px ${theme.spacing.unit * 3}px`,
+    padding: `${8 / 2}px ${8 * 7}px ${8 / 2}px ${8 * 3}px`,
     '&:last-child': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 8 * 3,
     },
   },
   head: {
@@ -44,7 +43,7 @@ export const styles = theme => ({
     flexDirection: 'row-reverse', // can be dynamically inherited at runtime by contents
   },
   paddingDense: {
-    paddingRight: theme.spacing.unit * 3,
+    paddingRight: 8 * 3,
   },
   paddingCheckbox: {
     padding: '0 12px',
diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js
index 122f441a1fa980..f9dc344377a60c 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.js
+++ b/packages/material-ui/src/TablePagination/TablePagination.js
@@ -36,13 +36,13 @@ export const styles = theme => ({
     flexShrink: 0,
   },
   selectRoot: {
-    marginRight: theme.spacing.unit * 4,
-    marginLeft: theme.spacing.unit,
+    marginRight: 8 * 4,
+    marginLeft: 8,
     color: theme.palette.text.secondary,
   },
   select: {
-    paddingLeft: theme.spacing.unit,
-    paddingRight: theme.spacing.unit * 2,
+    paddingLeft: 8,
+    paddingRight: 8 * 2,
   },
   selectIcon: {
     top: 1,
@@ -50,7 +50,7 @@ export const styles = theme => ({
   actions: {
     flexShrink: 0,
     color: theme.palette.text.secondary,
-    marginLeft: theme.spacing.unit * 2.5,
+    marginLeft: 8 * 2.5,
   },
 });
 
diff --git a/packages/material-ui/src/Tabs/TabScrollButton.js b/packages/material-ui/src/Tabs/TabScrollButton.js
index 3a22746e505446..190e8074abf220 100644
--- a/packages/material-ui/src/Tabs/TabScrollButton.js
+++ b/packages/material-ui/src/Tabs/TabScrollButton.js
@@ -6,12 +6,12 @@ import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     color: 'inherit',
-    flex: `0 0 ${theme.spacing.unit * 7}px`,
+    flex: `0 0 ${8 * 7}px`,
   },
-});
+};
 
 /**
  * @ignore - internal component.
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index ddb782e941e8b5..fd382b85e8f2b2 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -34,7 +34,7 @@ export const styles = theme => ({
       easing: theme.transitions.easing.easeIn,
     }),
     minHeight: 0,
-    padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
+    padding: `${8 / 2}px 8px`,
     fontSize: theme.typography.pxToRem(10),
     lineHeight: `${theme.typography.round(14 / 10)}em`,
     '&$open': {
@@ -47,34 +47,34 @@ export const styles = theme => ({
     },
   },
   touch: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: `8px ${8 * 2}px`,
     fontSize: theme.typography.pxToRem(14),
     lineHeight: `${theme.typography.round(16 / 14)}em`,
   },
   tooltipPlacementLeft: {
     transformOrigin: 'right center',
-    margin: `0 ${theme.spacing.unit * 3}px`,
+    margin: `0 ${8 * 3}px`,
     [theme.breakpoints.up('sm')]: {
       margin: '0 14px',
     },
   },
   tooltipPlacementRight: {
     transformOrigin: 'left center',
-    margin: `0 ${theme.spacing.unit * 3}px`,
+    margin: `0 ${8 * 3}px`,
     [theme.breakpoints.up('sm')]: {
       margin: '0 14px',
     },
   },
   tooltipPlacementTop: {
     transformOrigin: 'center bottom',
-    margin: `${theme.spacing.unit * 3}px 0`,
+    margin: `${8 * 3}px 0`,
     [theme.breakpoints.up('sm')]: {
       margin: '14px 0',
     },
   },
   tooltipPlacementBottom: {
     transformOrigin: 'center top',
-    margin: `${theme.spacing.unit * 3}px 0`,
+    margin: `${8 * 3}px 0`,
     [theme.breakpoints.up('sm')]: {
       margin: '14px 0',
     },
diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js
index 1153d99d73c809..bddf07fbfe90cc 100644
--- a/packages/material-ui/src/Typography/Typography.js
+++ b/packages/material-ui/src/Typography/Typography.js
@@ -41,7 +41,7 @@ export const styles = theme => ({
     marginBottom: '0.35em',
   },
   paragraph: {
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: 8 * 2,
   },
   colorInherit: {
     color: 'inherit',