diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js
index 26f40e5c744779..fe65c18bdc9b06 100644
--- a/docs/scripts/formattedTSDemos.js
+++ b/docs/scripts/formattedTSDemos.js
@@ -17,6 +17,9 @@ const path = require('path');
 const babel = require('@babel/core');
 const prettier = require('prettier');
 const os = require('os');
+const typescriptToProptypes = require('typescript-to-proptypes');
+
+const tsConfig = typescriptToProptypes.loadConfig(path.resolve(__dirname, '../tsconfig.json'));
 
 const babelConfig = {
   presets: ['@babel/preset-typescript'],
@@ -77,7 +80,7 @@ const TranspileResult = {
   Failed: 2,
 };
 
-async function transpileFile(tsxPath, ignoreCache = false) {
+async function transpileFile(tsxPath, program, ignoreCache = false) {
   const jsPath = tsxPath.replace('.tsx', '.js');
   try {
     if (!cacheDisabled && !ignoreCache && (await fse.exists(jsPath))) {
@@ -89,13 +92,29 @@ async function transpileFile(tsxPath, ignoreCache = false) {
     }
 
     const { code } = await babel.transformFileAsync(tsxPath, babelConfig);
-    const prettified = prettier.format(code, { ...prettierConfig, filepath: tsxPath });
+
+    if (/import \w* from 'prop-types'/.test(code)) {
+      throw new Error('TypeScript demo contains prop-types, please remove them');
+    }
+
+    const propTypesAST = typescriptToProptypes.parseFromProgram(tsxPath, program, {
+      shouldResolveObject: ({ name }) => {
+        if (name === 'classes') {
+          return false;
+        }
+
+        return undefined;
+      },
+    });
+    const codeWithPropTypes = typescriptToProptypes.inject(propTypesAST, code);
+
+    const prettified = prettier.format(codeWithPropTypes, { ...prettierConfig, filepath: tsxPath });
     const formatted = fixBabelGeneratorIssues(prettified);
 
     await fse.writeFile(jsPath, formatted);
     return TranspileResult.Success;
   } catch (err) {
-    console.error(err);
+    console.error('Something went wrong transpiling %s\n%s\n', tsxPath, err);
     return TranspileResult.Failed;
   }
 }
@@ -103,10 +122,12 @@ async function transpileFile(tsxPath, ignoreCache = false) {
 (async () => {
   const tsxFiles = await getFiles(path.join(workspaceRoot, 'docs/src/pages'));
 
+  const program = typescriptToProptypes.createProgram(tsxFiles, tsConfig);
+
   let successful = 0;
   let failed = 0;
   let skipped = 0;
-  (await Promise.all(tsxFiles.map(file => transpileFile(file)))).forEach(result => {
+  (await Promise.all(tsxFiles.map(file => transpileFile(file, program)))).forEach(result => {
     switch (result) {
       case TranspileResult.Success: {
         successful += 1;
@@ -147,7 +168,7 @@ async function transpileFile(tsxPath, ignoreCache = false) {
 
   tsxFiles.forEach(filePath => {
     fse.watchFile(filePath, { interval: 500 }, async () => {
-      if ((await transpileFile(filePath, true)) === 0) {
+      if ((await transpileFile(filePath, program, true)) === 0) {
         console.log('Success - %s', filePath);
       }
     });
diff --git a/docs/src/pages/components/app-bar/ElevateAppBar.js b/docs/src/pages/components/app-bar/ElevateAppBar.js
index 2970529293ab09..09164a0d7e4550 100644
--- a/docs/src/pages/components/app-bar/ElevateAppBar.js
+++ b/docs/src/pages/components/app-bar/ElevateAppBar.js
@@ -25,9 +25,11 @@ function ElevationScroll(props) {
 }
 
 ElevationScroll.propTypes = {
-  children: PropTypes.node.isRequired,
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
+  children: PropTypes.element.isRequired,
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
   window: PropTypes.func,
 };
 
diff --git a/docs/src/pages/components/app-bar/ElevateAppBar.tsx b/docs/src/pages/components/app-bar/ElevateAppBar.tsx
index e83082d20c4071..5925a78a0b31ec 100644
--- a/docs/src/pages/components/app-bar/ElevateAppBar.tsx
+++ b/docs/src/pages/components/app-bar/ElevateAppBar.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -9,6 +8,10 @@ import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 
 interface Props {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
   window?: () => Window;
   children: React.ReactElement;
 }
@@ -29,13 +32,6 @@ function ElevationScroll(props: Props) {
   });
 }
 
-ElevationScroll.propTypes = {
-  children: PropTypes.node.isRequired,
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
-  window: PropTypes.func,
-};
-
 export default function ElevateAppBar(props: Props) {
   return (
     <React.Fragment>
diff --git a/docs/src/pages/components/app-bar/HideAppBar.js b/docs/src/pages/components/app-bar/HideAppBar.js
index 50a5015f7088c3..bc706772f4b20e 100644
--- a/docs/src/pages/components/app-bar/HideAppBar.js
+++ b/docs/src/pages/components/app-bar/HideAppBar.js
@@ -24,9 +24,11 @@ function HideOnScroll(props) {
 }
 
 HideOnScroll.propTypes = {
-  children: PropTypes.node.isRequired,
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
+  children: PropTypes.element.isRequired,
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
   window: PropTypes.func,
 };
 
diff --git a/docs/src/pages/components/app-bar/HideAppBar.tsx b/docs/src/pages/components/app-bar/HideAppBar.tsx
index 9812a1352bc07d..0a1e4d494c9e60 100644
--- a/docs/src/pages/components/app-bar/HideAppBar.tsx
+++ b/docs/src/pages/components/app-bar/HideAppBar.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -10,6 +9,10 @@ import Container from '@material-ui/core/Container';
 import Slide from '@material-ui/core/Slide';
 
 interface Props {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
   window?: () => Window;
   children: React.ReactElement;
 }
@@ -28,13 +31,6 @@ function HideOnScroll(props: Props) {
   );
 }
 
-HideOnScroll.propTypes = {
-  children: PropTypes.node.isRequired,
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
-  window: PropTypes.func,
-};
-
 export default function HideAppBar(props: Props) {
   return (
     <React.Fragment>
diff --git a/docs/src/pages/components/autocomplete/IntegrationDownshift.js b/docs/src/pages/components/autocomplete/IntegrationDownshift.js
index a4a1897aa2ca5f..2e09d44c29c5b7 100644
--- a/docs/src/pages/components/autocomplete/IntegrationDownshift.js
+++ b/docs/src/pages/components/autocomplete/IntegrationDownshift.js
@@ -64,6 +64,11 @@ function renderInput(inputProps) {
   );
 }
 
+renderInput.propTypes = {
+  classes: PropTypes.object.isRequired,
+  InputProps: PropTypes.object,
+};
+
 function renderSuggestion(suggestionProps) {
   const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps;
   const isHighlighted = highlightedIndex === index;
@@ -83,12 +88,15 @@ function renderSuggestion(suggestionProps) {
     </MenuItem>
   );
 }
+
 renderSuggestion.propTypes = {
-  highlightedIndex: PropTypes.number,
-  index: PropTypes.number,
-  itemProps: PropTypes.object,
-  selectedItem: PropTypes.string,
-  suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired,
+  highlightedIndex: PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number]).isRequired,
+  index: PropTypes.number.isRequired,
+  itemProps: PropTypes.object.isRequired,
+  selectedItem: PropTypes.string.isRequired,
+  suggestion: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
 function getSuggestions(value, { showEmpty = false } = {}) {
diff --git a/docs/src/pages/components/autocomplete/IntegrationDownshift.tsx b/docs/src/pages/components/autocomplete/IntegrationDownshift.tsx
index 2fe7bb40854cf7..7cad0861875f28 100644
--- a/docs/src/pages/components/autocomplete/IntegrationDownshift.tsx
+++ b/docs/src/pages/components/autocomplete/IntegrationDownshift.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import deburr from 'lodash/deburr';
 import Downshift from 'downshift';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
@@ -100,13 +99,6 @@ function renderSuggestion(suggestionProps: RenderSuggestionProps) {
     </MenuItem>
   );
 }
-renderSuggestion.propTypes = {
-  highlightedIndex: PropTypes.number,
-  index: PropTypes.number,
-  itemProps: PropTypes.object,
-  selectedItem: PropTypes.string,
-  suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired,
-};
 
 function getSuggestions(value: string, { showEmpty = false } = {}) {
   const inputValue = deburr(value.trim()).toLowerCase();
@@ -227,10 +219,6 @@ function DownshiftMultiple(props: DownshiftMultipleProps) {
   );
 }
 
-DownshiftMultiple.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
diff --git a/docs/src/pages/components/autocomplete/IntegrationReactSelect.js b/docs/src/pages/components/autocomplete/IntegrationReactSelect.js
index b8649c0a14759c..9e5a8c48c7fae0 100644
--- a/docs/src/pages/components/autocomplete/IntegrationReactSelect.js
+++ b/docs/src/pages/components/autocomplete/IntegrationReactSelect.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Select from 'react-select';
 import { emphasize, makeStyles, useTheme } from '@material-ui/core/styles';
@@ -9,7 +10,6 @@ import Paper from '@material-ui/core/Paper';
 import Chip from '@material-ui/core/Chip';
 import MenuItem from '@material-ui/core/MenuItem';
 import CancelIcon from '@material-ui/icons/Cancel';
-import PropTypes from 'prop-types';
 
 const suggestions = [
   { label: 'Afghanistan' },
@@ -114,8 +114,14 @@ function NoOptionsMessage(props) {
 }
 
 NoOptionsMessage.propTypes = {
+  /**
+   * The children to be rendered.
+   */
   children: PropTypes.node,
-  innerProps: PropTypes.object,
+  /**
+   * Props to be passed on to the wrapper.
+   */
+  innerProps: PropTypes.object.isRequired,
   selectProps: PropTypes.object.isRequired,
 };
 
@@ -124,7 +130,12 @@ function inputComponent({ inputRef, ...props }) {
 }
 
 inputComponent.propTypes = {
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  inputRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({
+      current: PropTypes.any.isRequired,
+    }),
+  ]),
 };
 
 function Control(props) {
@@ -153,9 +164,23 @@ function Control(props) {
 }
 
 Control.propTypes = {
+  /**
+   * Children to render.
+   */
   children: PropTypes.node,
-  innerProps: PropTypes.object,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * The mouse down event and the innerRef to pass down to the controller element.
+   */
+  innerProps: PropTypes.shape({
+    onMouseDown: PropTypes.func.isRequired,
+  }).isRequired,
+  innerRef: PropTypes.oneOfType([
+    PropTypes.oneOf([null]),
+    PropTypes.func,
+    PropTypes.shape({
+      current: PropTypes.any.isRequired,
+    }),
+  ]).isRequired,
   selectProps: PropTypes.object.isRequired,
 };
 
@@ -176,27 +201,58 @@ function Option(props) {
 }
 
 Option.propTypes = {
+  /**
+   * The children to be rendered.
+   */
   children: PropTypes.node,
-  innerProps: PropTypes.object,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  isFocused: PropTypes.bool,
-  isSelected: PropTypes.bool,
+  /**
+   * props passed to the wrapping element for the group.
+   */
+  innerProps: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    key: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    onMouseMove: PropTypes.func.isRequired,
+    onMouseOver: PropTypes.func.isRequired,
+    tabIndex: PropTypes.number.isRequired,
+  }).isRequired,
+  /**
+   * Inner ref to DOM Node
+   */
+  innerRef: PropTypes.oneOfType([
+    PropTypes.oneOf([null]),
+    PropTypes.func,
+    PropTypes.shape({
+      current: PropTypes.any.isRequired,
+    }),
+  ]).isRequired,
+  /**
+   * Whether the option is focused.
+   */
+  isFocused: PropTypes.bool.isRequired,
+  /**
+   * Whether the option is selected.
+   */
+  isSelected: PropTypes.bool.isRequired,
 };
 
 function Placeholder(props) {
+  const { selectProps, innerProps = {}, children } = props;
   return (
-    <Typography
-      color="textSecondary"
-      className={props.selectProps.classes.placeholder}
-      {...props.innerProps}
-    >
-      {props.children}
+    <Typography color="textSecondary" className={selectProps.classes.placeholder} {...innerProps}>
+      {children}
     </Typography>
   );
 }
 
 Placeholder.propTypes = {
+  /**
+   * The children to be rendered.
+   */
   children: PropTypes.node,
+  /**
+   * props passed to the wrapping element for the group.
+   */
   innerProps: PropTypes.object,
   selectProps: PropTypes.object.isRequired,
 };
@@ -210,8 +266,14 @@ function SingleValue(props) {
 }
 
 SingleValue.propTypes = {
+  /**
+   * The children to be rendered.
+   */
   children: PropTypes.node,
-  innerProps: PropTypes.object,
+  /**
+   * Props passed to the wrapping element for the group.
+   */
+  innerProps: PropTypes.any.isRequired,
   selectProps: PropTypes.object.isRequired,
 };
 
@@ -220,6 +282,9 @@ function ValueContainer(props) {
 }
 
 ValueContainer.propTypes = {
+  /**
+   * The children to be rendered.
+   */
   children: PropTypes.node,
   selectProps: PropTypes.object.isRequired,
 };
@@ -240,8 +305,12 @@ function MultiValue(props) {
 
 MultiValue.propTypes = {
   children: PropTypes.node,
-  isFocused: PropTypes.bool,
-  removeProps: PropTypes.object.isRequired,
+  isFocused: PropTypes.bool.isRequired,
+  removeProps: PropTypes.shape({
+    onClick: PropTypes.func.isRequired,
+    onMouseDown: PropTypes.func.isRequired,
+    onTouchEnd: PropTypes.func.isRequired,
+  }).isRequired,
   selectProps: PropTypes.object.isRequired,
 };
 
@@ -254,9 +323,15 @@ function Menu(props) {
 }
 
 Menu.propTypes = {
-  children: PropTypes.node,
-  innerProps: PropTypes.object,
-  selectProps: PropTypes.object,
+  /**
+   * The children to be rendered.
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * Props to be passed to the menu wrapper.
+   */
+  innerProps: PropTypes.object.isRequired,
+  selectProps: PropTypes.object.isRequired,
 };
 
 const components = {
diff --git a/docs/src/pages/components/autocomplete/IntegrationReactSelect.tsx b/docs/src/pages/components/autocomplete/IntegrationReactSelect.tsx
index c66a646570679a..859dbca50080dc 100644
--- a/docs/src/pages/components/autocomplete/IntegrationReactSelect.tsx
+++ b/docs/src/pages/components/autocomplete/IntegrationReactSelect.tsx
@@ -9,7 +9,6 @@ import Paper from '@material-ui/core/Paper';
 import Chip from '@material-ui/core/Chip';
 import MenuItem from '@material-ui/core/MenuItem';
 import CancelIcon from '@material-ui/icons/Cancel';
-import PropTypes from 'prop-types';
 import { ValueContainerProps } from 'react-select/lib/components/containers';
 import { ControlProps } from 'react-select/lib/components/Control';
 import { MenuProps, NoticeProps } from 'react-select/lib/components/Menu';
@@ -18,6 +17,7 @@ import { OptionProps } from 'react-select/lib/components/Option';
 import { PlaceholderProps } from 'react-select/lib/components/Placeholder';
 import { SingleValueProps } from 'react-select/lib/components/SingleValue';
 import { ValueType } from 'react-select/lib/types';
+import { Omit } from '@material-ui/types';
 
 interface OptionType {
   label: string;
@@ -128,22 +128,12 @@ function NoOptionsMessage(props: NoticeProps<OptionType>) {
   );
 }
 
-NoOptionsMessage.propTypes = {
-  children: PropTypes.node,
-  innerProps: PropTypes.object,
-  selectProps: PropTypes.object.isRequired,
-} as any;
-
 type InputComponentProps = Pick<BaseTextFieldProps, 'inputRef'> & HTMLAttributes<HTMLDivElement>;
 
 function inputComponent({ inputRef, ...props }: InputComponentProps) {
   return <div ref={inputRef} {...props} />;
 }
 
-inputComponent.propTypes = {
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-} as any;
-
 function Control(props: ControlProps<OptionType>) {
   const {
     children,
@@ -169,13 +159,6 @@ function Control(props: ControlProps<OptionType>) {
   );
 }
 
-Control.propTypes = {
-  children: PropTypes.node,
-  innerProps: PropTypes.object,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  selectProps: PropTypes.object.isRequired,
-} as any;
-
 function Option(props: OptionProps<OptionType>) {
   return (
     <MenuItem
@@ -192,32 +175,17 @@ function Option(props: OptionProps<OptionType>) {
   );
 }
 
-Option.propTypes = {
-  children: PropTypes.node,
-  innerProps: PropTypes.object,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  isFocused: PropTypes.bool,
-  isSelected: PropTypes.bool,
-} as any;
-
-function Placeholder(props: PlaceholderProps<OptionType>) {
+type MuiPlaceholderProps = Omit<PlaceholderProps<OptionType>, 'innerProps'> &
+  Partial<Pick<PlaceholderProps<OptionType>, 'innerProps'>>;
+function Placeholder(props: MuiPlaceholderProps) {
+  const { selectProps, innerProps = {}, children } = props;
   return (
-    <Typography
-      color="textSecondary"
-      className={props.selectProps.classes.placeholder}
-      {...props.innerProps}
-    >
-      {props.children}
+    <Typography color="textSecondary" className={selectProps.classes.placeholder} {...innerProps}>
+      {children}
     </Typography>
   );
 }
 
-Placeholder.propTypes = {
-  children: PropTypes.node,
-  innerProps: PropTypes.object,
-  selectProps: PropTypes.object.isRequired,
-} as any;
-
 function SingleValue(props: SingleValueProps<OptionType>) {
   return (
     <Typography className={props.selectProps.classes.singleValue} {...props.innerProps}>
@@ -226,21 +194,10 @@ function SingleValue(props: SingleValueProps<OptionType>) {
   );
 }
 
-SingleValue.propTypes = {
-  children: PropTypes.node,
-  innerProps: PropTypes.object,
-  selectProps: PropTypes.object.isRequired,
-} as any;
-
 function ValueContainer(props: ValueContainerProps<OptionType>) {
   return <div className={props.selectProps.classes.valueContainer}>{props.children}</div>;
 }
 
-ValueContainer.propTypes = {
-  children: PropTypes.node,
-  selectProps: PropTypes.object.isRequired,
-} as any;
-
 function MultiValue(props: MultiValueProps<OptionType>) {
   return (
     <Chip
@@ -255,13 +212,6 @@ function MultiValue(props: MultiValueProps<OptionType>) {
   );
 }
 
-MultiValue.propTypes = {
-  children: PropTypes.node,
-  isFocused: PropTypes.bool,
-  removeProps: PropTypes.object.isRequired,
-  selectProps: PropTypes.object.isRequired,
-} as any;
-
 function Menu(props: MenuProps<OptionType>) {
   return (
     <Paper square className={props.selectProps.classes.paper} {...props.innerProps}>
@@ -270,12 +220,6 @@ function Menu(props: MenuProps<OptionType>) {
   );
 }
 
-Menu.propTypes = {
-  children: PropTypes.node,
-  innerProps: PropTypes.object,
-  selectProps: PropTypes.object,
-} as any;
-
 const components = {
   Control,
   Menu,
diff --git a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx
index 8fbc42c198d365..41e301a8131948 100644
--- a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx
+++ b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable no-nested-ternary */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import Link, { LinkProps } from '@material-ui/core/Link';
@@ -49,11 +48,6 @@ function ListItemLink(props: Omit<ListItemLinkProps, 'ref'>) {
   );
 }
 
-ListItemLink.propTypes = {
-  open: PropTypes.bool,
-  to: PropTypes.string.isRequired,
-};
-
 const styles = (theme: Theme) =>
   createStyles({
     root: {
@@ -137,11 +131,4 @@ class RouterBreadcrumbs extends React.Component<RouterBreadcrumbsProp, RouterBre
   }
 }
 
-(RouterBreadcrumbs as React.ComponentClass<
-  RouterBreadcrumbsProp,
-  RouterBreadcrumbsState
->).propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
 export default withStyles(styles)(RouterBreadcrumbs);
diff --git a/docs/src/pages/components/buttons/FloatingActionButtonZoom.js b/docs/src/pages/components/buttons/FloatingActionButtonZoom.js
index b6f3789b20ac97..4314f459ac2ddf 100644
--- a/docs/src/pages/components/buttons/FloatingActionButtonZoom.js
+++ b/docs/src/pages/components/buttons/FloatingActionButtonZoom.js
@@ -33,8 +33,7 @@ function TabPanel(props) {
 }
 
 TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  dir: PropTypes.string.isRequired,
+  children: PropTypes.node,
   index: PropTypes.any.isRequired,
   value: PropTypes.any.isRequired,
 };
diff --git a/docs/src/pages/components/buttons/FloatingActionButtonZoom.tsx b/docs/src/pages/components/buttons/FloatingActionButtonZoom.tsx
index fc07662b5dc1ea..230ace7022ad8a 100644
--- a/docs/src/pages/components/buttons/FloatingActionButtonZoom.tsx
+++ b/docs/src/pages/components/buttons/FloatingActionButtonZoom.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import SwipeableViews from 'react-swipeable-views';
 import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
@@ -39,13 +38,6 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
-TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  dir: PropTypes.string.isRequired,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
 function a11yProps(index: any) {
   return {
     id: `action-tab-${index}`,
diff --git a/docs/src/pages/components/dialogs/ConfirmationDialog.tsx b/docs/src/pages/components/dialogs/ConfirmationDialog.tsx
index 9b34579328a5ea..7032c1eca24c5e 100644
--- a/docs/src/pages/components/dialogs/ConfirmationDialog.tsx
+++ b/docs/src/pages/components/dialogs/ConfirmationDialog.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import List from '@material-ui/core/List';
@@ -104,12 +103,6 @@ function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
   );
 }
 
-ConfirmationDialogRaw.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired,
-  value: PropTypes.string.isRequired,
-};
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
diff --git a/docs/src/pages/components/dialogs/SimpleDialog.js b/docs/src/pages/components/dialogs/SimpleDialog.js
index 5edc95adbe6082..7114c1bc6911dc 100644
--- a/docs/src/pages/components/dialogs/SimpleDialog.js
+++ b/docs/src/pages/components/dialogs/SimpleDialog.js
@@ -24,7 +24,7 @@ const useStyles = makeStyles({
 
 function SimpleDialog(props) {
   const classes = useStyles();
-  const { onClose, selectedValue, ...other } = props;
+  const { onClose, selectedValue, open } = props;
 
   function handleClose() {
     onClose(selectedValue);
@@ -35,7 +35,7 @@ function SimpleDialog(props) {
   }
 
   return (
-    <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" {...other}>
+    <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
       <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
       <List>
         {emails.map(email => (
@@ -63,9 +63,9 @@ function SimpleDialog(props) {
 }
 
 SimpleDialog.propTypes = {
-  onClose: PropTypes.func,
-  open: PropTypes.bool,
-  selectedValue: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+  selectedValue: PropTypes.string.isRequired,
 };
 
 export default function SimpleDialogDemo() {
diff --git a/docs/src/pages/components/dialogs/SimpleDialog.tsx b/docs/src/pages/components/dialogs/SimpleDialog.tsx
index 6e7cc32b142bc0..5131ffc2ea5adf 100644
--- a/docs/src/pages/components/dialogs/SimpleDialog.tsx
+++ b/docs/src/pages/components/dialogs/SimpleDialog.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Avatar from '@material-ui/core/Avatar';
@@ -30,7 +29,7 @@ export interface SimpleDialogProps {
 
 function SimpleDialog(props: SimpleDialogProps) {
   const classes = useStyles();
-  const { onClose, selectedValue, ...other } = props;
+  const { onClose, selectedValue, open } = props;
 
   function handleClose() {
     onClose(selectedValue);
@@ -41,7 +40,7 @@ function SimpleDialog(props: SimpleDialogProps) {
   }
 
   return (
-    <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" {...other}>
+    <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
       <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
       <List>
         {emails.map(email => (
@@ -67,12 +66,6 @@ function SimpleDialog(props: SimpleDialogProps) {
   );
 }
 
-SimpleDialog.propTypes = {
-  onClose: PropTypes.func,
-  open: PropTypes.bool,
-  selectedValue: PropTypes.string,
-};
-
 export default function SimpleDialogDemo() {
   const [open, setOpen] = React.useState(false);
   const [selectedValue, setSelectedValue] = React.useState(emails[1]);
diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js
index a52c1d9c66c9cd..409c0b4bd4ea49 100644
--- a/docs/src/pages/components/drawers/ResponsiveDrawer.js
+++ b/docs/src/pages/components/drawers/ResponsiveDrawer.js
@@ -51,7 +51,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export default function ResponsiveDrawer(props) {
+function ResponsiveDrawer(props) {
   const { container } = props;
   const classes = useStyles();
   const theme = useTheme();
@@ -166,7 +166,11 @@ export default function ResponsiveDrawer(props) {
 }
 
 ResponsiveDrawer.propTypes = {
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
   container: PropTypes.object,
 };
+
+export default ResponsiveDrawer;
diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
index c7299dc89e2c0f..7c3a296aa37c93 100644
--- a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Divider from '@material-ui/core/Divider';
@@ -54,9 +53,11 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 interface ResponsiveDrawerProps {
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
-  container: Element;
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
+  container?: Element;
 }
 
 export default function ResponsiveDrawer(props: ResponsiveDrawerProps) {
@@ -172,9 +173,3 @@ export default function ResponsiveDrawer(props: ResponsiveDrawerProps) {
     </div>
   );
 }
-
-ResponsiveDrawer.propTypes = {
-  // Injected by the documentation to work in an iframe.
-  // You won't need it on your project.
-  container: PropTypes.object,
-};
diff --git a/docs/src/pages/components/hidden/BreakpointDown.js b/docs/src/pages/components/hidden/BreakpointDown.js
index 7a9b6491ecdb4d..4b1ee242dcff14 100644
--- a/docs/src/pages/components/hidden/BreakpointDown.js
+++ b/docs/src/pages/components/hidden/BreakpointDown.js
@@ -51,7 +51,7 @@ function BreakpointDown(props) {
 }
 
 BreakpointDown.propTypes = {
-  width: PropTypes.string.isRequired,
+  width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,
 };
 
 export default withWidth()(BreakpointDown);
diff --git a/docs/src/pages/components/hidden/BreakpointDown.tsx b/docs/src/pages/components/hidden/BreakpointDown.tsx
index c0fa03502e7bc5..f8841d1b63e5e2 100644
--- a/docs/src/pages/components/hidden/BreakpointDown.tsx
+++ b/docs/src/pages/components/hidden/BreakpointDown.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Hidden from '@material-ui/core/Hidden';
@@ -52,8 +51,4 @@ function BreakpointDown(props: WithWidth) {
   );
 }
 
-(BreakpointDown as any).propTypes = {
-  width: PropTypes.string.isRequired,
-};
-
 export default withWidth()(BreakpointDown);
diff --git a/docs/src/pages/components/hidden/BreakpointOnly.js b/docs/src/pages/components/hidden/BreakpointOnly.js
index aa1b5914cce676..7fd5e4acd53fc0 100644
--- a/docs/src/pages/components/hidden/BreakpointOnly.js
+++ b/docs/src/pages/components/hidden/BreakpointOnly.js
@@ -45,7 +45,7 @@ function BreakpointOnly(props) {
 }
 
 BreakpointOnly.propTypes = {
-  width: PropTypes.string.isRequired,
+  width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,
 };
 
 export default withWidth()(BreakpointOnly);
diff --git a/docs/src/pages/components/hidden/BreakpointOnly.tsx b/docs/src/pages/components/hidden/BreakpointOnly.tsx
index 7e41852dd809dc..00d41efe22ab8b 100644
--- a/docs/src/pages/components/hidden/BreakpointOnly.tsx
+++ b/docs/src/pages/components/hidden/BreakpointOnly.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Hidden from '@material-ui/core/Hidden';
@@ -46,8 +45,4 @@ function BreakpointOnly(props: WithWidth) {
   );
 }
 
-(BreakpointOnly as any).propTypes = {
-  width: PropTypes.string.isRequired,
-};
-
 export default withWidth()(BreakpointOnly);
diff --git a/docs/src/pages/components/hidden/BreakpointUp.js b/docs/src/pages/components/hidden/BreakpointUp.js
index d41beeb1ee37c0..7e519041dda5fb 100644
--- a/docs/src/pages/components/hidden/BreakpointUp.js
+++ b/docs/src/pages/components/hidden/BreakpointUp.js
@@ -51,7 +51,7 @@ function BreakpointUp(props) {
 }
 
 BreakpointUp.propTypes = {
-  width: PropTypes.string.isRequired,
+  width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,
 };
 
 export default withWidth()(BreakpointUp);
diff --git a/docs/src/pages/components/hidden/BreakpointUp.tsx b/docs/src/pages/components/hidden/BreakpointUp.tsx
index 6ca0685c0d15ee..4676edcf559e08 100644
--- a/docs/src/pages/components/hidden/BreakpointUp.tsx
+++ b/docs/src/pages/components/hidden/BreakpointUp.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Hidden from '@material-ui/core/Hidden';
@@ -52,8 +51,4 @@ function BreakpointUp(props: WithWidth) {
   );
 }
 
-(BreakpointUp as any).propTypes = {
-  width: PropTypes.string.isRequired,
-};
-
 export default withWidth()(BreakpointUp);
diff --git a/docs/src/pages/components/hidden/GridIntegration.js b/docs/src/pages/components/hidden/GridIntegration.js
index c893613ea29679..6fa5b1388a45b9 100644
--- a/docs/src/pages/components/hidden/GridIntegration.js
+++ b/docs/src/pages/components/hidden/GridIntegration.js
@@ -59,7 +59,7 @@ function GridIntegration(props) {
 }
 
 GridIntegration.propTypes = {
-  width: PropTypes.string,
+  width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,
 };
 
 export default withWidth()(GridIntegration);
diff --git a/docs/src/pages/components/hidden/GridIntegration.tsx b/docs/src/pages/components/hidden/GridIntegration.tsx
index 8078e0e8c962f7..bce62c3c2e3510 100644
--- a/docs/src/pages/components/hidden/GridIntegration.tsx
+++ b/docs/src/pages/components/hidden/GridIntegration.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
@@ -60,8 +59,4 @@ function GridIntegration(props: WithWidth) {
   );
 }
 
-(GridIntegration as any).propTypes = {
-  width: PropTypes.string,
-};
-
 export default withWidth()(GridIntegration);
diff --git a/docs/src/pages/components/lists/VirtualizedList.js b/docs/src/pages/components/lists/VirtualizedList.js
index 9f4a0811f1be2f..4a61cc0e6c07c8 100644
--- a/docs/src/pages/components/lists/VirtualizedList.js
+++ b/docs/src/pages/components/lists/VirtualizedList.js
@@ -25,8 +25,8 @@ function Row(props) {
 }
 
 Row.propTypes = {
-  index: PropTypes.number,
-  style: PropTypes.object,
+  index: PropTypes.number.isRequired,
+  style: PropTypes.object.isRequired,
 };
 
 export default function VirtualizedList() {
diff --git a/docs/src/pages/components/lists/VirtualizedList.tsx b/docs/src/pages/components/lists/VirtualizedList.tsx
index fa702707d1ad46..fa45db79277b8b 100644
--- a/docs/src/pages/components/lists/VirtualizedList.tsx
+++ b/docs/src/pages/components/lists/VirtualizedList.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -26,11 +25,6 @@ function Row(props: ListChildComponentProps) {
   );
 }
 
-Row.propTypes = {
-  index: PropTypes.number,
-  style: PropTypes.object,
-} as any;
-
 export default function VirtualizedList() {
   const classes = useStyles();
 
diff --git a/docs/src/pages/components/rating/HoverRating.tsx b/docs/src/pages/components/rating/HoverRating.tsx
index 412be798c7f996..30df1658abacf2 100644
--- a/docs/src/pages/components/rating/HoverRating.tsx
+++ b/docs/src/pages/components/rating/HoverRating.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import Rating, { IconContainerProps } from '@material-ui/lab/Rating';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -28,10 +27,6 @@ function IconContainer(props: IconContainerProps) {
   );
 }
 
-IconContainer.propTypes = {
-  value: PropTypes.number.isRequired,
-} as any;
-
 const useStyles = makeStyles({
   rating1: {
     width: 200,
diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx
index fc4dae44b7f8d4..8df8dff64a89aa 100644
--- a/docs/src/pages/components/slider/CustomizedSlider.tsx
+++ b/docs/src/pages/components/slider/CustomizedSlider.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withStyles, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Slider from '@material-ui/core/Slider';
@@ -50,12 +49,6 @@ function ValueLabelComponent(props: Props) {
   );
 }
 
-ValueLabelComponent.propTypes = {
-  children: PropTypes.element.isRequired,
-  open: PropTypes.bool.isRequired,
-  value: PropTypes.number.isRequired,
-};
-
 const iOSBoxShadow =
   '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)';
 
diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
index f1097f35f52a64..354ae680fedba4 100644
--- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
+++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
@@ -1,5 +1,4 @@
 import React, { SyntheticEvent } from 'react';
-import PropTypes from 'prop-types';
 import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
@@ -109,8 +108,4 @@ class ConsecutiveSnackbars extends React.Component<Props, State> {
   }
 }
 
-(ConsecutiveSnackbars as React.ComponentClass<Props>).propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
 export default withStyles(styles)(ConsecutiveSnackbars);
diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.js b/docs/src/pages/components/snackbars/CustomizedSnackbars.js
index 4b40ec681b212a..a64910643beb10 100644
--- a/docs/src/pages/components/snackbars/CustomizedSnackbars.js
+++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.js
@@ -73,9 +73,9 @@ function MySnackbarContentWrapper(props) {
 
 MySnackbarContentWrapper.propTypes = {
   className: PropTypes.string,
-  message: PropTypes.node,
+  message: PropTypes.string,
   onClose: PropTypes.func,
-  variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
+  variant: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired,
 };
 
 const useStyles2 = makeStyles(theme => ({
diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx
index 25c1cad19f1555..c8c5dd166dac37 100644
--- a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx
+++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx
@@ -1,5 +1,4 @@
 import React, { SyntheticEvent } from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
@@ -78,13 +77,6 @@ function MySnackbarContentWrapper(props: Props) {
   );
 }
 
-MySnackbarContentWrapper.propTypes = {
-  className: PropTypes.string,
-  message: PropTypes.node,
-  onClose: PropTypes.func,
-  variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
-};
-
 const useStyles2 = makeStyles((theme: Theme) => ({
   margin: {
     margin: theme.spacing(1),
diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
index 6d7d58cd89a0eb..8f688cbcdfc753 100644
--- a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
+++ b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -82,13 +81,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
   );
 }
 
-TablePaginationActions.propTypes = {
-  count: PropTypes.number.isRequired,
-  onChangePage: PropTypes.func.isRequired,
-  page: PropTypes.number.isRequired,
-  rowsPerPage: PropTypes.number.isRequired,
-};
-
 function createData(name: string, calories: number, fat: number) {
   return { name, calories, fat };
 }
diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js
index 2143ca4f984a50..686bf1576d4601 100644
--- a/docs/src/pages/components/tables/EnhancedTable.js
+++ b/docs/src/pages/components/tables/EnhancedTable.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { lighten, makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -114,7 +114,7 @@ EnhancedTableHead.propTypes = {
   numSelected: PropTypes.number.isRequired,
   onRequestSort: PropTypes.func.isRequired,
   onSelectAllClick: PropTypes.func.isRequired,
-  order: PropTypes.string.isRequired,
+  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
   orderBy: PropTypes.string.isRequired,
   rowCount: PropTypes.number.isRequired,
 };
diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx
index 7433f00bb893cf..4220f8782b3aa8 100644
--- a/docs/src/pages/components/tables/EnhancedTable.tsx
+++ b/docs/src/pages/components/tables/EnhancedTable.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import clsx from 'clsx';
-import PropTypes from 'prop-types';
 import { createStyles, lighten, makeStyles, Theme } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -145,15 +144,6 @@ function EnhancedTableHead(props: EnhancedTableProps) {
   );
 }
 
-EnhancedTableHead.propTypes = {
-  numSelected: PropTypes.number.isRequired,
-  onRequestSort: PropTypes.func.isRequired,
-  onSelectAllClick: PropTypes.func.isRequired,
-  order: PropTypes.string.isRequired,
-  orderBy: PropTypes.string.isRequired,
-  rowCount: PropTypes.number.isRequired,
-};
-
 const useToolbarStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
@@ -227,10 +217,6 @@ const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
   );
 };
 
-EnhancedTableToolbar.propTypes = {
-  numSelected: PropTypes.number.isRequired,
-};
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
diff --git a/docs/src/pages/components/tables/ReactVirtualizedTable.js b/docs/src/pages/components/tables/ReactVirtualizedTable.js
index 9a0f5368f2353b..f45cfb6de9bd55 100644
--- a/docs/src/pages/components/tables/ReactVirtualizedTable.js
+++ b/docs/src/pages/components/tables/ReactVirtualizedTable.js
@@ -76,11 +76,18 @@ class MuiVirtualizedTable extends React.PureComponent {
   };
 
   render() {
-    const { classes, columns, ...tableProps } = this.props;
+    const { classes, columns, rowHeight, headerHeight, ...tableProps } = this.props;
     return (
       <AutoSizer>
         {({ height, width }) => (
-          <Table height={height} width={width} {...tableProps} rowClassName={this.getRowClassName}>
+          <Table
+            height={height}
+            width={width}
+            rowHeight={rowHeight}
+            headerHeight={headerHeight}
+            {...tableProps}
+            rowClassName={this.getRowClassName}
+          >
             {columns.map(({ dataKey, ...other }, index) => {
               return (
                 <Column
@@ -107,7 +114,14 @@ class MuiVirtualizedTable extends React.PureComponent {
 
 MuiVirtualizedTable.propTypes = {
   classes: PropTypes.object.isRequired,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      dataKey: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      numeric: PropTypes.bool,
+      width: PropTypes.number.isRequired,
+    }),
+  ).isRequired,
   headerHeight: PropTypes.number,
   onRowClick: PropTypes.func,
   rowHeight: PropTypes.number,
diff --git a/docs/src/pages/components/tables/ReactVirtualizedTable.tsx b/docs/src/pages/components/tables/ReactVirtualizedTable.tsx
index e2fa300a87192d..94d40fdefe9080 100644
--- a/docs/src/pages/components/tables/ReactVirtualizedTable.tsx
+++ b/docs/src/pages/components/tables/ReactVirtualizedTable.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
 import TableCell from '@material-ui/core/TableCell';
@@ -42,11 +41,11 @@ interface Row {
 
 interface MuiVirtualizedTableProps extends WithStyles<typeof styles> {
   columns: ColumnData[];
-  headerHeight: number;
+  headerHeight?: number;
   onRowClick?: () => void;
   rowCount: number;
   rowGetter: (row: Row) => Data;
-  rowHeight: number;
+  rowHeight?: number;
 }
 
 class MuiVirtualizedTable extends React.PureComponent<MuiVirtualizedTableProps> {
@@ -97,11 +96,18 @@ class MuiVirtualizedTable extends React.PureComponent<MuiVirtualizedTableProps>
   };
 
   render() {
-    const { classes, columns, ...tableProps } = this.props;
+    const { classes, columns, rowHeight, headerHeight, ...tableProps } = this.props;
     return (
       <AutoSizer>
         {({ height, width }) => (
-          <Table height={height} width={width} {...tableProps} rowClassName={this.getRowClassName}>
+          <Table
+            height={height}
+            width={width}
+            rowHeight={rowHeight!}
+            headerHeight={headerHeight!}
+            {...tableProps}
+            rowClassName={this.getRowClassName}
+          >
             {columns.map(({ dataKey, ...other }, index) => {
               return (
                 <Column
@@ -126,14 +132,6 @@ class MuiVirtualizedTable extends React.PureComponent<MuiVirtualizedTableProps>
   }
 }
 
-(MuiVirtualizedTable as any).propTypes = {
-  classes: PropTypes.object.isRequired,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  headerHeight: PropTypes.number,
-  onRowClick: PropTypes.func,
-  rowHeight: PropTypes.number,
-};
-
 const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
 
 // ---
diff --git a/docs/src/pages/components/tabs/FullWidthTabs.js b/docs/src/pages/components/tabs/FullWidthTabs.js
index c54e2335ead0e5..f074b68e0b6d2e 100644
--- a/docs/src/pages/components/tabs/FullWidthTabs.js
+++ b/docs/src/pages/components/tabs/FullWidthTabs.js
@@ -26,8 +26,7 @@ function TabPanel(props) {
 }
 
 TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  dir: PropTypes.string.isRequired,
+  children: PropTypes.node,
   index: PropTypes.any.isRequired,
   value: PropTypes.any.isRequired,
 };
diff --git a/docs/src/pages/components/tabs/FullWidthTabs.tsx b/docs/src/pages/components/tabs/FullWidthTabs.tsx
index e903baead18901..6f59bcb3fcfe52 100644
--- a/docs/src/pages/components/tabs/FullWidthTabs.tsx
+++ b/docs/src/pages/components/tabs/FullWidthTabs.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import SwipeableViews from 'react-swipeable-views';
 import { makeStyles, Theme, useTheme, createStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
@@ -32,13 +31,6 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
-TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  dir: PropTypes.string.isRequired,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
 function a11yProps(index: any) {
   return {
     id: `full-width-tab-${index}`,
diff --git a/docs/src/pages/components/tabs/NavTabs.js b/docs/src/pages/components/tabs/NavTabs.js
index be5e6bd2d11ace..3f4c9335967473 100644
--- a/docs/src/pages/components/tabs/NavTabs.js
+++ b/docs/src/pages/components/tabs/NavTabs.js
@@ -25,7 +25,7 @@ function TabPanel(props) {
 }
 
 TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   index: PropTypes.any.isRequired,
   value: PropTypes.any.isRequired,
 };
diff --git a/docs/src/pages/components/tabs/NavTabs.tsx b/docs/src/pages/components/tabs/NavTabs.tsx
index fd356382d4d9a3..a470873ccc48a4 100644
--- a/docs/src/pages/components/tabs/NavTabs.tsx
+++ b/docs/src/pages/components/tabs/NavTabs.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
@@ -30,12 +29,6 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
-TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
 function a11yProps(index: any) {
   return {
     id: `nav-tab-${index}`,
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
index e00c7c72ebc924..54c406dc5c2c57 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
@@ -25,7 +25,7 @@ function TabPanel(props) {
 }
 
 TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   index: PropTypes.any.isRequired,
   value: PropTypes.any.isRequired,
 };
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx
index bf416b7de6896e..bc780118bfcd95 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
@@ -30,12 +29,6 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
-TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
 function a11yProps(index: any) {
   return {
     id: `scrollable-auto-tab-${index}`,
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js
index 58701d54d3313b..f07e29b909953a 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js
@@ -32,7 +32,7 @@ function TabPanel(props) {
 }
 
 TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   index: PropTypes.any.isRequired,
   value: PropTypes.any.isRequired,
 };
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx
index 45a06c5b2e4765..735fc973a29cc6 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
@@ -37,12 +36,6 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
-TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
 function a11yProps(index: any) {
   return {
     id: `scrollable-force-tab-${index}`,
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js
index 633942658d642c..ca9e869b0fef97 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js
@@ -32,7 +32,7 @@ function TabPanel(props) {
 }
 
 TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   index: PropTypes.any.isRequired,
   value: PropTypes.any.isRequired,
 };
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx
index f941d7e7dbaa93..631626a4eec28e 100644
--- a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx
+++ b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
@@ -37,12 +36,6 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
-TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
 function a11yProps(index: any) {
   return {
     id: `scrollable-prevent-tab-${index}`,
diff --git a/docs/src/pages/components/tabs/SimpleTabs.js b/docs/src/pages/components/tabs/SimpleTabs.js
index ea825976575493..6c33bff3c53764 100644
--- a/docs/src/pages/components/tabs/SimpleTabs.js
+++ b/docs/src/pages/components/tabs/SimpleTabs.js
@@ -25,7 +25,7 @@ function TabPanel(props) {
 }
 
 TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   index: PropTypes.any.isRequired,
   value: PropTypes.any.isRequired,
 };
diff --git a/docs/src/pages/components/tabs/SimpleTabs.tsx b/docs/src/pages/components/tabs/SimpleTabs.tsx
index a9ef1b211bfc6d..ed885f343a1d1b 100644
--- a/docs/src/pages/components/tabs/SimpleTabs.tsx
+++ b/docs/src/pages/components/tabs/SimpleTabs.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
@@ -30,12 +29,6 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
-TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
 function a11yProps(index: any) {
   return {
     id: `simple-tab-${index}`,
diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.js b/docs/src/pages/components/tabs/TabsWrappedLabel.js
index 9c0b55dbdb7cf5..a7826b32545fb6 100644
--- a/docs/src/pages/components/tabs/TabsWrappedLabel.js
+++ b/docs/src/pages/components/tabs/TabsWrappedLabel.js
@@ -25,7 +25,7 @@ function TabPanel(props) {
 }
 
 TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   index: PropTypes.any.isRequired,
   value: PropTypes.any.isRequired,
 };
diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.tsx b/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
index 38fe895f2af9b4..fa5c6f08b996fe 100644
--- a/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
+++ b/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
@@ -30,12 +29,6 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
-TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
 function a11yProps(index: any) {
   return {
     id: `wrapped-tab-${index}`,
diff --git a/docs/src/pages/components/text-fields/FormattedInputs.js b/docs/src/pages/components/text-fields/FormattedInputs.js
index 5c46f85ba67811..3980014e5c972a 100644
--- a/docs/src/pages/components/text-fields/FormattedInputs.js
+++ b/docs/src/pages/components/text-fields/FormattedInputs.js
@@ -1,7 +1,7 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import MaskedInput from 'react-text-mask';
 import NumberFormat from 'react-number-format';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
diff --git a/docs/src/pages/components/text-fields/FormattedInputs.tsx b/docs/src/pages/components/text-fields/FormattedInputs.tsx
index dd006b0e0cbbb8..f1c9252d352342 100644
--- a/docs/src/pages/components/text-fields/FormattedInputs.tsx
+++ b/docs/src/pages/components/text-fields/FormattedInputs.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import MaskedInput from 'react-text-mask';
 import NumberFormat from 'react-number-format';
-import PropTypes from 'prop-types';
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
@@ -40,10 +39,6 @@ function TextMaskCustom(props: TextMaskCustomProps) {
   );
 }
 
-TextMaskCustom.propTypes = {
-  inputRef: PropTypes.func.isRequired,
-} as any;
-
 interface NumberFormatCustomProps {
   inputRef: (instance: NumberFormat | null) => void;
   onChange: (event: { target: { value: string } }) => void;
@@ -69,11 +64,6 @@ function NumberFormatCustom(props: NumberFormatCustomProps) {
   );
 }
 
-NumberFormatCustom.propTypes = {
-  inputRef: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-} as any;
-
 interface State {
   textmask: string;
   numberformat: string;
diff --git a/docs/src/pages/components/tooltips/CustomizedTooltips.js b/docs/src/pages/components/tooltips/CustomizedTooltips.js
index 6e750788730387..8360421fe393cc 100644
--- a/docs/src/pages/components/tooltips/CustomizedTooltips.js
+++ b/docs/src/pages/components/tooltips/CustomizedTooltips.js
@@ -1,9 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
-import PropTypes from 'prop-types';
 
 function arrowGenerator(color) {
   return {
diff --git a/docs/src/pages/components/tooltips/CustomizedTooltips.tsx b/docs/src/pages/components/tooltips/CustomizedTooltips.tsx
index 5d4ca09fbe0ab9..341d3ab0e3f008 100644
--- a/docs/src/pages/components/tooltips/CustomizedTooltips.tsx
+++ b/docs/src/pages/components/tooltips/CustomizedTooltips.tsx
@@ -3,7 +3,6 @@ import { withStyles, Theme, makeStyles, createStyles } from '@material-ui/core/s
 import Button from '@material-ui/core/Button';
 import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
-import PropTypes from 'prop-types';
 
 function arrowGenerator(color: string) {
   return {
@@ -112,10 +111,6 @@ function ArrowTooltip(props: TooltipProps) {
   );
 }
 
-ArrowTooltip.propTypes = {
-  title: PropTypes.node,
-};
-
 const useStylesBootstrap = makeStyles((theme: Theme) =>
   createStyles({
     arrow: {
@@ -180,10 +175,6 @@ function BootstrapTooltip(props: TooltipProps) {
   );
 }
 
-BootstrapTooltip.propTypes = {
-  title: PropTypes.node,
-};
-
 const HtmlTooltip = withStyles((theme: Theme) => ({
   tooltip: {
     backgroundColor: '#f5f5f9',
diff --git a/docs/src/pages/css-in-js/basics/AdaptingHook.js b/docs/src/pages/css-in-js/basics/AdaptingHook.js
index 0fb026fe16df73..df9a59b590a7a7 100644
--- a/docs/src/pages/css-in-js/basics/AdaptingHook.js
+++ b/docs/src/pages/css-in-js/basics/AdaptingHook.js
@@ -29,7 +29,7 @@ function MyButton(props) {
 }
 
 MyButton.propTypes = {
-  color: PropTypes.oneOf(['red', 'blue']).isRequired,
+  color: PropTypes.oneOf(['blue', 'red']).isRequired,
 };
 
 export default function AdaptingHook() {
diff --git a/docs/src/pages/css-in-js/basics/AdaptingHook.tsx b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
index 58793496dd8c02..a74ef74fc57f24 100644
--- a/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
+++ b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/styles';
 import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
@@ -33,10 +32,6 @@ function MyButton(props: Props & Omit<MuiButtonProps, keyof Props>) {
   return <Button className={classes.root} {...other} />;
 }
 
-(MyButton as any).propTypes = {
-  color: PropTypes.oneOf(['red', 'blue']).isRequired,
-};
-
 export default function AdaptingHook() {
   return (
     <React.Fragment>
diff --git a/docs/src/pages/styles/basics/AdaptingHOC.js b/docs/src/pages/styles/basics/AdaptingHOC.js
index 315ccbf68fce51..74ad2f168bfcfa 100644
--- a/docs/src/pages/styles/basics/AdaptingHOC.js
+++ b/docs/src/pages/styles/basics/AdaptingHOC.js
@@ -29,7 +29,7 @@ function MyButtonRaw(props) {
 
 MyButtonRaw.propTypes = {
   classes: PropTypes.object.isRequired,
-  color: PropTypes.oneOf(['red', 'blue']).isRequired,
+  color: PropTypes.oneOf(['blue', 'red']).isRequired,
 };
 
 const MyButton = withStyles(styles)(MyButtonRaw);
diff --git a/docs/src/pages/styles/basics/AdaptingHOC.tsx b/docs/src/pages/styles/basics/AdaptingHOC.tsx
index 3749ce7ea0cf56..4b98a3372e1fff 100644
--- a/docs/src/pages/styles/basics/AdaptingHOC.tsx
+++ b/docs/src/pages/styles/basics/AdaptingHOC.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withStyles, createStyles, WithStyles } from '@material-ui/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
@@ -32,11 +31,6 @@ function MyButtonRaw(props: WithStyles<typeof styles> & Omit<ButtonProps, keyof
   return <Button className={classes.root} {...other} />;
 }
 
-(MyButtonRaw as any).propTypes = {
-  classes: PropTypes.object.isRequired,
-  color: PropTypes.oneOf(['red', 'blue']).isRequired,
-};
-
 const MyButton = withStyles(styles)(MyButtonRaw);
 
 export default function AdaptingHOC() {
diff --git a/docs/src/pages/styles/basics/AdaptingHook.js b/docs/src/pages/styles/basics/AdaptingHook.js
index 0fb026fe16df73..df9a59b590a7a7 100644
--- a/docs/src/pages/styles/basics/AdaptingHook.js
+++ b/docs/src/pages/styles/basics/AdaptingHook.js
@@ -29,7 +29,7 @@ function MyButton(props) {
 }
 
 MyButton.propTypes = {
-  color: PropTypes.oneOf(['red', 'blue']).isRequired,
+  color: PropTypes.oneOf(['blue', 'red']).isRequired,
 };
 
 export default function AdaptingHook() {
diff --git a/docs/src/pages/styles/basics/AdaptingHook.tsx b/docs/src/pages/styles/basics/AdaptingHook.tsx
index d7216de308ca69..58ed7051c2e72b 100644
--- a/docs/src/pages/styles/basics/AdaptingHook.tsx
+++ b/docs/src/pages/styles/basics/AdaptingHook.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, createStyles } from '@material-ui/styles';
 import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
@@ -35,10 +34,6 @@ function MyButton(props: Props & Omit<MuiButtonProps, keyof Props>) {
   return <Button className={classes.root} {...other} />;
 }
 
-(MyButton as any).propTypes = {
-  color: PropTypes.oneOf(['red', 'blue']).isRequired,
-};
-
 export default function AdaptingHook() {
   return (
     <React.Fragment>
diff --git a/docs/src/pages/styles/basics/HigherOrderComponent.tsx b/docs/src/pages/styles/basics/HigherOrderComponent.tsx
index 624c9dc8bb4d81..25a18d6dc3c1e4 100644
--- a/docs/src/pages/styles/basics/HigherOrderComponent.tsx
+++ b/docs/src/pages/styles/basics/HigherOrderComponent.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withStyles, WithStyles, createStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
@@ -20,8 +19,4 @@ function HigherOrderComponent(props: WithStyles<typeof styles>) {
   return <Button className={classes.root}>Higher-order component</Button>;
 }
 
-(HigherOrderComponent as any).propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
 export default withStyles(styles)(HigherOrderComponent);
diff --git a/docs/src/pages/styles/basics/StressTest.tsx b/docs/src/pages/styles/basics/StressTest.tsx
index bab91a83019567..53172565d4fa93 100644
--- a/docs/src/pages/styles/basics/StressTest.tsx
+++ b/docs/src/pages/styles/basics/StressTest.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ThemeProvider, useTheme, makeStyles, createStyles } from '@material-ui/styles';
 
 interface MyTheme {
@@ -39,10 +38,6 @@ const Component = React.memo((props: ComponentProps) => {
   );
 });
 
-(Component as any).propTypes = {
-  backgroundColor: PropTypes.string.isRequired,
-};
-
 export default function StressTest() {
   const [backgroundColor, setBackgroundColor] = React.useState('#2196f3');
   function handleBackgroundColorChange(event: React.ChangeEvent<HTMLInputElement>) {
diff --git a/package.json b/package.json
index 723419c065cc4c..451e65d67b7bd9 100644
--- a/package.json
+++ b/package.json
@@ -195,6 +195,7 @@
     "styled-components": "^4.1.1",
     "tslint": "5.14.0",
     "typescript": "3.2.2",
+    "typescript-to-proptypes": "^1.1.0",
     "url-loader": "^1.0.1",
     "vrtest": "^0.2.0",
     "webfontloader": "^1.6.28",
diff --git a/yarn.lock b/yarn.lock
index f6ddeba8204052..726f718b81b95f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -46,18 +46,18 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.1.6", "@babel/core@^7.2.2", "@babel/core@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.4.tgz#84055750b05fcd50f9915a826b44fa347a825250"
-  integrity sha512-lQgGX3FPRgbz2SKmhMtYgJvVzGZrmjaF4apZ2bLwofAKiSjxU0drPh4S/VasyYXwaTs+A1gvQ45BN8SQJzHsQQ==
+"@babel/core@^7.1.6", "@babel/core@^7.2.2", "@babel/core@^7.4.4", "@babel/core@^7.5.4":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.4.tgz#4c32df7ad5a58e9ea27ad025c11276324e0b4ddd"
+  integrity sha512-+DaeBEpYq6b2+ZmHx3tHspC+ZRflrvLqwfv8E3hNr5LVQoyBnL8RPKSBCg+rK2W2My9PWlujBiqd0ZPsR9Q6zQ==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.4.4"
-    "@babel/helpers" "^7.4.4"
-    "@babel/parser" "^7.4.4"
+    "@babel/generator" "^7.5.0"
+    "@babel/helpers" "^7.5.4"
+    "@babel/parser" "^7.5.0"
     "@babel/template" "^7.4.4"
-    "@babel/traverse" "^7.4.4"
-    "@babel/types" "^7.4.4"
+    "@babel/traverse" "^7.5.0"
+    "@babel/types" "^7.5.0"
     convert-source-map "^1.1.0"
     debug "^4.1.0"
     json5 "^2.1.0"
@@ -66,12 +66,12 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.1.2", "@babel/generator@^7.4.0", "@babel/generator@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.4.4.tgz#174a215eb843fc392c7edcaabeaa873de6e8f041"
-  integrity sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==
+"@babel/generator@^7.1.2", "@babel/generator@^7.4.0", "@babel/generator@^7.4.4", "@babel/generator@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.0.tgz#f20e4b7a91750ee8b63656073d843d2a736dca4a"
+  integrity sha512-1TTVrt7J9rcG5PMjvO7VEG3FrEoEJNHxumRq66GemPmzboLWtIjjcJgk8rokuAS7IiRSpgVSu5Vb9lc99iJkOA==
   dependencies:
-    "@babel/types" "^7.4.4"
+    "@babel/types" "^7.5.0"
     jsesc "^2.5.1"
     lodash "^4.17.11"
     source-map "^0.5.0"
@@ -252,14 +252,14 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.2.0"
 
-"@babel/helpers@^7.1.2", "@babel/helpers@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.4.4.tgz#868b0ef59c1dd4e78744562d5ce1b59c89f2f2a5"
-  integrity sha512-igczbR/0SeuPR8RFfC7tGrbdTbFL3QTvH6D+Z6zNxnTe//GyqmtHmDkzrqDmyZ3eSwPqB/LhyKoU5DXsp+Vp2A==
+"@babel/helpers@^7.1.2", "@babel/helpers@^7.5.0", "@babel/helpers@^7.5.4":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.5.4.tgz#2f00608aa10d460bde0ccf665d6dcf8477357cf0"
+  integrity sha512-6LJ6xwUEJP51w0sIgKyfvFMJvIb9mWAfohJp0+m6eHJigkFdcH8duZ1sfhn0ltJRzwUIT/yqqhdSfRpCpL7oow==
   dependencies:
     "@babel/template" "^7.4.4"
-    "@babel/traverse" "^7.4.4"
-    "@babel/types" "^7.4.4"
+    "@babel/traverse" "^7.5.0"
+    "@babel/types" "^7.5.0"
 
 "@babel/highlight@^7.0.0":
   version "7.0.0"
@@ -281,10 +281,10 @@
     lodash "^4.17.10"
     v8flags "^3.1.1"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.2", "@babel/parser@^7.1.6", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.4.tgz#5977129431b8fe33471730d255ce8654ae1250b6"
-  integrity sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w==
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.2", "@babel/parser@^7.1.6", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.0.tgz#3e0713dff89ad6ae37faec3b29dcfc5c979770b7"
+  integrity sha512-I5nW8AhGpOXGCCNYGc+p7ExQIBxRFnS2fd/d862bNOKvmoEPjYPcfIjsfdy0ujagYOIYPczKgD9l3FsgTkAzKA==
 
 "@babel/plugin-proposal-async-generator-functions@^7.1.0", "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.2.0"
@@ -363,7 +363,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-class-properties@^7.0.0":
+"@babel/plugin-syntax-class-properties@^7.0.0", "@babel/plugin-syntax-class-properties@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.2.0.tgz#23b3b7b9bcdabd73672a9149f728cd3be6214812"
   integrity sha512-UxYaGXYQ7rrKJS/PxIKRkv3exi05oH7rokBAsmCSsCxz1sVPZ7Fu6FzKoGgUvmY+0YgSkYHgUoCh5R5bCNBQlw==
@@ -940,25 +940,25 @@
     "@babel/parser" "^7.4.4"
     "@babel/types" "^7.4.4"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.4.tgz#0776f038f6d78361860b6823887d4f3937133fe8"
-  integrity sha512-Gw6qqkw/e6AGzlyj9KnkabJX7VcubqPtkUQVAwkc0wUMldr3A/hezNB3Rc5eIvId95iSGkGIOe5hh1kMKf951A==
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.0.tgz#4216d6586854ef5c3c4592dab56ec7eb78485485"
+  integrity sha512-SnA9aLbyOCcnnbQEGwdfBggnc142h/rbqqsXcaATj2hZcegCl903pUD/lfpsNBlBSuWow/YDfRyJuWi2EPR5cg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.4.4"
+    "@babel/generator" "^7.5.0"
     "@babel/helper-function-name" "^7.1.0"
     "@babel/helper-split-export-declaration" "^7.4.4"
-    "@babel/parser" "^7.4.4"
-    "@babel/types" "^7.4.4"
+    "@babel/parser" "^7.5.0"
+    "@babel/types" "^7.5.0"
     debug "^4.1.0"
     globals "^11.1.0"
     lodash "^4.17.11"
 
-"@babel/types@^7.0.0", "@babel/types@^7.1.2", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.4.tgz#8db9e9a629bb7c29370009b4b779ed93fe57d5f0"
-  integrity sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==
+"@babel/types@^7.0.0", "@babel/types@^7.1.2", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.0.tgz#e47d43840c2e7f9105bc4d3a2c371b4d0c7832ab"
+  integrity sha512-UFpDVqRABKsW01bvw7/wSUe56uy6RXM5+VJibVVAybDGxEW25jdwiFJEf7ASvSaC7sN7rbE/l3cLp2izav+CtQ==
   dependencies:
     esutils "^2.0.2"
     lodash "^4.17.11"
@@ -8988,10 +8988,10 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.4, lodash@~4.17.5:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.4, lodash@~4.17.5:
+  version "4.17.14"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
+  integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==
 
 log-symbols@^1.0.2:
   version "1.0.2"
@@ -9777,12 +9777,7 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
-node-fetch@^2.3.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.5.0.tgz#8028c49fc1191bba56a07adc6e2a954644a48501"
-  integrity sha512-YuZKluhWGJwCcUu4RlZstdAxr8bFfOVHakc1mplwHkk8J+tqM1Y5yraYvIUpeX8aY7+crCwiELJq7Vl0o0LWXw==
-
-node-fetch@^2.5.0:
+node-fetch@^2.3.0, node-fetch@^2.5.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
@@ -13882,11 +13877,29 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript-to-proptypes@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/typescript-to-proptypes/-/typescript-to-proptypes-1.1.0.tgz#31306953bb5fda8d46f679ed6ca99860874226f4"
+  integrity sha512-U57VzFJ9t5wl4d7V48AmD7YPWD0YCilZqvCz12hCRxtE2kd1yKVfs2Eo+9NAEUkzzcDCc5U8MktgfV4FgFNgew==
+  dependencies:
+    "@babel/core" "^7.5.4"
+    "@babel/plugin-syntax-class-properties" "^7.2.0"
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+    "@babel/types" "^7.5.0"
+    lodash "^4.17.14"
+    typescript "3.5.2"
+    uuid "^3.3.2"
+
 typescript@3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.2.tgz#fe8101c46aa123f8353523ebdcf5730c2ae493e5"
   integrity sha512-VCj5UiSyHBjwfYacmDuc/NOk4QQixbE+Wn7MFJuS0nRuPQbof132Pw4u53dm264O8LPc2MVsc7RJNml5szurkg==
 
+typescript@3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.2.tgz#a09e1dc69bc9551cadf17dba10ee42cf55e5d56c"
+  integrity sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA==
+
 typescript@next:
   version "3.3.0-dev.20190112"
   resolved "https://registry.npmjs.org/typescript/-/typescript-3.3.0-dev.20190112.tgz#7d0485527d10db1acbfbc6f87bcd8541ec71c32f"