From d183b449df71b84ecc54c225ea0ba681432ce13e Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed, 8 May 2019 16:30:07 +0200
Subject: [PATCH] [docs] Add custom default props handler (#15473)

* [docs] Add custom defaultPropsHandler

* WIP defaultProps removal

Early commit to see bundle size impact.

* continue

* and now to the tricky bit

* [Grid] Resolve default props in destructuring

Removes some default values that served no purpose

* [GridListTile] Disable eslint for docs

* [CssBaseline] Use es5 syntax

* get the Grid default values back

* Upgrade react-docgen

* Use react-docgen v5 beta

* cleanup lockfile
---
 docs/scripts/buildApi.js                      |  5 +-
 docs/src/modules/utils/defaultPropsHandler.js | 90 +++++++++++++++++++
 package.json                                  |  3 +-
 packages/material-ui/src/AppBar/AppBar.js     |  7 +-
 packages/material-ui/src/Avatar/Avatar.js     |  6 +-
 packages/material-ui/src/Backdrop/Backdrop.js |  6 +-
 packages/material-ui/src/Badge/Badge.js       | 18 ++--
 .../src/BottomNavigation/BottomNavigation.js  |  9 +-
 .../src/Breadcrumbs/Breadcrumbs.js            | 18 ++--
 packages/material-ui/src/Button/Button.js     | 27 +++---
 packages/material-ui/src/ButtonBase/Ripple.js |  6 +-
 packages/material-ui/src/Card/Card.js         |  6 +-
 .../src/CardActions/CardActions.js            |  6 +-
 .../src/CardContent/CardContent.js            |  6 +-
 .../material-ui/src/CardHeader/CardHeader.js  |  9 +-
 .../material-ui/src/CardMedia/CardMedia.js    |  6 +-
 packages/material-ui/src/Checkbox/Checkbox.js | 23 +++--
 packages/material-ui/src/Chip/Chip.js         | 12 +--
 .../src/CircularProgress/CircularProgress.js  | 21 ++---
 .../ClickAwayListener/ClickAwayListener.js    |  7 +-
 packages/material-ui/src/Collapse/Collapse.js | 30 +++----
 .../material-ui/src/Container/Container.js    | 15 ++--
 .../src/CssBaseline/CssBaseline.js            |  7 +-
 packages/material-ui/src/Dialog/Dialog.js     | 31 +++----
 .../src/DialogActions/DialogActions.js        |  6 +-
 .../src/DialogContent/DialogContent.js        |  6 +-
 .../src/DialogTitle/DialogTitle.js            |  6 +-
 packages/material-ui/src/Divider/Divider.js   | 17 ++--
 packages/material-ui/src/Drawer/Drawer.js     | 21 ++---
 .../src/ExpansionPanel/ExpansionPanel.js      | 15 +---
 .../ExpansionPanelActions.js                  |  6 +-
 .../ExpansionPanelSummary.js                  |  6 +-
 packages/material-ui/src/Fab/Fab.js           | 22 ++---
 packages/material-ui/src/Fade/Fade.js         | 50 +++++++----
 .../src/FilledInput/FilledInput.js            | 21 +++--
 .../src/FormControl/FormControl.js            | 24 ++---
 .../src/FormControlLabel/FormControlLabel.js  |  6 +-
 .../material-ui/src/FormGroup/FormGroup.js    |  6 +-
 .../src/FormHelperText/FormHelperText.js      |  6 +-
 .../material-ui/src/FormLabel/FormLabel.js    |  6 +-
 packages/material-ui/src/Grid/Grid.js         | 60 +++++--------
 packages/material-ui/src/GridList/GridList.js | 15 +---
 .../src/GridListTile/GridListTile.js          | 19 ++--
 .../src/GridListTileBar/GridListTileBar.js    |  9 +-
 packages/material-ui/src/Grow/Grow.js         | 24 ++---
 packages/material-ui/src/Icon/Icon.js         | 15 ++--
 .../material-ui/src/IconButton/IconButton.js  | 18 ++--
 packages/material-ui/src/Input/Input.js       | 21 +++--
 .../src/InputAdornment/InputAdornment.js      | 12 +--
 .../material-ui/src/InputLabel/InputLabel.js  |  6 +-
 .../src/LinearProgress/LinearProgress.js      | 15 ++--
 packages/material-ui/src/Link/Link.js         | 20 +++--
 packages/material-ui/src/List/List.js         | 12 +--
 packages/material-ui/src/ListItem/ListItem.js | 24 ++---
 .../src/ListItemText/ListItemText.js          |  9 +-
 .../src/ListSubheader/ListSubheader.js        | 18 ++--
 packages/material-ui/src/Menu/Menu.js         | 12 +--
 packages/material-ui/src/MenuItem/MenuItem.js | 12 +--
 packages/material-ui/src/MenuList/MenuList.js |  6 +-
 .../src/MobileStepper/MobileStepper.js        | 12 +--
 packages/material-ui/src/Modal/TrapFocus.js   | 12 +--
 .../src/NativeSelect/NativeSelect.js          | 10 +--
 packages/material-ui/src/NoSsr/NoSsr.js       |  7 +-
 .../src/OutlinedInput/OutlinedInput.js        | 23 +++--
 packages/material-ui/src/Paper/Paper.js       | 12 +--
 packages/material-ui/src/Popper/Popper.js     | 15 +---
 packages/material-ui/src/Radio/Radio.js       |  7 +-
 packages/material-ui/src/Select/Select.js     | 23 ++---
 packages/material-ui/src/Slide/Slide.js       | 17 ++--
 packages/material-ui/src/Step/Step.js         | 12 +--
 .../src/StepConnector/StepConnector.js        |  9 +-
 .../src/StepContent/StepContent.js            |  9 +-
 packages/material-ui/src/StepIcon/StepIcon.js |  8 +-
 .../material-ui/src/StepLabel/StepLabel.js    | 22 ++---
 packages/material-ui/src/Stepper/Stepper.js   | 20 ++---
 packages/material-ui/src/SvgIcon/SvgIcon.js   | 15 +---
 packages/material-ui/src/Switch/Switch.js     |  7 +-
 packages/material-ui/src/Tab/Tab.js           | 12 +--
 packages/material-ui/src/Table/Table.js       | 15 ++--
 .../material-ui/src/TableBody/TableBody.js    |  6 +-
 .../material-ui/src/TableCell/TableCell.js    |  6 +-
 .../src/TableFooter/TableFooter.js            |  6 +-
 .../material-ui/src/TableHead/TableHead.js    |  6 +-
 .../src/TablePagination/TablePagination.js    | 21 ++---
 packages/material-ui/src/TableRow/TableRow.js | 15 ++--
 .../src/TableSortLabel/TableSortLabel.js      | 15 +---
 .../material-ui/src/Tabs/TabScrollButton.js   |  6 +-
 .../material-ui/src/TextField/TextField.js    | 12 +--
 packages/material-ui/src/Toolbar/Toolbar.js   | 12 +--
 packages/material-ui/src/Tooltip/Tooltip.js   | 33 +++----
 .../material-ui/src/Typography/Typography.js  | 27 ++----
 packages/material-ui/src/Zoom/Zoom.js         | 50 +++++++----
 pages/api/dialog.md                           |  2 +-
 pages/api/drawer.md                           |  2 +-
 pages/api/list-item.md                        |  2 +-
 pages/api/menu.md                             |  2 +-
 pages/api/popper.md                           |  2 +-
 pages/api/table-pagination.md                 |  2 +-
 yarn.lock                                     | 19 ++--
 99 files changed, 590 insertions(+), 848 deletions(-)
 create mode 100644 docs/src/modules/utils/defaultPropsHandler.js

diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js
index 4b3f55e69aee73..038c51a635995e 100644
--- a/docs/scripts/buildApi.js
+++ b/docs/scripts/buildApi.js
@@ -3,7 +3,8 @@
 import { mkdir, readFileSync, writeFileSync } from 'fs';
 import path from 'path';
 import kebabCase from 'lodash/kebabCase';
-import { parse as docgenParse } from 'react-docgen';
+import { defaultHandlers, parse as docgenParse } from 'react-docgen';
+import muiDefaultPropsHandler from '../src/modules/utils/defaultPropsHandler';
 import generateMarkdown from '../src/modules/utils/generateMarkdown';
 import { findPagesMarkdown, findComponents } from '../src/modules/utils/find';
 import { getHeaders } from '../src/modules/utils/parseMarkdown';
@@ -132,7 +133,7 @@ async function buildDocs(options) {
 
   let reactAPI;
   try {
-    reactAPI = docgenParse(src, null, null, {
+    reactAPI = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
       filename: componentObject.filename,
     });
   } catch (err) {
diff --git a/docs/src/modules/utils/defaultPropsHandler.js b/docs/src/modules/utils/defaultPropsHandler.js
new file mode 100644
index 00000000000000..a80c83b4b570c4
--- /dev/null
+++ b/docs/src/modules/utils/defaultPropsHandler.js
@@ -0,0 +1,90 @@
+import astTypes from 'ast-types';
+import { utils as docgenUtils } from 'react-docgen';
+
+const { getPropertyName, isReactForwardRefCall, printValue, resolveToValue } = docgenUtils;
+
+// based on https://github.com/reactjs/react-docgen/blob/735f39ef784312f4c0e740d4bfb812f0a7acd3d5/src/handlers/defaultPropsHandler.js#L1-L112
+// adjusted for material-ui getThemedProps
+
+const { namedTypes: types } = astTypes;
+
+function getDefaultValue(path) {
+  let node = path.node;
+  let defaultValue;
+  if (types.Literal.check(node)) {
+    defaultValue = node.raw;
+  } else {
+    if (types.AssignmentPattern.check(path.node)) {
+      path = resolveToValue(path.get('right'));
+    } else {
+      path = resolveToValue(path);
+    }
+    if (types.ImportDeclaration.check(path.node)) {
+      defaultValue = node.name;
+    } else {
+      node = path.node;
+      defaultValue = printValue(path);
+    }
+  }
+  if (typeof defaultValue !== 'undefined') {
+    return {
+      value: defaultValue,
+      computed:
+        types.CallExpression.check(node) ||
+        types.MemberExpression.check(node) ||
+        types.Identifier.check(node),
+    };
+  }
+
+  return null;
+}
+
+function getDefaultValuesFromProps(properties, documentation) {
+  properties
+    .filter(propertyPath => types.Property.check(propertyPath.node))
+    // Don't evaluate property if component is functional and the node is not an AssignmentPattern
+    .filter(propertyPath => types.AssignmentPattern.check(propertyPath.get('value').node))
+    .forEach(propertyPath => {
+      const propName = getPropertyName(propertyPath);
+      if (!propName) return;
+
+      const propDescriptor = documentation.getPropDescriptor(propName);
+      const defaultValue = getDefaultValue(propertyPath.get('value', 'right'));
+      if (defaultValue) {
+        propDescriptor.defaultValue = defaultValue;
+      }
+    });
+}
+
+function getRenderBody(componentDefinition) {
+  const value = resolveToValue(componentDefinition);
+  if (isReactForwardRefCall(value)) {
+    return value.get('arguments', 0, 'body', 'body');
+  }
+  return value.get('body', 'body');
+}
+
+function getPropsPath(functionBody) {
+  let propsPath;
+  // visitVariableDeclarator, can't use visit body.node since it looses scope information
+  functionBody
+    .filter(path => {
+      return types.VariableDeclaration.check(path.node);
+    })
+    .forEach(path => {
+      const declaratorPath = path.get('declarations', 0);
+      if (declaratorPath.get('init', 'name').value === 'props') {
+        propsPath = declaratorPath.get('id');
+      }
+    });
+
+  return propsPath;
+}
+
+export default function defaultPropsHandler(documentation, componentDefinition) {
+  const renderBody = getRenderBody(componentDefinition);
+  const props = getPropsPath(renderBody);
+  if (props !== undefined) {
+    getDefaultValuesFromProps(props.get('properties'), documentation);
+  }
+}
diff --git a/package.json b/package.json
index 550f450a67a27e..cb1a8eea3972c6 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "@zeit/next-typescript": "^1.1.1",
     "address": "^1.0.3",
     "argos-cli": "^0.1.1",
+    "ast-types": "^0.12.4",
     "autoprefixer": "^9.0.0",
     "autosuggest-highlight": "^3.1.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -171,7 +172,7 @@
     "raw-loader": "^1.0.0",
     "react": "^16.8.5",
     "react-autosuggest": "^9.3.2",
-    "react-docgen": "^4.0.1",
+    "react-docgen": "^5.0.0-beta",
     "react-dom": "^16.8.5",
     "react-draggable": "^3.0.5",
     "react-final-form": "^4.0.2",
diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js
index ddb4be5e870d09..2293a696320702 100644
--- a/packages/material-ui/src/AppBar/AppBar.js
+++ b/packages/material-ui/src/AppBar/AppBar.js
@@ -67,7 +67,7 @@ export const styles = theme => {
 };
 
 const AppBar = React.forwardRef(function AppBar(props, ref) {
-  const { classes, className, color, position, ...other } = props;
+  const { classes, className, color = 'primary', position = 'fixed', ...other } = props;
 
   return (
     <Paper
@@ -115,9 +115,4 @@ AppBar.propTypes = {
   position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static', 'relative']),
 };
 
-AppBar.defaultProps = {
-  color: 'primary',
-  position: 'fixed',
-};
-
 export default withStyles(styles, { name: 'MuiAppBar' })(AppBar);
diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js
index baf1af8e25f6c9..fc3f866e0f8241 100644
--- a/packages/material-ui/src/Avatar/Avatar.js
+++ b/packages/material-ui/src/Avatar/Avatar.js
@@ -42,7 +42,7 @@ const Avatar = React.forwardRef(function Avatar(props, ref) {
     childrenClassName: childrenClassNameProp,
     classes,
     className: classNameProp,
-    component: Component,
+    component: Component = 'div',
     imgProps,
     sizes,
     src,
@@ -143,8 +143,4 @@ Avatar.propTypes = {
   srcSet: PropTypes.string,
 };
 
-Avatar.defaultProps = {
-  component: 'div',
-};
-
 export default withStyles(styles, { name: 'MuiAvatar' })(Avatar);
diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js
index 9619d3d694f2a8..2990bbfdb7c7bd 100644
--- a/packages/material-ui/src/Backdrop/Backdrop.js
+++ b/packages/material-ui/src/Backdrop/Backdrop.js
@@ -26,7 +26,7 @@ export const styles = {
 };
 
 const Backdrop = React.forwardRef(function Backdrop(props, ref) {
-  const { classes, className, invisible, open, transitionDuration, ...other } = props;
+  const { classes, className, invisible = false, open, transitionDuration, ...other } = props;
 
   return (
     <Fade in={open} timeout={transitionDuration} {...other}>
@@ -75,8 +75,4 @@ Backdrop.propTypes = {
   ]),
 };
 
-Backdrop.defaultProps = {
-  invisible: false,
-};
-
 export default withStyles(styles, { name: 'MuiBackdrop' })(Backdrop);
diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
index e26586accf07fc..ff95302152e223 100644
--- a/packages/material-ui/src/Badge/Badge.js
+++ b/packages/material-ui/src/Badge/Badge.js
@@ -81,12 +81,12 @@ const Badge = React.forwardRef(function Badge(props, ref) {
     children,
     classes,
     className,
-    color,
-    component: ComponentProp,
+    color = 'default',
+    component: ComponentProp = 'span',
     invisible: invisibleProp,
-    max,
-    showZero,
-    variant,
+    max = 99,
+    showZero = false,
+    variant = 'standard',
     ...other
   } = props;
 
@@ -166,12 +166,4 @@ Badge.propTypes = {
   variant: PropTypes.oneOf(['standard', 'dot']),
 };
 
-Badge.defaultProps = {
-  color: 'default',
-  component: 'span',
-  max: 99,
-  showZero: false,
-  variant: 'standard',
-};
-
 export default withStyles(styles, { name: 'MuiBadge' })(Badge);
diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.js b/packages/material-ui/src/BottomNavigation/BottomNavigation.js
index e6402b9d76afee..5dc25d0832a517 100755
--- a/packages/material-ui/src/BottomNavigation/BottomNavigation.js
+++ b/packages/material-ui/src/BottomNavigation/BottomNavigation.js
@@ -19,9 +19,9 @@ const BottomNavigation = React.forwardRef(function BottomNavigation(props, ref)
     children,
     classes,
     className,
-    component: Component,
+    component: Component = 'div',
     onChange,
-    showLabels,
+    showLabels = false,
     value,
     ...other
   } = props;
@@ -91,9 +91,4 @@ BottomNavigation.propTypes = {
   value: PropTypes.any,
 };
 
-BottomNavigation.defaultProps = {
-  component: 'div',
-  showLabels: false,
-};
-
 export default withStyles(styles, { name: 'MuiBottomNavigation' })(BottomNavigation);
diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
index 59d732aad6a6b9..a1320e91278d0d 100644
--- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
+++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
@@ -52,11 +52,11 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
     children,
     classes,
     className,
-    component: Component,
-    itemsAfterCollapse,
-    itemsBeforeCollapse,
-    maxItems,
-    separator,
+    component: Component = 'nav',
+    itemsAfterCollapse = 1,
+    itemsBeforeCollapse = 1,
+    maxItems = 8,
+    separator = '/',
     ...other
   } = props;
 
@@ -157,12 +157,4 @@ Breadcrumbs.propTypes = {
   separator: PropTypes.node,
 };
 
-Breadcrumbs.defaultProps = {
-  component: 'nav',
-  itemsAfterCollapse: 1,
-  itemsBeforeCollapse: 1,
-  maxItems: 8,
-  separator: '/',
-};
-
 export default withStyles(styles, { name: 'MuiBreadcrumbs' })(Breadcrumbs);
diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
index c6e3693fcc4b33..a92377e384fd47 100644
--- a/packages/material-ui/src/Button/Button.js
+++ b/packages/material-ui/src/Button/Button.js
@@ -188,13 +188,15 @@ const Button = React.forwardRef(function Button(props, ref) {
     children,
     classes,
     className: classNameProp,
-    color,
-    disabled,
-    disableFocusRipple,
+    color = 'default',
+    component = 'button',
+    disabled = false,
+    disableFocusRipple = false,
     focusVisibleClassName,
-    fullWidth,
-    size,
-    variant,
+    fullWidth = false,
+    size = 'medium',
+    type = 'button',
+    variant = 'text',
     ...other
   } = props;
 
@@ -223,10 +225,12 @@ const Button = React.forwardRef(function Button(props, ref) {
   return (
     <ButtonBase
       className={className}
+      component={component}
       disabled={disabled}
       focusRipple={!disableFocusRipple}
       focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
       ref={ref}
+      type={type}
       {...other}
     >
       <span className={classes.label}>{children}</span>
@@ -298,15 +302,4 @@ Button.propTypes = {
   variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
 };
 
-Button.defaultProps = {
-  color: 'default',
-  component: 'button',
-  disabled: false,
-  disableFocusRipple: false,
-  fullWidth: false,
-  size: 'medium',
-  type: 'button',
-  variant: 'text',
-};
-
 export default withStyles(styles, { name: 'MuiButton' })(Button);
diff --git a/packages/material-ui/src/ButtonBase/Ripple.js b/packages/material-ui/src/ButtonBase/Ripple.js
index ecdeaf71cc8cf7..1945bbfc588b1e 100644
--- a/packages/material-ui/src/ButtonBase/Ripple.js
+++ b/packages/material-ui/src/ButtonBase/Ripple.js
@@ -7,7 +7,7 @@ import { Transition } from 'react-transition-group';
  * @ignore - internal component.
  */
 function Ripple(props) {
-  const { classes, className, pulsate, rippleX, rippleY, rippleSize, ...other } = props;
+  const { classes, className, pulsate = false, rippleX, rippleY, rippleSize, ...other } = props;
   const [visible, setVisible] = React.useState(false);
   const [leaving, setLeaving] = React.useState(false);
 
@@ -77,8 +77,4 @@ Ripple.propTypes = {
   rippleY: PropTypes.number,
 };
 
-Ripple.defaultProps = {
-  pulsate: false,
-};
-
 export default Ripple;
diff --git a/packages/material-ui/src/Card/Card.js b/packages/material-ui/src/Card/Card.js
index ded7621288e54b..15552f69a726ed 100644
--- a/packages/material-ui/src/Card/Card.js
+++ b/packages/material-ui/src/Card/Card.js
@@ -12,7 +12,7 @@ export const styles = {
 };
 
 const Card = React.forwardRef(function Card(props, ref) {
-  const { classes, className, raised, ...other } = props;
+  const { classes, className, raised = false, ...other } = props;
 
   return (
     <Paper
@@ -40,8 +40,4 @@ Card.propTypes = {
   raised: PropTypes.bool,
 };
 
-Card.defaultProps = {
-  raised: false,
-};
-
 export default withStyles(styles, { name: 'MuiCard' })(Card);
diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js
index 22387f70cd4040..ee57f01201adee 100644
--- a/packages/material-ui/src/CardActions/CardActions.js
+++ b/packages/material-ui/src/CardActions/CardActions.js
@@ -20,7 +20,7 @@ export const styles = {
 };
 
 const CardActions = React.forwardRef(function CardActions(props, ref) {
-  const { disableSpacing, classes, className, ...other } = props;
+  const { disableSpacing = false, classes, className, ...other } = props;
 
   return (
     <div
@@ -51,8 +51,4 @@ CardActions.propTypes = {
   disableSpacing: PropTypes.bool,
 };
 
-CardActions.defaultProps = {
-  disableSpacing: false,
-};
-
 export default withStyles(styles, { name: 'MuiCardActions' })(CardActions);
diff --git a/packages/material-ui/src/CardContent/CardContent.js b/packages/material-ui/src/CardContent/CardContent.js
index 68422e6d83fc3e..1af26a5d3d0d67 100644
--- a/packages/material-ui/src/CardContent/CardContent.js
+++ b/packages/material-ui/src/CardContent/CardContent.js
@@ -14,7 +14,7 @@ export const styles = {
 };
 
 const CardContent = React.forwardRef(function CardContent(props, ref) {
-  const { classes, className, component: Component, ...other } = props;
+  const { classes, className, component: Component = 'div', ...other } = props;
 
   return <Component className={clsx(classes.root, className)} ref={ref} {...other} />;
 });
@@ -36,8 +36,4 @@ CardContent.propTypes = {
   component: PropTypes.elementType,
 };
 
-CardContent.defaultProps = {
-  component: 'div',
-};
-
 export default withStyles(styles, { name: 'MuiCardContent' })(CardContent);
diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js
index eba4955f4e5fb4..a7ac780d478d07 100644
--- a/packages/material-ui/src/CardHeader/CardHeader.js
+++ b/packages/material-ui/src/CardHeader/CardHeader.js
@@ -39,8 +39,8 @@ const CardHeader = React.forwardRef(function CardHeader(props, ref) {
     avatar,
     classes,
     className: classNameProp,
-    component: Component,
-    disableTypography,
+    component: Component = 'div',
+    disableTypography = false,
     subheader: subheaderProp,
     subheaderTypographyProps,
     title: titleProp,
@@ -141,9 +141,4 @@ CardHeader.propTypes = {
   titleTypographyProps: PropTypes.object,
 };
 
-CardHeader.defaultProps = {
-  component: 'div',
-  disableTypography: false,
-};
-
 export default withStyles(styles, { name: 'MuiCardHeader' })(CardHeader);
diff --git a/packages/material-ui/src/CardMedia/CardMedia.js b/packages/material-ui/src/CardMedia/CardMedia.js
index 6b587df3bb3023..cc0e24ca769083 100644
--- a/packages/material-ui/src/CardMedia/CardMedia.js
+++ b/packages/material-ui/src/CardMedia/CardMedia.js
@@ -23,7 +23,7 @@ export const styles = {
 const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
 
 const CardMedia = React.forwardRef(function CardMedia(props, ref) {
-  const { classes, className, component: Component, image, src, style, ...other } = props;
+  const { classes, className, component: Component = 'div', image, src, style, ...other } = props;
 
   warning(
     Boolean(image || src),
@@ -84,8 +84,4 @@ CardMedia.propTypes = {
   style: PropTypes.object,
 };
 
-CardMedia.defaultProps = {
-  component: 'div',
-};
-
 export default withStyles(styles, { name: 'MuiCardMedia' })(CardMedia);
diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js
index 05e1904c5c6877..b89fe82894d801 100644
--- a/packages/material-ui/src/Checkbox/Checkbox.js
+++ b/packages/material-ui/src/Checkbox/Checkbox.js
@@ -54,14 +54,18 @@ export const styles = theme => ({
   },
 });
 
+const defaultCheckedIcon = <CheckBoxIcon />;
+const defaultIcon = <CheckBoxOutlineBlankIcon />;
+const defaultIndeterminateIcon = <IndeterminateCheckBoxIcon />;
+
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
   const {
-    checkedIcon,
+    checkedIcon = defaultCheckedIcon,
     classes,
-    color,
-    icon,
-    indeterminate,
-    indeterminateIcon,
+    color = 'secondary',
+    icon = defaultIcon,
+    indeterminate = false,
+    indeterminateIcon = defaultIndeterminateIcon,
     inputProps,
     ...other
   } = props;
@@ -77,6 +81,7 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
         checked: classes.checked,
         disabled: classes.disabled,
       }}
+      color={color}
       inputProps={{
         'data-indeterminate': indeterminate,
         ...inputProps,
@@ -159,12 +164,4 @@ Checkbox.propTypes = {
   value: PropTypes.any,
 };
 
-Checkbox.defaultProps = {
-  checkedIcon: <CheckBoxIcon />,
-  color: 'secondary',
-  icon: <CheckBoxOutlineBlankIcon />,
-  indeterminate: false,
-  indeterminateIcon: <IndeterminateCheckBoxIcon />,
-};
-
 export default withStyles(styles, { name: 'MuiCheckbox' })(Checkbox);
diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
index a88457bb2ef9ba..b45d2b0b84ff52 100644
--- a/packages/material-ui/src/Chip/Chip.js
+++ b/packages/material-ui/src/Chip/Chip.js
@@ -226,8 +226,8 @@ const Chip = React.forwardRef(function Chip(props, ref) {
     classes,
     className: classNameProp,
     clickable: clickableProp,
-    color,
-    component: Component,
+    color = 'default',
+    component: Component = 'div',
     deleteIcon: deleteIconProp,
     icon: iconProp,
     label,
@@ -235,7 +235,7 @@ const Chip = React.forwardRef(function Chip(props, ref) {
     onDelete,
     onKeyDown,
     onKeyUp,
-    variant,
+    variant = 'default',
     ...other
   } = props;
 
@@ -447,10 +447,4 @@ Chip.propTypes = {
   variant: PropTypes.oneOf(['default', 'outlined']),
 };
 
-Chip.defaultProps = {
-  component: 'div',
-  color: 'default',
-  variant: 'default',
-};
-
 export default withStyles(styles, { name: 'MuiChip' })(Chip);
diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js
index 30785220e59909..76ab4276e2c36f 100644
--- a/packages/material-ui/src/CircularProgress/CircularProgress.js
+++ b/packages/material-ui/src/CircularProgress/CircularProgress.js
@@ -106,13 +106,13 @@ const CircularProgress = React.forwardRef(function CircularProgress(props, ref)
   const {
     classes,
     className,
-    color,
-    disableShrink,
-    size,
+    color = 'primary',
+    disableShrink = false,
+    size = 40,
     style,
-    thickness,
-    value,
-    variant,
+    thickness = 3.6,
+    value = 0,
+    variant = 'indeterminate',
     ...other
   } = props;
 
@@ -224,13 +224,4 @@ CircularProgress.propTypes = {
   variant: PropTypes.oneOf(['determinate', 'indeterminate', 'static']),
 };
 
-CircularProgress.defaultProps = {
-  color: 'primary',
-  disableShrink: false,
-  size: 40,
-  thickness: 3.6,
-  value: 0,
-  variant: 'indeterminate',
-};
-
 export default withStyles(styles, { name: 'MuiCircularProgress', flip: false })(CircularProgress);
diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
index 353889d21619cf..08585b90a93b84 100644
--- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
+++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
@@ -23,7 +23,7 @@ function useMountedRef() {
  * For instance, if you need to hide a menu when people click anywhere else on your page.
  */
 function ClickAwayListener(props) {
-  const { children, mouseEvent, touchEvent, onClickAway } = props;
+  const { children, mouseEvent = 'onMouseUp', touchEvent = 'onTouchEnd', onClickAway } = props;
   const mountedRef = useMountedRef();
   const movedRef = React.useRef(false);
 
@@ -117,9 +117,4 @@ if (process.env.NODE_ENV !== 'production') {
   ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
 }
 
-ClickAwayListener.defaultProps = {
-  mouseEvent: 'onMouseUp',
-  touchEvent: 'onTouchEnd',
-};
-
 export default ClickAwayListener;
diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js
index ed4fd71fb49a99..754ca74eb8120c 100644
--- a/packages/material-ui/src/Collapse/Collapse.js
+++ b/packages/material-ui/src/Collapse/Collapse.js
@@ -43,8 +43,8 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
     children,
     classes,
     className,
-    collapsedHeight,
-    component: Component,
+    collapsedHeight = '0px',
+    component: Component = 'div',
     in: inProp,
     onEnter,
     onEntered,
@@ -53,7 +53,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
     onExiting,
     style,
     theme,
-    timeout,
+    timeout = duration.standard,
     ...other
   } = props;
   const timer = React.useRef();
@@ -77,9 +77,12 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
   const handleEntering = node => {
     const wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
 
-    const { duration: transitionDuration } = getTransitionProps(props, {
-      mode: 'enter',
-    });
+    const { duration: transitionDuration } = getTransitionProps(
+      { style, timeout },
+      {
+        mode: 'enter',
+      },
+    );
 
     if (timeout === 'auto') {
       const duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
@@ -117,9 +120,12 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
   const handleExiting = node => {
     const wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
 
-    const { duration: transitionDuration } = getTransitionProps(props, {
-      mode: 'exit',
-    });
+    const { duration: transitionDuration } = getTransitionProps(
+      { style, timeout },
+      {
+        mode: 'exit',
+      },
+    );
 
     if (timeout === 'auto') {
       const duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
@@ -249,12 +255,6 @@ Collapse.propTypes = {
   ]),
 };
 
-Collapse.defaultProps = {
-  collapsedHeight: '0px',
-  component: 'div',
-  timeout: duration.standard,
-};
-
 Collapse.muiSupportAuto = true;
 
 export default withStyles(styles, {
diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js
index 4d7bc398db9385..72b3878b116dc9 100644
--- a/packages/material-ui/src/Container/Container.js
+++ b/packages/material-ui/src/Container/Container.js
@@ -59,7 +59,14 @@ export const styles = theme => ({
 });
 
 const Container = React.forwardRef(function Container(props, ref) {
-  const { classes, className, component: Component, fixed, maxWidth, ...other } = props;
+  const {
+    classes,
+    className,
+    component: Component = 'div',
+    fixed = false,
+    maxWidth = 'lg',
+    ...other
+  } = props;
 
   return (
     <Component
@@ -108,10 +115,4 @@ Container.propTypes = {
   maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
 };
 
-Container.defaultProps = {
-  component: 'div',
-  fixed: false,
-  maxWidth: 'lg',
-};
-
 export default withStyles(styles, { name: 'MuiContainer' })(Container);
diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js
index ce335df62d9181..5a115a2469dd85 100644
--- a/packages/material-ui/src/CssBaseline/CssBaseline.js
+++ b/packages/material-ui/src/CssBaseline/CssBaseline.js
@@ -35,8 +35,9 @@ const useStyles = makeStyles(
  * Kickstart an elegant, consistent, and simple baseline to build upon.
  */
 function CssBaseline(props) {
+  const { children = null } = props;
   useStyles();
-  return <React.Fragment>{props.children}</React.Fragment>;
+  return <React.Fragment>{children}</React.Fragment>;
 }
 
 CssBaseline.propTypes = {
@@ -51,8 +52,4 @@ if (process.env.NODE_ENV !== 'production') {
   CssBaseline['propTypes' + ''] = exactProp(CssBaseline.propTypes);
 }
 
-CssBaseline.defaultProps = {
-  children: null,
-};
-
 export default CssBaseline;
diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js
index ec9381cbb00d37..5145446efcd6c3 100644
--- a/packages/material-ui/src/Dialog/Dialog.js
+++ b/packages/material-ui/src/Dialog/Dialog.js
@@ -132,6 +132,7 @@ export const styles = theme => ({
   },
 });
 
+const defaultTransitionDuration = { enter: duration.enteringScreen, exit: duration.leavingScreen };
 /**
  * Dialogs are overlaid modal paper based components with a backdrop.
  */
@@ -141,11 +142,11 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
     children,
     classes,
     className,
-    disableBackdropClick,
-    disableEscapeKeyDown,
-    fullScreen,
-    fullWidth,
-    maxWidth,
+    disableBackdropClick = false,
+    disableEscapeKeyDown = false,
+    fullScreen = false,
+    fullWidth = false,
+    maxWidth = 'sm',
     onBackdropClick,
     onClose,
     onEnter,
@@ -156,11 +157,11 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
     onExited,
     onExiting,
     open,
-    PaperComponent,
+    PaperComponent = Paper,
     PaperProps = {},
-    scroll,
-    TransitionComponent,
-    transitionDuration,
+    scroll = 'paper',
+    TransitionComponent = Fade,
+    transitionDuration = defaultTransitionDuration,
     TransitionProps,
     ...other
   } = props;
@@ -365,16 +366,4 @@ Dialog.propTypes = {
   TransitionProps: PropTypes.object,
 };
 
-Dialog.defaultProps = {
-  disableBackdropClick: false,
-  disableEscapeKeyDown: false,
-  fullScreen: false,
-  fullWidth: false,
-  maxWidth: 'sm',
-  PaperComponent: Paper,
-  scroll: 'paper',
-  TransitionComponent: Fade,
-  transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
-};
-
 export default withStyles(styles, { name: 'MuiDialog' })(Dialog);
diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
index 5621f4c13ff13b..072947675c5d5d 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -21,7 +21,7 @@ export const styles = {
 };
 
 const DialogActions = React.forwardRef(function DialogActions(props, ref) {
-  const { disableSpacing, classes, className, ...other } = props;
+  const { disableSpacing = false, classes, className, ...other } = props;
 
   return (
     <div
@@ -52,8 +52,4 @@ DialogActions.propTypes = {
   disableSpacing: PropTypes.bool,
 };
 
-DialogActions.defaultProps = {
-  disableSpacing: false,
-};
-
 export default withStyles(styles, { name: 'MuiDialogActions' })(DialogActions);
diff --git a/packages/material-ui/src/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js
index 3b80df1163b60c..96ff881d97b4cd 100644
--- a/packages/material-ui/src/DialogContent/DialogContent.js
+++ b/packages/material-ui/src/DialogContent/DialogContent.js
@@ -19,7 +19,7 @@ export const styles = theme => ({
 });
 
 const DialogContent = React.forwardRef(function DialogContent(props, ref) {
-  const { classes, className, dividers, ...other } = props;
+  const { classes, className, dividers = false, ...other } = props;
 
   return (
     <div
@@ -56,8 +56,4 @@ DialogContent.propTypes = {
   dividers: PropTypes.bool,
 };
 
-DialogContent.defaultProps = {
-  dividers: false,
-};
-
 export default withStyles(styles, { name: 'MuiDialogContent' })(DialogContent);
diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js
index a11b216aada706..f3cc523ce7f3f6 100644
--- a/packages/material-ui/src/DialogTitle/DialogTitle.js
+++ b/packages/material-ui/src/DialogTitle/DialogTitle.js
@@ -14,7 +14,7 @@ export const styles = {
 };
 
 const DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
-  const { children, classes, className, disableTypography, ...other } = props;
+  const { children, classes, className, disableTypography = false, ...other } = props;
 
   return (
     <div className={clsx(classes.root, className)} ref={ref} {...other}>
@@ -44,8 +44,4 @@ DialogTitle.propTypes = {
   disableTypography: PropTypes.bool,
 };
 
-DialogTitle.defaultProps = {
-  disableTypography: false,
-};
-
 export default withStyles(styles, { name: 'MuiDialogTitle' })(DialogTitle);
diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
index 6ea804f6ca2e18..b36bf954eb647d 100644
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -36,7 +36,15 @@ export const styles = theme => ({
 });
 
 const Divider = React.forwardRef(function Divider(props, ref) {
-  const { absolute, classes, className, component: Component, light, variant, ...other } = props;
+  const {
+    absolute = false,
+    classes,
+    className,
+    component: Component = 'hr',
+    light = false,
+    variant = 'fullWidth',
+    ...other
+  } = props;
 
   if (Component === 'li' && !other.role) {
     other.role = 'separator';
@@ -89,11 +97,4 @@ Divider.propTypes = {
   variant: PropTypes.oneOf(['fullWidth', 'inset', 'middle']),
 };
 
-Divider.defaultProps = {
-  absolute: false,
-  component: 'hr',
-  light: false,
-  variant: 'fullWidth',
-};
-
 export default withStyles(styles, { name: 'MuiDivider' })(Divider);
diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js
index d05b63c6473d18..2bf59265ce3658 100644
--- a/packages/material-ui/src/Drawer/Drawer.js
+++ b/packages/material-ui/src/Drawer/Drawer.js
@@ -98,26 +98,27 @@ export function getAnchor(props) {
     : props.anchor;
 }
 
+const defaultTransitionDuration = { enter: duration.enteringScreen, exit: duration.leavingScreen };
 /**
  * The properties of the [Modal](/api/modal/) component are available
  * when `variant="temporary"` is set.
  */
 const Drawer = React.forwardRef(function Drawer(props, ref) {
   const {
-    anchor: anchorProp,
+    anchor: anchorProp = 'left',
     BackdropProps,
     children,
     classes,
     className,
-    elevation,
+    elevation = 16,
     ModalProps: { BackdropProps: BackdropPropsProp, ...ModalProps } = {},
     onClose,
-    open,
+    open = false,
     PaperProps,
     SlideProps,
     theme,
-    transitionDuration,
-    variant,
+    transitionDuration = defaultTransitionDuration,
+    variant = 'temporary',
     ...other
   } = props;
 
@@ -129,7 +130,7 @@ const Drawer = React.forwardRef(function Drawer(props, ref) {
     mounted.current = true;
   }, []);
 
-  const anchor = getAnchor(props);
+  const anchor = getAnchor({ anchor: anchorProp, theme });
   const drawer = (
     <Paper
       elevation={variant === 'temporary' ? elevation : 0}
@@ -258,12 +259,4 @@ Drawer.propTypes = {
   variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary']),
 };
 
-Drawer.defaultProps = {
-  anchor: 'left',
-  elevation: 16,
-  open: false,
-  transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
-  variant: 'temporary', // Mobile first.
-};
-
 export default withStyles(styles, { name: 'MuiDrawer', flip: false, withTheme: true })(Drawer);
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
index aa5ff62e92adff..77ee415ea2dddb 100644
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -82,12 +82,12 @@ const ExpansionPanel = React.forwardRef(function ExpansionPanel(props, ref) {
     children: childrenProp,
     classes,
     className,
-    defaultExpanded,
-    disabled,
+    defaultExpanded = false,
+    disabled = false,
     expanded: expandedProp,
     onChange,
-    square,
-    TransitionComponent,
+    square = false,
+    TransitionComponent = Collapse,
     TransitionProps,
     ...other
   } = props;
@@ -201,11 +201,4 @@ ExpansionPanel.propTypes = {
   TransitionProps: PropTypes.object,
 };
 
-ExpansionPanel.defaultProps = {
-  defaultExpanded: false,
-  disabled: false,
-  square: false,
-  TransitionComponent: Collapse,
-};
-
 export default withStyles(styles, { name: 'MuiExpansionPanel' })(ExpansionPanel);
diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
index d2875b467f7f81..5451c638738196 100644
--- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
+++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
@@ -21,7 +21,7 @@ export const styles = {
 };
 
 const ExpansionPanelActions = React.forwardRef(function ExpansionPanelActions(props, ref) {
-  const { classes, className, disableSpacing, ...other } = props;
+  const { classes, className, disableSpacing = false, ...other } = props;
 
   return (
     <div
@@ -52,8 +52,4 @@ ExpansionPanelActions.propTypes = {
   disableSpacing: PropTypes.bool,
 };
 
-ExpansionPanelActions.defaultProps = {
-  disableSpacing: false,
-};
-
 export default withStyles(styles, { name: 'MuiExpansionPanelActions' })(ExpansionPanelActions);
diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
index 9511a59b2753c6..bc7eb2d2120652 100644
--- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
+++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
@@ -67,7 +67,7 @@ const ExpansionPanelSummary = React.forwardRef(function ExpansionPanelSummary(pr
     children,
     classes,
     className,
-    disabled,
+    disabled = false,
     expanded,
     expandIcon,
     IconButtonProps,
@@ -194,8 +194,4 @@ ExpansionPanelSummary.propTypes = {
   onFocusVisible: PropTypes.func,
 };
 
-ExpansionPanelSummary.defaultProps = {
-  disabled: false,
-};
-
 export default withStyles(styles, { name: 'MuiExpansionPanelSummary' })(ExpansionPanelSummary);
diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js
index 9439719d2d72bc..73c38f5d50e7a7 100644
--- a/packages/material-ui/src/Fab/Fab.js
+++ b/packages/material-ui/src/Fab/Fab.js
@@ -124,12 +124,13 @@ const Fab = React.forwardRef(function Fab(props, ref) {
     children,
     classes,
     className,
-    color,
-    disabled,
-    disableFocusRipple,
+    color = 'default',
+    component = 'button',
+    disabled = false,
+    disableFocusRipple = false,
     focusVisibleClassName,
-    size,
-    variant,
+    size = 'large',
+    variant = 'round',
     ...other
   } = props;
 
@@ -147,6 +148,7 @@ const Fab = React.forwardRef(function Fab(props, ref) {
         },
         className,
       )}
+      component={component}
       disabled={disabled}
       focusRipple={!disableFocusRipple}
       focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
@@ -218,14 +220,4 @@ Fab.propTypes = {
   variant: PropTypes.oneOf(['round', 'extended']),
 };
 
-Fab.defaultProps = {
-  color: 'default',
-  component: 'button',
-  disabled: false,
-  disableFocusRipple: false,
-  size: 'large',
-  type: 'button',
-  variant: 'round',
-};
-
 export default withStyles(styles, { name: 'MuiFab' })(Fab);
diff --git a/packages/material-ui/src/Fade/Fade.js b/packages/material-ui/src/Fade/Fade.js
index d977f5d68f9b1f..94802835c8b9e5 100644
--- a/packages/material-ui/src/Fade/Fade.js
+++ b/packages/material-ui/src/Fade/Fade.js
@@ -15,20 +15,37 @@ const styles = {
   },
 };
 
+const defaultTimeout = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen,
+};
+
 /**
  * The Fade transition is used by the [Modal](/utils/modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Fade = React.forwardRef(function Fade(props, ref) {
-  const { children, in: inProp, onEnter, onExit, style, theme, ...other } = props;
+  const {
+    children,
+    in: inProp,
+    onEnter,
+    onExit,
+    style,
+    theme,
+    timeout = defaultTimeout,
+    ...other
+  } = props;
   const handleRef = useForkRef(children.ref, ref);
 
   const handleEnter = node => {
     reflow(node); // So the animation always start from the start.
 
-    const transitionProps = getTransitionProps(props, {
-      mode: 'enter',
-    });
+    const transitionProps = getTransitionProps(
+      { style, timeout },
+      {
+        mode: 'enter',
+      },
+    );
     node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
     node.style.transition = theme.transitions.create('opacity', transitionProps);
 
@@ -38,9 +55,12 @@ const Fade = React.forwardRef(function Fade(props, ref) {
   };
 
   const handleExit = node => {
-    const transitionProps = getTransitionProps(props, {
-      mode: 'exit',
-    });
+    const transitionProps = getTransitionProps(
+      { style, timeout },
+      {
+        mode: 'exit',
+      },
+    );
     node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
     node.style.transition = theme.transitions.create('opacity', transitionProps);
 
@@ -50,7 +70,14 @@ const Fade = React.forwardRef(function Fade(props, ref) {
   };
 
   return (
-    <Transition appear in={inProp} onEnter={handleEnter} onExit={handleExit} {...other}>
+    <Transition
+      appear
+      in={inProp}
+      onEnter={handleEnter}
+      onExit={handleExit}
+      timeout={timeout}
+      {...other}
+    >
       {(state, childProps) => {
         return React.cloneElement(children, {
           style: {
@@ -103,11 +130,4 @@ Fade.propTypes = {
   ]),
 };
 
-Fade.defaultProps = {
-  timeout: {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen,
-  },
-};
-
 export default withTheme(Fade);
diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
index 6a67873476208e..f05a3c1e7a37fc 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.js
+++ b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -121,7 +121,15 @@ export const styles = theme => {
 };
 
 const FilledInput = React.forwardRef(function FilledInput(props, ref) {
-  const { disableUnderline, classes, ...other } = props;
+  const {
+    disableUnderline,
+    classes,
+    fullWidth = false,
+    inputComponent = 'input',
+    multiline = false,
+    type = 'text',
+    ...other
+  } = props;
 
   return (
     <InputBase
@@ -132,7 +140,11 @@ const FilledInput = React.forwardRef(function FilledInput(props, ref) {
         }),
         underline: null,
       }}
+      fullWidth={fullWidth}
+      inputComponent={inputComponent}
+      multiline={multiline}
       ref={ref}
+      type={type}
       {...other}
     />
   );
@@ -255,13 +267,6 @@ FilledInput.propTypes = {
   value: PropTypes.any,
 };
 
-FilledInput.defaultProps = {
-  fullWidth: false,
-  inputComponent: 'input',
-  multiline: false,
-  type: 'text',
-};
-
 FilledInput.muiName = 'Input';
 
 export default withStyles(styles, { name: 'MuiFilledInput' })(FilledInput);
diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
index 755da0cdb9ae78..b011b22826c8d7 100644
--- a/packages/material-ui/src/FormControl/FormControl.js
+++ b/packages/material-ui/src/FormControl/FormControl.js
@@ -53,13 +53,13 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
     children,
     classes,
     className,
-    component: Component,
-    disabled,
-    error,
-    fullWidth,
-    margin,
-    required,
-    variant,
+    component: Component = 'div',
+    disabled = false,
+    error = false,
+    fullWidth = false,
+    margin = 'none',
+    required = false,
+    variant = 'standard',
     ...other
   } = props;
   const [adornedStart] = React.useState(() => {
@@ -209,14 +209,4 @@ FormControl.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled']),
 };
 
-FormControl.defaultProps = {
-  component: 'div',
-  disabled: false,
-  error: false,
-  fullWidth: false,
-  margin: 'none',
-  required: false,
-  variant: 'standard',
-};
-
 export default withStyles(styles, { name: 'MuiFormControl' })(FormControl);
diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
index 4d6b47ca969fdf..ecc889a8575456 100644
--- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js
+++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
@@ -61,7 +61,7 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(props, ref)
     disabled: disabledProp,
     inputRef,
     label,
-    labelPlacement,
+    labelPlacement = 'end',
     muiFormControl,
     name,
     onChange,
@@ -166,10 +166,6 @@ FormControlLabel.propTypes = {
   value: PropTypes.any,
 };
 
-FormControlLabel.defaultProps = {
-  labelPlacement: 'end',
-};
-
 export default withStyles(styles, { name: 'MuiFormControlLabel' })(
   withFormControlContext(FormControlLabel),
 );
diff --git a/packages/material-ui/src/FormGroup/FormGroup.js b/packages/material-ui/src/FormGroup/FormGroup.js
index 52674aeef0d2d5..2360fa89f55f03 100644
--- a/packages/material-ui/src/FormGroup/FormGroup.js
+++ b/packages/material-ui/src/FormGroup/FormGroup.js
@@ -22,7 +22,7 @@ export const styles = {
  * For the `Radio`, you should be using the `RadioGroup` component instead of this one.
  */
 const FormGroup = React.forwardRef(function FormGroup(props, ref) {
-  const { classes, className, row, ...other } = props;
+  const { classes, className, row = false, ...other } = props;
 
   return (
     <div
@@ -59,8 +59,4 @@ FormGroup.propTypes = {
   row: PropTypes.bool,
 };
 
-FormGroup.defaultProps = {
-  row: false,
-};
-
 export default withStyles(styles, { name: 'MuiFormGroup' })(FormGroup);
diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js
index 90e44bd233e6f8..f34c7371c1a659 100644
--- a/packages/material-ui/src/FormHelperText/FormHelperText.js
+++ b/packages/material-ui/src/FormHelperText/FormHelperText.js
@@ -46,7 +46,7 @@ const FormHelperText = React.forwardRef(function FormHelperText(props, ref) {
   const {
     classes,
     className: classNameProp,
-    component: Component,
+    component: Component = 'p',
     disabled,
     error,
     filled,
@@ -139,10 +139,6 @@ FormHelperText.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled']),
 };
 
-FormHelperText.defaultProps = {
-  component: 'p',
-};
-
 export default withStyles(styles, { name: 'MuiFormHelperText' })(
   withFormControlContext(FormHelperText),
 );
diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js
index 8fdc652333cfc6..8b2940e35e2cf1 100644
--- a/packages/material-ui/src/FormLabel/FormLabel.js
+++ b/packages/material-ui/src/FormLabel/FormLabel.js
@@ -45,7 +45,7 @@ const FormLabel = React.forwardRef(function FormLabel(props, ref) {
     children,
     classes,
     className: classNameProp,
-    component: Component,
+    component: Component = 'label',
     disabled,
     error,
     filled,
@@ -137,8 +137,4 @@ FormLabel.propTypes = {
   required: PropTypes.bool,
 };
 
-FormLabel.defaultProps = {
-  component: 'label',
-};
-
 export default withStyles(styles, { name: 'MuiFormLabel' })(withFormControlContext(FormLabel));
diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js
index 4d9656e94c9b3f..04654abf74a076 100644
--- a/packages/material-ui/src/Grid/Grid.js
+++ b/packages/material-ui/src/Grid/Grid.js
@@ -197,23 +197,23 @@ export const styles = theme => ({
 
 const Grid = React.forwardRef((props, ref) => {
   const {
-    alignContent,
-    alignItems,
+    alignContent = 'stretch',
+    alignItems = 'stretch',
     classes,
     className: classNameProp,
-    component: Component,
-    container,
-    direction,
-    item,
-    justify,
-    lg,
-    md,
-    sm,
-    spacing,
-    wrap,
-    xl,
-    xs,
-    zeroMinWidth,
+    component: Component = 'div',
+    container = false,
+    direction = 'row',
+    item = false,
+    justify = 'flex-start',
+    lg = false,
+    md = false,
+    sm = false,
+    spacing = 0,
+    wrap = 'wrap',
+    xl = false,
+    xs = false,
+    zeroMinWidth = false,
     ...other
   } = props;
 
@@ -224,13 +224,11 @@ const Grid = React.forwardRef((props, ref) => {
       [classes.item]: item,
       [classes.zeroMinWidth]: zeroMinWidth,
       [classes[`spacing-xs-${String(spacing)}`]]: container && spacing !== 0,
-      [classes[`direction-xs-${String(direction)}`]]: direction !== Grid.defaultProps.direction,
-      [classes[`wrap-xs-${String(wrap)}`]]: wrap !== Grid.defaultProps.wrap,
-      [classes[`align-items-xs-${String(alignItems)}`]]:
-        alignItems !== Grid.defaultProps.alignItems,
-      [classes[`align-content-xs-${String(alignContent)}`]]:
-        alignContent !== Grid.defaultProps.alignContent,
-      [classes[`justify-xs-${String(justify)}`]]: justify !== Grid.defaultProps.justify,
+      [classes[`direction-xs-${String(direction)}`]]: direction !== 'row',
+      [classes[`wrap-xs-${String(wrap)}`]]: wrap !== 'wrap',
+      [classes[`align-items-xs-${String(alignItems)}`]]: alignItems !== 'stretch',
+      [classes[`align-content-xs-${String(alignContent)}`]]: alignContent !== 'stretch',
+      [classes[`justify-xs-${String(justify)}`]]: justify !== 'flex-start',
       [classes[`grid-xs-${String(xs)}`]]: xs !== false,
       [classes[`grid-sm-${String(sm)}`]]: sm !== false,
       [classes[`grid-md-${String(md)}`]]: md !== false,
@@ -354,24 +352,6 @@ Grid.propTypes = {
   zeroMinWidth: PropTypes.bool,
 };
 
-Grid.defaultProps = {
-  alignContent: 'stretch',
-  alignItems: 'stretch',
-  component: 'div',
-  container: false,
-  direction: 'row',
-  item: false,
-  justify: 'flex-start',
-  lg: false,
-  md: false,
-  sm: false,
-  spacing: 0,
-  wrap: 'wrap',
-  xl: false,
-  xs: false,
-  zeroMinWidth: false,
-};
-
 const StyledGrid = withStyles(styles, { name: 'MuiGrid' })(Grid);
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/material-ui/src/GridList/GridList.js b/packages/material-ui/src/GridList/GridList.js
index 6a7cee4fdcd239..f8b1e847629a26 100644
--- a/packages/material-ui/src/GridList/GridList.js
+++ b/packages/material-ui/src/GridList/GridList.js
@@ -18,13 +18,13 @@ export const styles = {
 
 const GridList = React.forwardRef(function GridList(props, ref) {
   const {
-    cellHeight,
+    cellHeight = 180,
     children,
     classes,
     className: classNameProp,
-    cols,
-    component: Component,
-    spacing,
+    cols = 2,
+    component: Component = 'ul',
+    spacing = 4,
     style,
     ...other
   } = props;
@@ -105,11 +105,4 @@ GridList.propTypes = {
   style: PropTypes.object,
 };
 
-GridList.defaultProps = {
-  cellHeight: 180,
-  cols: 2,
-  component: 'ul',
-  spacing: 4,
-};
-
 export default withStyles(styles, { name: 'MuiGridList' })(GridList);
diff --git a/packages/material-ui/src/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js
index 5051478e3e7ce9..d367fab717d651 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.js
+++ b/packages/material-ui/src/GridListTile/GridListTile.js
@@ -63,7 +63,18 @@ function ensureImageCover(imgEl, classes) {
 }
 
 const GridListTile = React.forwardRef(function GridListTile(props, ref) {
-  const { children, classes, className, cols, component: Component, rows, ...other } = props;
+  // cols rows default values are for docs only
+  const {
+    children,
+    classes,
+    className,
+    // eslint-disable-next-line no-unused-vars
+    cols = 1,
+    component: Component = 'li',
+    // eslint-disable-next-line no-unused-vars
+    rows = 1,
+    ...other
+  } = props;
 
   const imgRef = React.useRef(null);
 
@@ -135,10 +146,4 @@ GridListTile.propTypes = {
   rows: PropTypes.number,
 };
 
-GridListTile.defaultProps = {
-  cols: 1,
-  component: 'li',
-  rows: 1,
-};
-
 export default withStyles(styles, { name: 'MuiGridListTile' })(GridListTile);
diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.js b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
index ab6485582f3c65..aca4804fdf5650 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.js
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
@@ -70,12 +70,12 @@ export const styles = theme => ({
 const GridListTileBar = React.forwardRef(function GridListTileBar(props, ref) {
   const {
     actionIcon,
-    actionPosition,
+    actionPosition = 'right',
     classes,
     className: classNameProp,
     subtitle,
     title,
-    titlePosition,
+    titlePosition = 'bottom',
     ...other
   } = props;
 
@@ -148,9 +148,4 @@ GridListTileBar.propTypes = {
   titlePosition: PropTypes.oneOf(['top', 'bottom']),
 };
 
-GridListTileBar.defaultProps = {
-  actionPosition: 'right',
-  titlePosition: 'bottom',
-};
-
 export default withStyles(styles, { name: 'MuiGridListTileBar' })(GridListTileBar);
diff --git a/packages/material-ui/src/Grow/Grow.js b/packages/material-ui/src/Grow/Grow.js
index 41159b75f9f0bb..fff4ae3c0893c7 100644
--- a/packages/material-ui/src/Grow/Grow.js
+++ b/packages/material-ui/src/Grow/Grow.js
@@ -27,7 +27,7 @@ const styles = {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Grow = React.forwardRef(function Grow(props, ref) {
-  const { children, in: inProp, onEnter, onExit, style, theme, timeout, ...other } = props;
+  const { children, in: inProp, onEnter, onExit, style, theme, timeout = 'auto', ...other } = props;
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const handleRef = useForkRef(children.ref, ref);
@@ -35,9 +35,12 @@ const Grow = React.forwardRef(function Grow(props, ref) {
   const handleEnter = node => {
     reflow(node); // So the animation always start from the start.
 
-    const { duration: transitionDuration, delay } = getTransitionProps(props, {
-      mode: 'enter',
-    });
+    const { duration: transitionDuration, delay } = getTransitionProps(
+      { style, timeout },
+      {
+        mode: 'enter',
+      },
+    );
     let duration = 0;
     if (timeout === 'auto') {
       duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
@@ -65,9 +68,12 @@ const Grow = React.forwardRef(function Grow(props, ref) {
   const handleExit = node => {
     let duration = 0;
 
-    const { duration: transitionDuration, delay } = getTransitionProps(props, {
-      mode: 'exit',
-    });
+    const { duration: transitionDuration, delay } = getTransitionProps(
+      { style, timeout },
+      {
+        mode: 'exit',
+      },
+    );
     if (timeout === 'auto') {
       duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
       autoTimeout.current = duration;
@@ -172,10 +178,6 @@ Grow.propTypes = {
   ]),
 };
 
-Grow.defaultProps = {
-  timeout: 'auto',
-};
-
 Grow.muiSupportAuto = true;
 
 export default withTheme(Grow);
diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js
index 375f44b02cba2d..b43ec6d4b85144 100644
--- a/packages/material-ui/src/Icon/Icon.js
+++ b/packages/material-ui/src/Icon/Icon.js
@@ -50,7 +50,14 @@ export const styles = theme => ({
 });
 
 const Icon = React.forwardRef(function Icon(props, ref) {
-  const { classes, className, color, component: Component, fontSize, ...other } = props;
+  const {
+    classes,
+    className,
+    color = 'inherit',
+    component: Component = 'span',
+    fontSize = 'default',
+    ...other
+  } = props;
 
   return (
     <Component
@@ -99,12 +106,6 @@ Icon.propTypes = {
   fontSize: PropTypes.oneOf(['inherit', 'default', 'small', 'large']),
 };
 
-Icon.defaultProps = {
-  color: 'inherit',
-  component: 'span',
-  fontSize: 'default',
-};
-
 Icon.muiName = 'Icon';
 
 export default withStyles(styles, { name: 'MuiIcon' })(Icon);
diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js
index d4a86a1645add4..6906839f9bcfa5 100644
--- a/packages/material-ui/src/IconButton/IconButton.js
+++ b/packages/material-ui/src/IconButton/IconButton.js
@@ -93,7 +93,16 @@ export const styles = theme => ({
  * regarding the available icon options.
  */
 const IconButton = React.forwardRef(function IconButton(props, ref) {
-  const { edge, children, classes, className, color, disabled, size, ...other } = props;
+  const {
+    edge = false,
+    children,
+    classes,
+    className,
+    color = 'default',
+    disabled = false,
+    size = 'medium',
+    ...other
+  } = props;
 
   return (
     <ButtonBase
@@ -173,11 +182,4 @@ IconButton.propTypes = {
   size: PropTypes.oneOf(['small', 'medium']),
 };
 
-IconButton.defaultProps = {
-  color: 'default',
-  disabled: false,
-  edge: false,
-  size: 'medium',
-};
-
 export default withStyles(styles, { name: 'MuiIconButton' })(IconButton);
diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
index 78d8832e292444..80b090b78c8248 100644
--- a/packages/material-ui/src/Input/Input.js
+++ b/packages/material-ui/src/Input/Input.js
@@ -89,7 +89,15 @@ export const styles = theme => {
 };
 
 const Input = React.forwardRef(function Input(props, ref) {
-  const { disableUnderline, classes, ...other } = props;
+  const {
+    disableUnderline,
+    classes,
+    fullWidth = false,
+    inputComponent = 'input',
+    multiline = false,
+    type = 'text',
+    ...other
+  } = props;
 
   return (
     <InputBase
@@ -100,7 +108,11 @@ const Input = React.forwardRef(function Input(props, ref) {
         }),
         underline: null,
       }}
+      fullWidth={fullWidth}
+      inputComponent={inputComponent}
+      multiline={multiline}
       ref={ref}
+      type={type}
       {...other}
     />
   );
@@ -223,13 +235,6 @@ Input.propTypes = {
   value: PropTypes.any,
 };
 
-Input.defaultProps = {
-  fullWidth: false,
-  inputComponent: 'input',
-  multiline: false,
-  type: 'text',
-};
-
 Input.muiName = 'Input';
 
 export default withStyles(styles, { name: 'MuiInput' })(Input);
diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.js b/packages/material-ui/src/InputAdornment/InputAdornment.js
index 9c7897f2482bf3..ab051f829d5443 100644
--- a/packages/material-ui/src/InputAdornment/InputAdornment.js
+++ b/packages/material-ui/src/InputAdornment/InputAdornment.js
@@ -38,11 +38,11 @@ export const styles = {
 const InputAdornment = React.forwardRef(function InputAdornment(props, ref) {
   const {
     children,
-    component: Component,
+    component: Component = 'div',
     classes,
     className,
-    disablePointerEvents,
-    disableTypography,
+    disablePointerEvents = false,
+    disableTypography = false,
     muiFormControl,
     position,
     variant: variantProp,
@@ -133,12 +133,6 @@ InputAdornment.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled']),
 };
 
-InputAdornment.defaultProps = {
-  component: 'div',
-  disablePointerEvents: false,
-  disableTypography: false,
-};
-
 export default withStyles(styles, { name: 'MuiInputAdornment' })(
   withFormControlContext(InputAdornment),
 );
diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js
index 3d49157c8fc97a..60b3c1bfc8ab06 100644
--- a/packages/material-ui/src/InputLabel/InputLabel.js
+++ b/packages/material-ui/src/InputLabel/InputLabel.js
@@ -85,7 +85,7 @@ const InputLabel = React.forwardRef(function InputLabel(props, ref) {
   const {
     classes,
     className,
-    disableAnimation,
+    disableAnimation = false,
     margin,
     muiFormControl,
     shrink: shrinkProp,
@@ -185,8 +185,4 @@ InputLabel.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled']),
 };
 
-InputLabel.defaultProps = {
-  disableAnimation: false,
-};
-
 export default withStyles(styles, { name: 'MuiInputLabel' })(withFormControlContext(InputLabel));
diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js
index c9890f4d73970b..359518061b62a1 100644
--- a/packages/material-ui/src/LinearProgress/LinearProgress.js
+++ b/packages/material-ui/src/LinearProgress/LinearProgress.js
@@ -171,7 +171,15 @@ export const styles = theme => ({
  * attribute to `true` on that region until it has finished loading.
  */
 const LinearProgress = React.forwardRef(function LinearProgress(props, ref) {
-  const { classes, className: classNameProp, color, value, valueBuffer, variant, ...other } = props;
+  const {
+    classes,
+    className: classNameProp,
+    color = 'primary',
+    value,
+    valueBuffer,
+    variant = 'indeterminate',
+    ...other
+  } = props;
 
   const className = clsx(
     classes.root,
@@ -273,9 +281,4 @@ LinearProgress.propTypes = {
   variant: PropTypes.oneOf(['determinate', 'indeterminate', 'buffer', 'query']),
 };
 
-LinearProgress.defaultProps = {
-  color: 'primary',
-  variant: 'indeterminate',
-};
-
 export default withStyles(styles, { name: 'MuiLinearProgress' })(LinearProgress);
diff --git a/packages/material-ui/src/Link/Link.js b/packages/material-ui/src/Link/Link.js
index 30f38409aaed48..8d2cce4f4c7de1 100644
--- a/packages/material-ui/src/Link/Link.js
+++ b/packages/material-ui/src/Link/Link.js
@@ -48,7 +48,16 @@ export const styles = {
 };
 
 const Link = React.forwardRef(function Link(props, ref) {
-  const { classes, className, component, TypographyClasses, underline, ...other } = props;
+  const {
+    classes,
+    className,
+    component = 'a',
+    color = 'primary',
+    TypographyClasses,
+    underline = 'hover',
+    variant = 'inherit',
+    ...other
+  } = props;
 
   return (
     <Typography
@@ -61,8 +70,10 @@ const Link = React.forwardRef(function Link(props, ref) {
         className,
       )}
       classes={TypographyClasses}
+      color={color}
       component={component}
       ref={ref}
+      variant={variant}
       {...other}
     />
   );
@@ -113,11 +124,4 @@ Link.propTypes = {
   variant: PropTypes.string,
 };
 
-Link.defaultProps = {
-  color: 'primary',
-  component: 'a',
-  underline: 'hover',
-  variant: 'inherit',
-};
-
 export default withStyles(styles, { name: 'MuiLink' })(Link);
diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js
index 0039c4c953b615..57f6fec4a78144 100644
--- a/packages/material-ui/src/List/List.js
+++ b/packages/material-ui/src/List/List.js
@@ -30,9 +30,9 @@ const List = React.forwardRef(function List(props, ref) {
     children,
     classes,
     className,
-    component: Component,
-    dense,
-    disablePadding,
+    component: Component = 'ul',
+    dense = false,
+    disablePadding = false,
     subheader,
     ...other
   } = props;
@@ -96,10 +96,4 @@ List.propTypes = {
   subheader: PropTypes.node,
 };
 
-List.defaultProps = {
-  component: 'ul',
-  dense: false,
-  disablePadding: false,
-};
-
 export default withStyles(styles, { name: 'MuiList' })(List);
diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
index 3e5f315134db67..ef02c38f134a8c 100644
--- a/packages/material-ui/src/ListItem/ListItem.js
+++ b/packages/material-ui/src/ListItem/ListItem.js
@@ -90,21 +90,21 @@ const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : Reac
  */
 const ListItem = React.forwardRef(function ListItem(props, ref) {
   const {
-    alignItems,
+    alignItems = 'center',
     autoFocus,
-    button,
+    button = false,
     children: childrenProp,
     classes,
     className,
     component: componentProp,
-    ContainerComponent,
+    ContainerComponent = 'li',
     ContainerProps: { className: ContainerClassName, ...ContainerProps } = {},
     dense,
-    disabled,
-    disableGutters,
-    divider,
+    disabled = false,
+    disableGutters = false,
+    divider = false,
     focusVisibleClassName,
-    selected,
+    selected = false,
     ...other
   } = props;
 
@@ -290,14 +290,4 @@ ListItem.propTypes = {
   selected: PropTypes.bool,
 };
 
-ListItem.defaultProps = {
-  alignItems: 'center',
-  button: false,
-  ContainerComponent: 'li',
-  disabled: false,
-  disableGutters: false,
-  divider: false,
-  selected: false,
-};
-
 export default withStyles(styles, { name: 'MuiListItem' })(ListItem);
diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js
index 3aca24cd174a69..0df2de52521f1f 100644
--- a/packages/material-ui/src/ListItemText/ListItemText.js
+++ b/packages/material-ui/src/ListItemText/ListItemText.js
@@ -35,8 +35,8 @@ const ListItemText = React.forwardRef(function ListItemText(props, ref) {
     children,
     classes,
     className,
-    disableTypography,
-    inset,
+    disableTypography = false,
+    inset = false,
     primary: primaryProp,
     primaryTypographyProps,
     secondary: secondaryProp,
@@ -139,9 +139,4 @@ ListItemText.propTypes = {
   secondaryTypographyProps: PropTypes.object,
 };
 
-ListItemText.defaultProps = {
-  disableTypography: false,
-  inset: false,
-};
-
 export default withStyles(styles, { name: 'MuiListItemText' })(ListItemText);
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js
index f2fcd0fb2a4278..7157f18da01ec5 100644
--- a/packages/material-ui/src/ListSubheader/ListSubheader.js
+++ b/packages/material-ui/src/ListSubheader/ListSubheader.js
@@ -45,11 +45,11 @@ const ListSubheader = React.forwardRef(function ListSubheader(props, ref) {
   const {
     classes,
     className,
-    color,
-    component: Component,
-    disableGutters,
-    disableSticky,
-    inset,
+    color = 'default',
+    component: Component = 'li',
+    disableGutters = false,
+    disableSticky = false,
+    inset = false,
     ...other
   } = props;
 
@@ -108,12 +108,4 @@ ListSubheader.propTypes = {
   inset: PropTypes.bool,
 };
 
-ListSubheader.defaultProps = {
-  color: 'default',
-  component: 'li',
-  disableGutters: false,
-  disableSticky: false,
-  inset: false,
-};
-
 export default withStyles(styles, { name: 'MuiListSubheader' })(ListSubheader);
diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js
index 5a56965a0afd19..4fc18e1ddb71e7 100644
--- a/packages/material-ui/src/Menu/Menu.js
+++ b/packages/material-ui/src/Menu/Menu.js
@@ -40,7 +40,7 @@ const Menu = React.forwardRef(function Menu(props, ref) {
     autoFocus: autoFocusProp,
     children,
     classes,
-    disableAutoFocusItem,
+    disableAutoFocusItem = false,
     MenuListProps = {},
     onClose,
     onEntering,
@@ -48,7 +48,8 @@ const Menu = React.forwardRef(function Menu(props, ref) {
     PaperProps = {},
     PopoverClasses,
     theme,
-    variant,
+    transitionDuration = 'auto',
+    variant = 'selectedMenu',
     ...other
   } = props;
 
@@ -150,6 +151,7 @@ const Menu = React.forwardRef(function Menu(props, ref) {
       }}
       open={open}
       ref={ref}
+      transitionDuration={transitionDuration}
       {...other}
     >
       <MenuList
@@ -255,10 +257,4 @@ Menu.propTypes = {
   variant: PropTypes.oneOf(['menu', 'selectedMenu']),
 };
 
-Menu.defaultProps = {
-  disableAutoFocusItem: false,
-  transitionDuration: 'auto',
-  variant: 'selectedMenu',
-};
-
 export default withStyles(styles, { name: 'MuiMenu', withTheme: true })(Menu);
diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js
index afb0ad9d0a4959..061562686e492d 100644
--- a/packages/material-ui/src/MenuItem/MenuItem.js
+++ b/packages/material-ui/src/MenuItem/MenuItem.js
@@ -29,9 +29,9 @@ const MenuItem = React.forwardRef(function MenuItem(props, ref) {
   const {
     classes,
     className,
-    component,
-    disableGutters,
-    role,
+    component = 'li',
+    disableGutters = false,
+    role = 'menuitem',
     selected,
     tabIndex: tabIndexProp,
     ...other
@@ -104,10 +104,4 @@ MenuItem.propTypes = {
   tabIndex: PropTypes.number,
 };
 
-MenuItem.defaultProps = {
-  component: 'li',
-  disableGutters: false,
-  role: 'menuitem',
-};
-
 export default withStyles(styles, { name: 'MuiMenuItem' })(MenuItem);
diff --git a/packages/material-ui/src/MenuList/MenuList.js b/packages/material-ui/src/MenuList/MenuList.js
index 0989dcc143766b..8226da2fe42b38 100644
--- a/packages/material-ui/src/MenuList/MenuList.js
+++ b/packages/material-ui/src/MenuList/MenuList.js
@@ -76,7 +76,7 @@ function moveFocus(list, currentFocus, disableListWrap, traversalFunction, textC
 const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 
 const MenuList = React.forwardRef(function MenuList(props, ref) {
-  const { actions, autoFocus, className, onKeyDown, disableListWrap, ...other } = props;
+  const { actions, autoFocus, className, onKeyDown, disableListWrap = false, ...other } = props;
   const listRef = React.useRef(null);
   const textCriteriaRef = React.useRef({
     keys: [],
@@ -212,8 +212,4 @@ MenuList.propTypes = {
   onKeyDown: PropTypes.func,
 };
 
-MenuList.defaultProps = {
-  disableListWrap: false,
-};
-
 export default MenuList;
diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.js b/packages/material-ui/src/MobileStepper/MobileStepper.js
index 480407d5e43f03..e2d03b45ef0d9f 100644
--- a/packages/material-ui/src/MobileStepper/MobileStepper.js
+++ b/packages/material-ui/src/MobileStepper/MobileStepper.js
@@ -59,15 +59,15 @@ export const styles = theme => ({
 
 const MobileStepper = React.forwardRef(function MobileStepper(props, ref) {
   const {
-    activeStep,
+    activeStep = 0,
     backButton,
     classes,
     className,
     LinearProgressProps,
     nextButton,
-    position,
+    position = 'bottom',
     steps,
-    variant,
+    variant = 'dots',
     ...other
   } = props;
 
@@ -152,10 +152,4 @@ MobileStepper.propTypes = {
   variant: PropTypes.oneOf(['text', 'dots', 'progress']),
 };
 
-MobileStepper.defaultProps = {
-  activeStep: 0,
-  position: 'bottom',
-  variant: 'dots',
-};
-
 export default withStyles(styles, { name: 'MuiMobileStepper' })(MobileStepper);
diff --git a/packages/material-ui/src/Modal/TrapFocus.js b/packages/material-ui/src/Modal/TrapFocus.js
index 1199eaee982b53..23a3f9b1255fa6 100644
--- a/packages/material-ui/src/Modal/TrapFocus.js
+++ b/packages/material-ui/src/Modal/TrapFocus.js
@@ -10,9 +10,9 @@ import { useForkRef } from '../utils/reactHelpers';
 function TrapFocus(props) {
   const {
     children,
-    disableAutoFocus,
-    disableEnforceFocus,
-    disableRestoreFocus,
+    disableAutoFocus = false,
+    disableEnforceFocus = false,
+    disableRestoreFocus = false,
     getDoc,
     isEnabled,
     open,
@@ -168,10 +168,4 @@ TrapFocus.propTypes = {
   open: PropTypes.bool.isRequired,
 };
 
-TrapFocus.defaultProps = {
-  disableAutoFocus: false,
-  disableEnforceFocus: false,
-  disableRestoreFocus: false,
-};
-
 export default TrapFocus;
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js
index 2764b8bcdff0e9..64f99d6b59bd59 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelect.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -76,6 +76,7 @@ export const styles = theme => ({
   },
 });
 
+const defaultInput = <Input />;
 /**
  * An alternative to `<Select native />` with a much smaller bundle size footprint.
  */
@@ -83,8 +84,8 @@ const NativeSelect = React.forwardRef(function NativeSelect(props, ref) {
   const {
     children,
     classes,
-    IconComponent,
-    input,
+    IconComponent = ArrowDropDownIcon,
+    input = defaultInput,
     inputProps,
     muiFormControl,
     variant,
@@ -158,11 +159,6 @@ NativeSelect.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled']),
 };
 
-NativeSelect.defaultProps = {
-  IconComponent: ArrowDropDownIcon,
-  input: <Input />,
-};
-
 NativeSelect.muiName = 'Select';
 
 export default withStyles(styles, { name: 'MuiNativeSelect' })(
diff --git a/packages/material-ui/src/NoSsr/NoSsr.js b/packages/material-ui/src/NoSsr/NoSsr.js
index 0fcacae8882e1f..6e452008ab6dee 100644
--- a/packages/material-ui/src/NoSsr/NoSsr.js
+++ b/packages/material-ui/src/NoSsr/NoSsr.js
@@ -17,7 +17,7 @@ const useEnhancedEffect =
  * - Under too heavy server load, you can turn on service degradation.
  */
 function NoSsr(props) {
-  const { children, defer, fallback } = props;
+  const { children, defer = false, fallback = null } = props;
   const [mountedState, setMountedState] = React.useState(false);
 
   useEnhancedEffect(() => {
@@ -57,9 +57,4 @@ if (process.env.NODE_ENV !== 'production') {
   NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);
 }
 
-NoSsr.defaultProps = {
-  defer: false,
-  fallback: null,
-};
-
 export default NoSsr;
diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
index a50dca199d70ce..7ae2891166b4a9 100644
--- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js
+++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -79,7 +79,16 @@ export const styles = theme => {
 };
 
 const OutlinedInput = React.forwardRef(function OutlinedInput(props, ref) {
-  const { classes, labelWidth, notched, ...other } = props;
+  const {
+    classes,
+    fullWidth = false,
+    inputComponent = 'input',
+    labelWidth = 0,
+    multiline = false,
+    notched,
+    type = 'text',
+    ...other
+  } = props;
 
   return (
     <InputBase
@@ -99,7 +108,11 @@ const OutlinedInput = React.forwardRef(function OutlinedInput(props, ref) {
         root: clsx(classes.root, classes.underline),
         notchedOutline: null,
       }}
+      fullWidth={fullWidth}
+      inputComponent={inputComponent}
+      multiline={multiline}
       ref={ref}
+      type={type}
       {...other}
     />
   );
@@ -226,14 +239,6 @@ OutlinedInput.propTypes = {
   value: PropTypes.any,
 };
 
-OutlinedInput.defaultProps = {
-  fullWidth: false,
-  inputComponent: 'input',
-  labelWidth: 0,
-  multiline: false,
-  type: 'text',
-};
-
 OutlinedInput.muiName = 'Input';
 
 export default withStyles(styles, { name: 'MuiOutlinedInput' })(OutlinedInput);
diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js
index 53f2ef85d101e9..981db55f40d094 100644
--- a/packages/material-ui/src/Paper/Paper.js
+++ b/packages/material-ui/src/Paper/Paper.js
@@ -31,9 +31,9 @@ const Paper = React.forwardRef(function Paper(props, ref) {
   const {
     classes,
     className: classNameProp,
-    component: Component,
-    square,
-    elevation,
+    component: Component = 'div',
+    square = false,
+    elevation = 1,
     ...other
   } = props;
 
@@ -84,10 +84,4 @@ Paper.propTypes = {
   square: PropTypes.bool,
 };
 
-Paper.defaultProps = {
-  component: 'div',
-  elevation: 1,
-  square: false,
-};
-
 export default withStyles(styles, { name: 'MuiPaper' })(Paper);
diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js
index 67fe429d5323ac..9080cb999c915c 100644
--- a/packages/material-ui/src/Popper/Popper.js
+++ b/packages/material-ui/src/Popper/Popper.js
@@ -39,13 +39,13 @@ const Popper = React.forwardRef(function Popper(props, ref) {
     anchorEl,
     children,
     container,
-    disablePortal,
-    keepMounted,
+    disablePortal = false,
+    keepMounted = false,
     modifiers,
     open,
-    placement: placementProps,
+    placement: placementProps = 'bottom',
     popperOptions = {},
-    transition,
+    transition = false,
     ...other
   } = props;
   const tooltipRef = React.useRef(null);
@@ -266,11 +266,4 @@ Popper.propTypes = {
   transition: PropTypes.bool,
 };
 
-Popper.defaultProps = {
-  disablePortal: false,
-  keepMounted: false,
-  placement: 'bottom',
-  transition: false,
-};
-
 export default Popper;
diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index d7f05e72b8aa45..c012790618579e 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -56,7 +56,7 @@ const Radio = React.forwardRef(function Radio(props, ref) {
   const {
     checked: checkedProp,
     classes,
-    color,
+    color = 'secondary',
     name: nameProp,
     onChange: onChangeProp,
     ...other
@@ -78,6 +78,7 @@ const Radio = React.forwardRef(function Radio(props, ref) {
 
   return (
     <SwitchBase
+      color={color}
       type="radio"
       icon={<RadioButtonUncheckedIcon />}
       checkedIcon={<RadioButtonCheckedIcon />}
@@ -159,8 +160,4 @@ Radio.propTypes = {
   value: PropTypes.any,
 };
 
-Radio.defaultProps = {
-  color: 'secondary',
-};
-
 export default withStyles(styles, { name: 'MuiRadio' })(Radio);
diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js
index 5b2c6801d5a236..9f7ab7e67e87e7 100644
--- a/packages/material-ui/src/Select/Select.js
+++ b/packages/material-ui/src/Select/Select.js
@@ -12,19 +12,21 @@ import NativeSelectInput from '../NativeSelect/NativeSelectInput';
 
 export const styles = nativeSelectStyles;
 
+const defaultInput = <Input />;
+
 const Select = React.forwardRef(function Select(props, ref) {
   const {
-    autoWidth,
+    autoWidth = false,
     children,
     classes,
-    displayEmpty,
-    IconComponent,
-    input,
+    displayEmpty = false,
+    IconComponent = ArrowDropDownIcon,
+    input = defaultInput,
     inputProps,
     MenuProps,
     muiFormControl,
-    multiple,
-    native,
+    multiple = false,
+    native = false,
     onClose,
     onOpen,
     open,
@@ -181,15 +183,6 @@ Select.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled']),
 };
 
-Select.defaultProps = {
-  autoWidth: false,
-  displayEmpty: false,
-  IconComponent: ArrowDropDownIcon,
-  input: <Input />,
-  multiple: false,
-  native: false,
-};
-
 Select.muiName = 'Select';
 
 export default withStyles(styles, { name: 'MuiSelect' })(withFormControlContext(Select));
diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
index 172a72118ba2fd..34a599b4d011f9 100644
--- a/packages/material-ui/src/Slide/Slide.js
+++ b/packages/material-ui/src/Slide/Slide.js
@@ -65,6 +65,11 @@ export function setTranslateValue(direction, node) {
   }
 }
 
+const defaultTimeout = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen,
+};
+
 /**
  * The Slide transition is used by the [Drawer](/demos/drawers/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
@@ -72,7 +77,7 @@ export function setTranslateValue(direction, node) {
 const Slide = React.forwardRef(function Slide(props, ref) {
   const {
     children,
-    direction,
+    direction = 'down',
     in: inProp,
     onEnter,
     onEntering,
@@ -80,7 +85,7 @@ const Slide = React.forwardRef(function Slide(props, ref) {
     onExited,
     style,
     theme,
-    timeout,
+    timeout = defaultTimeout,
     ...other
   } = props;
 
@@ -269,12 +274,4 @@ Slide.propTypes = {
   ]),
 };
 
-Slide.defaultProps = {
-  direction: 'down',
-  timeout: {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen,
-  },
-};
-
 export default withTheme(Slide);
diff --git a/packages/material-ui/src/Step/Step.js b/packages/material-ui/src/Step/Step.js
index c394e38dc3cf2b..dc6d638dcbb9f1 100644
--- a/packages/material-ui/src/Step/Step.js
+++ b/packages/material-ui/src/Step/Step.js
@@ -31,14 +31,14 @@ export const styles = {
 
 const Step = React.forwardRef(function Step(props, ref) {
   const {
-    active,
+    active = false,
     alternativeLabel,
     children,
     classes,
     className: classNameProp,
-    completed,
+    completed = false,
     connector,
-    disabled,
+    disabled = false,
     index,
     last,
     orientation,
@@ -148,10 +148,4 @@ Step.propTypes = {
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
 };
 
-Step.defaultProps = {
-  active: false,
-  completed: false,
-  disabled: false,
-};
-
 export default withStyles(styles, { name: 'MuiStep' })(Step);
diff --git a/packages/material-ui/src/StepConnector/StepConnector.js b/packages/material-ui/src/StepConnector/StepConnector.js
index d88150afe5c324..c0ff6edf96fb83 100644
--- a/packages/material-ui/src/StepConnector/StepConnector.js
+++ b/packages/material-ui/src/StepConnector/StepConnector.js
@@ -49,13 +49,13 @@ export const styles = theme => ({
 const StepConnector = React.forwardRef(function StepConnector(props, ref) {
   const {
     active,
-    alternativeLabel,
+    alternativeLabel = false,
     classes,
     className: classNameProp,
     completed,
     disabled,
     index,
-    orientation,
+    orientation = 'horizontal',
     ...other
   } = props;
 
@@ -122,9 +122,4 @@ StepConnector.propTypes = {
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
 };
 
-StepConnector.defaultProps = {
-  alternativeLabel: false,
-  orientation: 'horizontal',
-};
-
 export default withStyles(styles, { name: 'MuiStepConnector' })(StepConnector);
diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js
index 5a8787a8f5e545..c014fa1803cf86 100644
--- a/packages/material-ui/src/StepContent/StepContent.js
+++ b/packages/material-ui/src/StepContent/StepContent.js
@@ -35,8 +35,8 @@ const StepContent = React.forwardRef(function StepContent(props, ref) {
     last,
     optional,
     orientation,
-    TransitionComponent,
-    transitionDuration: transitionDurationProp,
+    TransitionComponent = Collapse,
+    transitionDuration: transitionDurationProp = 'auto',
     TransitionProps,
     ...other
   } = props;
@@ -129,9 +129,4 @@ StepContent.propTypes = {
   TransitionProps: PropTypes.object,
 };
 
-StepContent.defaultProps = {
-  TransitionComponent: Collapse,
-  transitionDuration: 'auto',
-};
-
 export default withStyles(styles, { name: 'MuiStepContent' })(StepContent);
diff --git a/packages/material-ui/src/StepIcon/StepIcon.js b/packages/material-ui/src/StepIcon/StepIcon.js
index d72fc41c1f455c..560b9e16c74215 100644
--- a/packages/material-ui/src/StepIcon/StepIcon.js
+++ b/packages/material-ui/src/StepIcon/StepIcon.js
@@ -36,7 +36,7 @@ export const styles = theme => ({
 });
 
 const StepIcon = React.forwardRef(function StepIcon(props, ref) {
-  const { completed, icon, active, error, classes } = props;
+  const { completed = false, icon, active = false, error = false, classes } = props;
 
   if (typeof icon === 'number' || typeof icon === 'string') {
     if (error) {
@@ -87,10 +87,4 @@ StepIcon.propTypes = {
   icon: PropTypes.node.isRequired,
 };
 
-StepIcon.defaultProps = {
-  active: false,
-  completed: false,
-  error: false,
-};
-
 export default withStyles(styles, { name: 'MuiStepIcon' })(StepIcon);
diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js
index 104d290e2341a5..47f86564b5dc46 100644
--- a/packages/material-ui/src/StepLabel/StepLabel.js
+++ b/packages/material-ui/src/StepLabel/StepLabel.js
@@ -67,18 +67,18 @@ export const styles = theme => ({
 
 const StepLabel = React.forwardRef(function StepLabel(props, ref) {
   const {
-    active,
-    alternativeLabel,
+    active = false,
+    alternativeLabel = false,
     children,
     classes,
     className: classNameProp,
-    completed,
-    disabled,
-    error,
+    completed = false,
+    disabled = false,
+    error = false,
     icon,
     last,
     optional,
-    orientation,
+    orientation = 'horizontal',
     StepIconComponent: StepIconComponentProp,
     StepIconProps,
     ...other
@@ -204,16 +204,6 @@ StepLabel.propTypes = {
   StepIconProps: PropTypes.object,
 };
 
-StepLabel.defaultProps = {
-  active: false,
-  alternativeLabel: false,
-  completed: false,
-  disabled: false,
-  error: false,
-  last: false,
-  orientation: 'horizontal',
-};
-
 StepLabel.muiName = 'StepLabel';
 
 export default withStyles(styles, { name: 'MuiStepLabel' })(StepLabel);
diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js
index 5a0672898e2e0e..174845800c14a6 100644
--- a/packages/material-ui/src/Stepper/Stepper.js
+++ b/packages/material-ui/src/Stepper/Stepper.js
@@ -26,16 +26,18 @@ export const styles = {
   },
 };
 
+const defaultConnector = <StepConnector />;
+
 const Stepper = React.forwardRef(function Stepper(props, ref) {
   const {
-    activeStep,
-    alternativeLabel,
+    activeStep = 0,
+    alternativeLabel = false,
     children,
     classes,
     className: classNameProp,
-    connector: connectorProp,
-    nonLinear,
-    orientation,
+    connector: connectorProp = defaultConnector,
+    nonLinear = false,
+    orientation = 'horizontal',
     ...other
   } = props;
 
@@ -131,12 +133,4 @@ Stepper.propTypes = {
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
 };
 
-Stepper.defaultProps = {
-  activeStep: 0,
-  alternativeLabel: false,
-  connector: <StepConnector />,
-  nonLinear: false,
-  orientation: 'horizontal',
-};
-
 export default withStyles(styles, { name: 'MuiStepper' })(Stepper);
diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js
index ba6f141a3e2fd5..1855a94ed39dcc 100644
--- a/packages/material-ui/src/SvgIcon/SvgIcon.js
+++ b/packages/material-ui/src/SvgIcon/SvgIcon.js
@@ -57,12 +57,12 @@ const SvgIcon = React.forwardRef(function SvgIcon(props, ref) {
     children,
     classes,
     className,
-    color,
-    component: Component,
-    fontSize,
+    color = 'inherit',
+    component: Component = 'svg',
+    fontSize = 'default',
     htmlColor,
     titleAccess,
-    viewBox,
+    viewBox = '0 0 24 24',
     ...other
   } = props;
 
@@ -143,13 +143,6 @@ SvgIcon.propTypes = {
   viewBox: PropTypes.string,
 };
 
-SvgIcon.defaultProps = {
-  color: 'inherit',
-  component: 'svg',
-  fontSize: 'default',
-  viewBox: '0 0 24 24',
-};
-
 SvgIcon.muiName = 'SvgIcon';
 
 export default withStyles(styles, { name: 'MuiSvgIcon' })(SvgIcon);
diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index c979714ea6ff0c..af66752dbbd2ea 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -124,7 +124,7 @@ export const styles = theme => ({
 });
 
 const Switch = React.forwardRef(function Switch(props, ref) {
-  const { classes, className, color, edge, ...other } = props;
+  const { classes, className, color = 'secondary', edge = false, ...other } = props;
   const icon = <span className={classes.thumb} />;
 
   return (
@@ -231,9 +231,4 @@ Switch.propTypes = {
   value: PropTypes.any,
 };
 
-Switch.defaultProps = {
-  color: 'secondary',
-  edge: false,
-};
-
 export default withStyles(styles, { name: 'MuiSwitch' })(Switch);
diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js
index e2e3cb703fbc79..af9ab96becdafd 100644
--- a/packages/material-ui/src/Tab/Tab.js
+++ b/packages/material-ui/src/Tab/Tab.js
@@ -97,7 +97,7 @@ const Tab = React.forwardRef(function Tab(props, ref) {
   const {
     classes,
     className,
-    disabled,
+    disabled = false,
     fullWidth,
     icon,
     indicator,
@@ -105,9 +105,9 @@ const Tab = React.forwardRef(function Tab(props, ref) {
     onChange,
     onClick,
     selected,
-    textColor,
+    textColor = 'inherit',
     value,
-    wrapped,
+    wrapped = false,
     ...other
   } = props;
 
@@ -216,10 +216,4 @@ Tab.propTypes = {
   wrapped: PropTypes.bool,
 };
 
-Tab.defaultProps = {
-  disabled: false,
-  textColor: 'inherit',
-  wrapped: false,
-};
-
 export default withStyles(styles, { name: 'MuiTab' })(Tab);
diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js
index eefa6bd1f748e3..9f6e189a1ba3a5 100644
--- a/packages/material-ui/src/Table/Table.js
+++ b/packages/material-ui/src/Table/Table.js
@@ -15,7 +15,14 @@ export const styles = {
 };
 
 const Table = React.forwardRef(function Table(props, ref) {
-  const { classes, className, component: Component, padding, size, ...other } = props;
+  const {
+    classes,
+    className,
+    component: Component = 'table',
+    padding = 'default',
+    size = 'medium',
+    ...other
+  } = props;
   const table = React.useMemo(() => ({ padding, size }), [padding, size]);
 
   return (
@@ -54,10 +61,4 @@ Table.propTypes = {
   size: PropTypes.oneOf(['small', 'medium']),
 };
 
-Table.defaultProps = {
-  component: 'table',
-  padding: 'default',
-  size: 'medium',
-};
-
 export default withStyles(styles, { name: 'MuiTable' })(Table);
diff --git a/packages/material-ui/src/TableBody/TableBody.js b/packages/material-ui/src/TableBody/TableBody.js
index fb4f6c7102c2c8..c16f707cfa3b21 100644
--- a/packages/material-ui/src/TableBody/TableBody.js
+++ b/packages/material-ui/src/TableBody/TableBody.js
@@ -16,7 +16,7 @@ const tablelvl2 = {
 };
 
 const TableBody = React.forwardRef(function TableBody(props, ref) {
-  const { classes, className, component: Component, ...other } = props;
+  const { classes, className, component: Component = 'tbody', ...other } = props;
 
   return (
     <Tablelvl2Context.Provider value={tablelvl2}>
@@ -46,8 +46,4 @@ TableBody.propTypes = {
   component: PropTypes.elementType,
 };
 
-TableBody.defaultProps = {
-  component: 'tbody',
-};
-
 export default withStyles(styles, { name: 'MuiTableBody' })(TableBody);
diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
index 38237d92d22d78..ad969449153daa 100644
--- a/packages/material-ui/src/TableCell/TableCell.js
+++ b/packages/material-ui/src/TableCell/TableCell.js
@@ -100,7 +100,7 @@ export const styles = theme => ({
 
 const TableCell = React.forwardRef(function TableCell(props, ref) {
   const {
-    align,
+    align = 'inherit',
     classes,
     className,
     component,
@@ -209,8 +209,4 @@ TableCell.propTypes = {
   variant: PropTypes.oneOf(['head', 'body', 'footer']),
 };
 
-TableCell.defaultProps = {
-  align: 'inherit',
-};
-
 export default withStyles(styles, { name: 'MuiTableCell' })(TableCell);
diff --git a/packages/material-ui/src/TableFooter/TableFooter.js b/packages/material-ui/src/TableFooter/TableFooter.js
index ba9e344a3d7560..4d06b08fe9ba40 100644
--- a/packages/material-ui/src/TableFooter/TableFooter.js
+++ b/packages/material-ui/src/TableFooter/TableFooter.js
@@ -16,7 +16,7 @@ const tablelvl2 = {
 };
 
 const TableFooter = React.forwardRef(function TableFooter(props, ref) {
-  const { classes, className, component: Component, ...other } = props;
+  const { classes, className, component: Component = 'tfoot', ...other } = props;
 
   return (
     <Tablelvl2Context.Provider value={tablelvl2}>
@@ -46,8 +46,4 @@ TableFooter.propTypes = {
   component: PropTypes.elementType,
 };
 
-TableFooter.defaultProps = {
-  component: 'tfoot',
-};
-
 export default withStyles(styles, { name: 'MuiTableFooter' })(TableFooter);
diff --git a/packages/material-ui/src/TableHead/TableHead.js b/packages/material-ui/src/TableHead/TableHead.js
index fda71dced55d36..b74091ec394895 100644
--- a/packages/material-ui/src/TableHead/TableHead.js
+++ b/packages/material-ui/src/TableHead/TableHead.js
@@ -16,7 +16,7 @@ const tablelvl2 = {
 };
 
 const TableHead = React.forwardRef(function TableHead(props, ref) {
-  const { classes, className, component: Component, ...other } = props;
+  const { classes, className, component: Component = 'thead', ...other } = props;
 
   return (
     <Tablelvl2Context.Provider value={tablelvl2}>
@@ -46,8 +46,4 @@ TableHead.propTypes = {
   component: PropTypes.elementType,
 };
 
-TableHead.defaultProps = {
-  component: 'thead',
-};
-
 export default withStyles(styles, { name: 'MuiTableHead' })(TableHead);
diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js
index 9c624df83f3864..26180bcc69f53a 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.js
+++ b/packages/material-ui/src/TablePagination/TablePagination.js
@@ -65,25 +65,28 @@ export const styles = theme => ({
   },
 });
 
+const defaultLabelDisplayedRows = ({ from, to, count }) => `${from}-${to} of ${count}`;
+const defaultRowsPerPageOptions = [10, 25, 50, 100];
+
 /**
  * A `TableCell` based component for placing inside `TableFooter` for pagination.
  */
 const TablePagination = React.forwardRef(function TablePagination(props, ref) {
   const {
-    ActionsComponent,
+    ActionsComponent = TablePaginationActions,
     backIconButtonProps,
     classes,
     colSpan: colSpanProp,
-    component: Component,
+    component: Component = TableCell,
     count,
-    labelDisplayedRows,
-    labelRowsPerPage,
+    labelDisplayedRows = defaultLabelDisplayedRows,
+    labelRowsPerPage = 'Rows per page:',
     nextIconButtonProps,
     onChangePage,
     onChangeRowsPerPage,
     page,
     rowsPerPage,
-    rowsPerPageOptions,
+    rowsPerPageOptions = defaultRowsPerPageOptions,
     SelectProps = {},
     ...other
   } = props;
@@ -233,12 +236,4 @@ TablePagination.propTypes = {
   SelectProps: PropTypes.object,
 };
 
-TablePagination.defaultProps = {
-  ActionsComponent: TablePaginationActions,
-  component: TableCell,
-  labelDisplayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`,
-  labelRowsPerPage: 'Rows per page:',
-  rowsPerPageOptions: [10, 25, 50, 100],
-};
-
 export default withStyles(styles, { name: 'MuiTablePagination' })(TablePagination);
diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js
index 2d49ac4732ec86..f0469394f5dadb 100644
--- a/packages/material-ui/src/TableRow/TableRow.js
+++ b/packages/material-ui/src/TableRow/TableRow.js
@@ -40,7 +40,14 @@ export const styles = theme => ({
  * based on the material table element parent (head, body, etc).
  */
 const TableRow = React.forwardRef(function TableRow(props, ref) {
-  const { classes, className, component: Component, hover, selected, ...other } = props;
+  const {
+    classes,
+    className,
+    component: Component = 'tr',
+    hover = false,
+    selected = false,
+    ...other
+  } = props;
   const tablelvl2 = React.useContext(Tablelvl2Context);
 
   return (
@@ -90,10 +97,4 @@ TableRow.propTypes = {
   selected: PropTypes.bool,
 };
 
-TableRow.defaultProps = {
-  component: 'tr',
-  hover: false,
-  selected: false,
-};
-
 export default withStyles(styles, { name: 'MuiTableRow' })(TableRow);
diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js
index dc023796e3e21c..4c084f8085e4d1 100644
--- a/packages/material-ui/src/TableSortLabel/TableSortLabel.js
+++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.js
@@ -62,13 +62,13 @@ export const styles = theme => ({
  */
 const TableSortLabel = React.forwardRef(function TableSortLabel(props, ref) {
   const {
-    active,
+    active = false,
     children,
     classes,
     className,
-    direction,
-    hideSortIcon,
-    IconComponent,
+    direction = 'desc',
+    hideSortIcon = false,
+    IconComponent = ArrowDownwardIcon,
     ...other
   } = props;
 
@@ -122,11 +122,4 @@ TableSortLabel.propTypes = {
   IconComponent: PropTypes.elementType,
 };
 
-TableSortLabel.defaultProps = {
-  active: false,
-  direction: 'desc',
-  hideSortIcon: false,
-  IconComponent: ArrowDownwardIcon,
-};
-
 export default withStyles(styles, { name: 'MuiTableSortLabel' })(TableSortLabel);
diff --git a/packages/material-ui/src/Tabs/TabScrollButton.js b/packages/material-ui/src/Tabs/TabScrollButton.js
index 1e489439a3996f..9ad70e818d2a95 100644
--- a/packages/material-ui/src/Tabs/TabScrollButton.js
+++ b/packages/material-ui/src/Tabs/TabScrollButton.js
@@ -19,7 +19,7 @@ export const styles = {
  * @ignore - internal component.
  */
 const TabScrollButton = React.forwardRef(function TabScrollButton(props, ref) {
-  const { classes, className: classNameProp, direction, onClick, visible, ...other } = props;
+  const { classes, className: classNameProp, direction, onClick, visible = true, ...other } = props;
 
   const className = clsx(classes.root, classNameProp);
 
@@ -58,8 +58,4 @@ TabScrollButton.propTypes = {
   visible: PropTypes.bool,
 };
 
-TabScrollButton.defaultProps = {
-  visible: true,
-};
-
 export default withStyles(styles, { name: 'PrivateTabScrollButton' })(TabScrollButton);
diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js
index e022f86a276390..c7f3eb47a70f0d 100644
--- a/packages/material-ui/src/TextField/TextField.js
+++ b/packages/material-ui/src/TextField/TextField.js
@@ -79,14 +79,14 @@ const TextField = React.forwardRef(function TextField(props, ref) {
     onChange,
     onFocus,
     placeholder,
-    required,
+    required = false,
     rows,
     rowsMax,
-    select,
+    select = false,
     SelectProps,
     type,
     value,
-    variant,
+    variant = 'standard',
     ...other
   } = props;
 
@@ -315,10 +315,4 @@ TextField.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled']),
 };
 
-TextField.defaultProps = {
-  required: false,
-  select: false,
-  variant: 'standard',
-};
-
 export default withStyles(styles, { name: 'MuiTextField' })(TextField);
diff --git a/packages/material-ui/src/Toolbar/Toolbar.js b/packages/material-ui/src/Toolbar/Toolbar.js
index a30b38ba0508aa..503df5bbfcff19 100644
--- a/packages/material-ui/src/Toolbar/Toolbar.js
+++ b/packages/material-ui/src/Toolbar/Toolbar.js
@@ -31,9 +31,9 @@ const Toolbar = React.forwardRef(function Toolbar(props, ref) {
   const {
     classes,
     className: classNameProp,
-    component: Component,
-    disableGutters,
-    variant,
+    component: Component = 'div',
+    disableGutters = false,
+    variant = 'regular',
     ...other
   } = props;
 
@@ -78,10 +78,4 @@ Toolbar.propTypes = {
   variant: PropTypes.oneOf(['regular', 'dense']),
 };
 
-Toolbar.defaultProps = {
-  component: 'div',
-  disableGutters: false,
-  variant: 'regular',
-};
-
 export default withStyles(styles, { name: 'MuiToolbar' })(Toolbar);
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index ed89b179dd7824..fad88be4e9e3d1 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -79,23 +79,23 @@ function Tooltip(props) {
   const {
     children,
     classes,
-    disableFocusListener,
-    disableHoverListener,
-    disableTouchListener,
-    enterDelay,
-    enterTouchDelay,
+    disableFocusListener = false,
+    disableHoverListener = false,
+    disableTouchListener = false,
+    enterDelay = 0,
+    enterTouchDelay = 700,
     id,
-    interactive,
-    leaveDelay,
-    leaveTouchDelay,
+    interactive = false,
+    leaveDelay = 0,
+    leaveTouchDelay = 1500,
     onClose,
     onOpen,
     open: openProp,
-    placement,
+    placement = 'bottom',
     PopperProps,
     theme,
     title,
-    TransitionComponent,
+    TransitionComponent = Grow,
     TransitionProps,
     ...other
   } = props;
@@ -505,17 +505,4 @@ Tooltip.propTypes = {
   TransitionProps: PropTypes.object,
 };
 
-Tooltip.defaultProps = {
-  disableFocusListener: false,
-  disableHoverListener: false,
-  disableTouchListener: false,
-  enterDelay: 0,
-  enterTouchDelay: 700,
-  interactive: false,
-  leaveDelay: 0,
-  leaveTouchDelay: 1500,
-  placement: 'bottom',
-  TransitionComponent: Grow,
-};
-
 export default withStyles(styles, { name: 'MuiTooltip', withTheme: true })(Tooltip);
diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js
index 4e2898efac190c..1ad330e32cb201 100644
--- a/packages/material-ui/src/Typography/Typography.js
+++ b/packages/material-ui/src/Typography/Typography.js
@@ -121,18 +121,18 @@ const defaultVariantMapping = {
 
 const Typography = React.forwardRef(function Typography(props, ref) {
   const {
-    align,
+    align = 'inherit',
     classes,
     className,
-    color,
+    color = 'initial',
     component,
-    display,
-    gutterBottom,
-    noWrap,
-    paragraph,
+    display = 'initial',
+    gutterBottom = false,
+    noWrap = false,
+    paragraph = false,
     theme,
-    variant,
-    variantMapping,
+    variant = 'body1',
+    variantMapping = defaultVariantMapping,
     ...other
   } = props;
 
@@ -247,15 +247,4 @@ Typography.propTypes = {
   variantMapping: PropTypes.object,
 };
 
-Typography.defaultProps = {
-  align: 'inherit',
-  color: 'initial',
-  display: 'initial',
-  gutterBottom: false,
-  noWrap: false,
-  paragraph: false,
-  variant: 'body1',
-  variantMapping: defaultVariantMapping,
-};
-
 export default withStyles(styles, { name: 'MuiTypography', withTheme: true })(Typography);
diff --git a/packages/material-ui/src/Zoom/Zoom.js b/packages/material-ui/src/Zoom/Zoom.js
index faed2b7d957542..cb6041e234a663 100644
--- a/packages/material-ui/src/Zoom/Zoom.js
+++ b/packages/material-ui/src/Zoom/Zoom.js
@@ -15,21 +15,38 @@ const styles = {
   },
 };
 
+const defaultTimeout = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen,
+};
+
 /**
  * The Zoom transition can be used for the floating variant of the
  * [Button](https://material-ui.com/demos/buttons/#floating-action-buttons) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Zoom = React.forwardRef(function Zoom(props, ref) {
-  const { children, in: inProp, onEnter, onExit, style, theme, ...other } = props;
+  const {
+    children,
+    in: inProp,
+    onEnter,
+    onExit,
+    style,
+    theme,
+    timeout = defaultTimeout,
+    ...other
+  } = props;
   const handleRef = useForkRef(children.ref, ref);
 
   const handleEnter = node => {
     reflow(node); // So the animation always start from the start.
 
-    const transitionProps = getTransitionProps(props, {
-      mode: 'enter',
-    });
+    const transitionProps = getTransitionProps(
+      { style, timeout },
+      {
+        mode: 'enter',
+      },
+    );
     node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
     node.style.transition = theme.transitions.create('transform', transitionProps);
 
@@ -39,9 +56,12 @@ const Zoom = React.forwardRef(function Zoom(props, ref) {
   };
 
   const handleExit = node => {
-    const transitionProps = getTransitionProps(props, {
-      mode: 'exit',
-    });
+    const transitionProps = getTransitionProps(
+      { style, timeout },
+      {
+        mode: 'exit',
+      },
+    );
     node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
     node.style.transition = theme.transitions.create('transform', transitionProps);
 
@@ -51,7 +71,14 @@ const Zoom = React.forwardRef(function Zoom(props, ref) {
   };
 
   return (
-    <Transition appear in={inProp} onEnter={handleEnter} onExit={handleExit} {...other}>
+    <Transition
+      appear
+      in={inProp}
+      onEnter={handleEnter}
+      onExit={handleExit}
+      timeout={timeout}
+      {...other}
+    >
       {(state, childProps) => {
         return React.cloneElement(children, {
           style: {
@@ -104,11 +131,4 @@ Zoom.propTypes = {
   ]),
 };
 
-Zoom.defaultProps = {
-  timeout: {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen,
-  },
-};
-
 export default withTheme(Zoom);
diff --git a/pages/api/dialog.md b/pages/api/dialog.md
index 921c4c911a889e..c48d40b57dfd30 100644
--- a/pages/api/dialog.md
+++ b/pages/api/dialog.md
@@ -36,7 +36,7 @@ Dialogs are overlaid modal paper based components with a backdrop.
 | <span class="prop-name">onExiting</span> | <span class="prop-type">func</span> |  | Callback fired when the dialog is exiting. |
 | <span class="prop-name required">open&nbsp;*</span> | <span class="prop-type">bool</span> |  | If `true`, the Dialog is open. |
 | <span class="prop-name">PaperComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Paper</span> | The component used to render the body of the dialog. |
-| <span class="prop-name">PaperProps</span> | <span class="prop-type">object</span> |  | Properties applied to the [`Paper`](/api/paper/) element. |
+| <span class="prop-name">PaperProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Properties applied to the [`Paper`](/api/paper/) element. |
 | <span class="prop-name">scroll</span> | <span class="prop-type">enum:&nbsp;'body'&nbsp;&#124;<br>&nbsp;'paper'<br></span> | <span class="prop-default">'paper'</span> | Determine the container for scrolling the dialog. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Fade</span> | The component used for the transition. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br></span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
diff --git a/pages/api/drawer.md b/pages/api/drawer.md
index 13e06024787323..fa98fe3fd070a4 100644
--- a/pages/api/drawer.md
+++ b/pages/api/drawer.md
@@ -23,7 +23,7 @@ when `variant="temporary"` is set.
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The contents of the drawer. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">elevation</span> | <span class="prop-type">number</span> | <span class="prop-default">16</span> | The elevation of the drawer. |
-| <span class="prop-name">ModalProps</span> | <span class="prop-type">object</span> |  | Properties applied to the [`Modal`](/api/modal/) element. |
+| <span class="prop-name">ModalProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Properties applied to the [`Modal`](/api/modal/) element. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the drawer is open. |
 | <span class="prop-name">PaperProps</span> | <span class="prop-type">object</span> |  | Properties applied to the [`Paper`](/api/paper/) element. |
diff --git a/pages/api/list-item.md b/pages/api/list-item.md
index bdfe616470a3a2..f543e1b1a0d02a 100644
--- a/pages/api/list-item.md
+++ b/pages/api/list-item.md
@@ -25,7 +25,7 @@ Uses an additional container component if `ListItemSecondaryAction` is the last
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> |  | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. |
 | <span class="prop-name">ContainerComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'li'</span> | The container component used when a `ListItemSecondaryAction` is the last child. |
-| <span class="prop-name">ContainerProps</span> | <span class="prop-type">object</span> |  | Properties applied to the container component if used. |
+| <span class="prop-name">ContainerProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Properties applied to the container component if used. |
 | <span class="prop-name">dense</span> | <span class="prop-type">bool</span> |  | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be disabled. |
 | <span class="prop-name">disableGutters</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the left and right padding is removed. |
diff --git a/pages/api/menu.md b/pages/api/menu.md
index d54d36889e38e7..1ff86be91550d7 100644
--- a/pages/api/menu.md
+++ b/pages/api/menu.md
@@ -23,7 +23,7 @@ import Menu from '@material-ui/core/Menu';
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | Menu contents, normally `MenuItem`s. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">disableAutoFocusItem</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Same as `autoFocus=false`. |
-| <span class="prop-name">MenuListProps</span> | <span class="prop-type">object</span> |  | Properties applied to the [`MenuList`](/api/menu-list/) element. |
+| <span class="prop-name">MenuListProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Properties applied to the [`MenuList`](/api/menu-list/) element. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback<br>*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"` |
 | <span class="prop-name">onEnter</span> | <span class="prop-type">func</span> |  | Callback fired before the Menu enters. |
 | <span class="prop-name">onEntered</span> | <span class="prop-type">func</span> |  | Callback fired when the Menu has entered. |
diff --git a/pages/api/popper.md b/pages/api/popper.md
index ecb84de34e00b4..8a61b9641e7821 100644
--- a/pages/api/popper.md
+++ b/pages/api/popper.md
@@ -26,7 +26,7 @@ Poppers rely on the 3rd party library [Popper.js](https://github.com/FezVrasta/p
 | <span class="prop-name">modifiers</span> | <span class="prop-type">object</span> |  | Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".<br>A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, [read the modifiers documentation](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#modifiers--object). |
 | <span class="prop-name required">open&nbsp;*</span> | <span class="prop-type">bool</span> |  | If `true`, the popper is visible. |
 | <span class="prop-name">placement</span> | <span class="prop-type">enum:&nbsp;'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top'<br></span> | <span class="prop-default">'bottom'</span> | Popper placement. |
-| <span class="prop-name">popperOptions</span> | <span class="prop-type">object</span> |  | Options provided to the [`popper.js`](https://github.com/FezVrasta/popper.js) instance. |
+| <span class="prop-name">popperOptions</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Options provided to the [`popper.js`](https://github.com/FezVrasta/popper.js) instance. |
 | <span class="prop-name">transition</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Help supporting a react-transition-group/Transition component. |
 
 The `ref` is forwarded to the root element.
diff --git a/pages/api/table-pagination.md b/pages/api/table-pagination.md
index 403b0498589f88..cd3a53f17109c9 100644
--- a/pages/api/table-pagination.md
+++ b/pages/api/table-pagination.md
@@ -31,7 +31,7 @@ A `TableCell` based component for placing inside `TableFooter` for pagination.
 | <span class="prop-name required">page&nbsp;*</span> | <span class="prop-type">number</span> |  | The zero-based index of the current page. |
 | <span class="prop-name required">rowsPerPage&nbsp;*</span> | <span class="prop-type">number</span> |  | The number of rows per page. |
 | <span class="prop-name">rowsPerPageOptions</span> | <span class="prop-type">array</span> | <span class="prop-default">[10, 25, 50, 100]</span> | Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. |
-| <span class="prop-name">SelectProps</span> | <span class="prop-type">object</span> |  | Properties applied to the rows per page [`Select`](/api/select/) element. |
+| <span class="prop-name">SelectProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Properties applied to the rows per page [`Select`](/api/select/) element. |
 
 The `ref` is forwarded to the root element.
 
diff --git a/yarn.lock b/yarn.lock
index c3bf6bf1fb865d..f882d36d9388cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -46,7 +46,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.0.0", "@babel/core@^7.1.6", "@babel/core@^7.2.2":
+"@babel/core@^7.0.0", "@babel/core@^7.1.6", "@babel/core@^7.2.2", "@babel/core@^7.4.0":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.4.tgz#84055750b05fcd50f9915a826b44fa347a825250"
   integrity sha512-lQgGX3FPRgbz2SKmhMtYgJvVzGZrmjaF4apZ2bLwofAKiSjxU0drPh4S/VasyYXwaTs+A1gvQ45BN8SQJzHsQQ==
@@ -2830,7 +2830,7 @@ ast-types@0.11.7:
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.7.tgz#f318bf44e339db6a320be0009ded64ec1471f46c"
   integrity sha512-2mP3TwtkY/aTv5X3ZsMpNAbOnyoC/aMJwJSoaELPkHId0nSQgFcnU4dRW3isxiz7+zBexk0ym3WNVjMiQBnJSw==
 
-ast-types@0.12.4:
+"ast-types@0.12.4", "ast-types@^0.12.4":
   version "0.12.4"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.12.4.tgz#71ce6383800f24efc9a1a3308f3a6e420a0974d1"
   integrity sha512-ky/YVYCbtVAS8TdMIaTiPFHwEpRB5z1hctepJplTr3UW5q8TDrpIMCILyk8pmLxGtn2KCtC/lSn7zOsaI7nzDw==
@@ -11268,18 +11268,19 @@ react-display-name@^0.2.4:
   resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.4.tgz#e2a670b81d79a2204335510c01246f4c92ff12cf"
   integrity sha512-zvU6iouW+SWwHTyThwxGICjJYCMZFk/6r/+jmOdC7ntQoPlS/Pqb81MkxaMf2bHTSq9TN3K3zX2/ayMW/jCtyA==
 
-react-docgen@^4.0.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-4.1.1.tgz#8fef0212dbf14733e09edecef1de6b224d87219e"
-  integrity sha512-o1wdswIxbgJRI4pckskE7qumiFyqkbvCO++TylEDOo2RbMiueIOg8YzKU4X9++r0DjrbXePw/LHnh81GRBTWRw==
+react-docgen@^5.0.0-beta:
+  version "5.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.0.0-beta.1.tgz#3654ab8f5cb7abacbfc122c1950c45d8e77048da"
+  integrity sha512-CbbHF5jXrgyXuP3gQcN1zG4YpNj5QQuxTsEhKH3UXQN01V4cho/eL926ya6ecCWryUtlK97QGRxtK48KbCtXEQ==
   dependencies:
-    "@babel/core" "^7.0.0"
+    "@babel/core" "^7.4.4"
     "@babel/runtime" "^7.0.0"
+    ast-types "^0.12.4"
     async "^2.1.4"
     commander "^2.19.0"
     doctrine "^3.0.0"
     node-dir "^0.1.10"
-    recast "^0.17.3"
+    strip-indent "^2.0.0"
 
 react-dom@^16.8.5:
   version "16.8.6"
@@ -11737,7 +11738,7 @@ recast@^0.16.1:
     private "~0.1.5"
     source-map "~0.6.1"
 
-recast@^0.17.0, recast@^0.17.3:
+recast@^0.17.0:
   version "0.17.6"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.17.6.tgz#64ae98d0d2dfb10ff92ff5fb9ffb7371823b69fa"
   integrity sha512-yoQRMRrK1lszNtbkGyM4kN45AwylV5hMiuEveUBlxytUViWevjvX6w+tzJt1LH4cfUhWt4NZvy3ThIhu6+m5wQ==