diff --git a/.size-limit.js b/.size-limit.js
index 86027af89131a6..f37526ff32fe78 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -16,19 +16,19 @@ module.exports = [
     name: 'The initial cost paid for using one component',
     webpack: true,
     path: 'packages/material-ui/build/Paper/index.js',
-    limit: '18.8 KB',
+    limit: '18.7 KB',
   },
   {
     name: 'The initial cost paid for using one component with ES modules',
     webpack: true,
     path: 'packages/material-ui/build/esm/Paper/index.js',
-    limit: '17.9 KB',
+    limit: '17.8 KB',
   },
   {
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '92.2 KB',
+    limit: '92.3 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',
@@ -53,14 +53,14 @@ module.exports = [
     name: 'The size of the @material-ui/core/Button component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Button/index.js',
-    limit: '24.6 KB',
+    limit: '24.5 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-modal
     name: 'The size of the @material-ui/core/Modal component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Modal/index.js',
-    limit: '24.1 KB',
+    limit: '24.0 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-popper
diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js
index ab3f29b418a469..a736f0d64e0025 100644
--- a/docs/src/modules/components/AppContent.js
+++ b/docs/src/modules/components/AppContent.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
@@ -27,7 +27,7 @@ const styles = theme => ({
 function AppContent(props) {
   const { className, classes, children } = props;
 
-  return <main className={classNames(classes.root, className)}>{children}</main>;
+  return <main className={clsx(classes.root, className)}>{children}</main>;
 }
 
 AppContent.propTypes = {
diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
index 2fc1b41d73ec69..e2bca910e967d3 100644
--- a/docs/src/modules/components/AppDrawer.js
+++ b/docs/src/modules/components/AppDrawer.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { _rewriteUrlForNextExport } from 'next/router';
 import { withStyles } from '@material-ui/core/styles';
@@ -130,7 +130,7 @@ function AppDrawer(props) {
       <Hidden lgUp={!disablePermanent} implementation="js">
         <SwipeableDrawer
           classes={{
-            paper: classNames(classes.paper, 'algolia-drawer'),
+            paper: clsx(classes.paper, 'algolia-drawer'),
           }}
           disableBackdropTransition={!iOS}
           variant="temporary"
diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js
index f3acbcada17ced..a9cb7ec801d877 100644
--- a/docs/src/modules/components/AppDrawerNavItem.js
+++ b/docs/src/modules/components/AppDrawerNavItem.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import ListItem from '@material-ui/core/ListItem';
 import Button from '@material-ui/core/Button';
@@ -85,7 +85,7 @@ class AppDrawerNavItem extends React.Component {
             component={props => (
               <Link naked activeClassName={classes.active} href={href} {...props} />
             )}
-            className={classNames(classes.buttonLeaf, `depth-${depth}`)}
+            className={clsx(classes.buttonLeaf, `depth-${depth}`)}
             disableRipple
             onClick={onClick}
             style={style}
diff --git a/docs/src/modules/components/AppTheme.js b/docs/src/modules/components/AppTheme.js
index cbf9f80baba13f..fdc118f048cc24 100644
--- a/docs/src/modules/components/AppTheme.js
+++ b/docs/src/modules/components/AppTheme.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
@@ -26,7 +26,7 @@ function AppTheme(props) {
       <Typography
         color="textSecondary"
         align="center"
-        className={classNames(classes.credit, {
+        className={clsx(classes.credit, {
           [classes.hideCredit]: hideCredit,
         })}
       >
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 0aa0d4d7d72a93..013f512ca8be03 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import LZString from 'lz-string';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import copy from 'clipboard-copy';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
@@ -321,7 +321,7 @@ class Demo extends React.Component {
           </div>
         )}
         <div
-          className={classNames(classes.demo, {
+          className={clsx(classes.demo, {
             [classes.demoHiddenHeader]: demoOptions.hideHeader,
           })}
         >
diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
index fc75e04c29d997..9ffcd42017a15f 100644
--- a/docs/src/modules/components/HomeSteps.js
+++ b/docs/src/modules/components/HomeSteps.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import compose from 'recompose/compose';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
@@ -86,7 +86,7 @@ function HomeSteps(props) {
 
   return (
     <Grid container>
-      <Grid item xs={12} md={4} className={classNames(classes.step, classes.leftStep)}>
+      <Grid item xs={12} md={4} className={clsx(classes.step, classes.leftStep)}>
         <div className={classes.stepTitle}>
           <FileDownloadIcon className={classes.stepIcon} />
           <Typography variant="h6">{t('installation')}</Typography>
@@ -169,7 +169,7 @@ function HomeSteps(props) {
           {t('usageButton')}
         </Button>
       </Grid>
-      <Grid item xs={12} md={4} className={classNames(classes.step, classes.rightStep)}>
+      <Grid item xs={12} md={4} className={clsx(classes.step, classes.rightStep)}>
         <div className={classes.stepTitle}>
           <WhatshotIcon className={classes.stepIcon} />
           <Typography variant="h6">{t('themes')}</Typography>
diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js
index 035693d9211abd..2dc068406e1b18 100644
--- a/docs/src/modules/components/Link.js
+++ b/docs/src/modules/components/Link.js
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withRouter } from 'next/router';
 import NextLink from 'next/link';
 import MuiLink from '@material-ui/core/Link';
@@ -16,7 +16,7 @@ function NextWrapper(props) {
     <NextLink href={href} prefetch={prefetch}>
       <a
         onClick={onClick}
-        className={classNames(className, {
+        className={clsx(className, {
           [activeClassName]: router.pathname === href && activeClassName,
         })}
         {...other}
diff --git a/docs/src/modules/components/Tidelift.js b/docs/src/modules/components/Tidelift.js
index ceb509bdd01077..fb148de49e06ea 100644
--- a/docs/src/modules/components/Tidelift.js
+++ b/docs/src/modules/components/Tidelift.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
@@ -43,7 +43,7 @@ function Tidelift(props) {
       data-ga-event-category="sponsors"
       data-ga-event-action="logo"
       data-ga-event-label="tidelift"
-      className={classNames(classes.root, 'mui-fixed')}
+      className={clsx(classes.root, 'mui-fixed')}
       href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage"
       target="_blank"
       rel="noopener"
diff --git a/docs/src/pages/customization/css-in-js/CssInJs.js b/docs/src/pages/customization/css-in-js/CssInJs.js
index e794349f253cd3..1c53a1077da01c 100644
--- a/docs/src/pages/customization/css-in-js/CssInJs.js
+++ b/docs/src/pages/customization/css-in-js/CssInJs.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 
@@ -23,7 +23,7 @@ function MyLink(props) {
 
   return (
     <a
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.primary]: variant === 'primary',
diff --git a/docs/src/pages/customization/css-in-js/StyledComponents.js b/docs/src/pages/customization/css-in-js/StyledComponents.js
index 2bc18009d72c10..1ae57ce8b53d46 100644
--- a/docs/src/pages/customization/css-in-js/StyledComponents.js
+++ b/docs/src/pages/customization/css-in-js/StyledComponents.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -10,7 +10,7 @@ function styled(Component) {
   return (style, options) => {
     function StyledComponent(props) {
       const { classes, className, ...other } = props;
-      return <Component className={classNames(classes.root, className)} {...other} />;
+      return <Component className={clsx(classes.root, className)} {...other} />;
     }
     StyledComponent.propTypes = {
       classes: PropTypes.object.isRequired,
diff --git a/docs/src/pages/customization/overrides/ClassNames.js b/docs/src/pages/customization/overrides/ClassNames.js
index fe0547e319e075..687e7b71da1d9c 100644
--- a/docs/src/pages/customization/overrides/ClassNames.js
+++ b/docs/src/pages/customization/overrides/ClassNames.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
@@ -21,7 +21,7 @@ function ClassNames(props) {
   const { classes, children, className, ...other } = props;
 
   return (
-    <Button className={classNames(classes.root, className)} {...other}>
+    <Button className={clsx(classes.root, className)} {...other}>
       {children || 'class names'}
     </Button>
   );
diff --git a/docs/src/pages/customization/overrides/DynamicClassName.js b/docs/src/pages/customization/overrides/DynamicClassName.js
index eeea69807efe24..5e4b7799615d53 100644
--- a/docs/src/pages/customization/overrides/DynamicClassName.js
+++ b/docs/src/pages/customization/overrides/DynamicClassName.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -47,7 +47,7 @@ class DynamicClassName extends React.Component {
           label="Blue"
         />
         <Button
-          className={classNames(classes.button, {
+          className={clsx(classes.button, {
             [classes.buttonBlue]: this.state.color === 'blue',
           })}
         >
diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js
index 8bbc9756937217..34a11af28b7d0b 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types, react/jsx-handler-names */
 
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Select from 'react-select';
 import { makeStyles, useTheme } from '@material-ui/styles';
 import Typography from '@material-ui/core/Typography';
@@ -180,7 +180,7 @@ function MultiValue(props) {
     <Chip
       tabIndex={-1}
       label={props.children}
-      className={classNames(props.selectProps.classes.chip, {
+      className={clsx(props.selectProps.classes.chip, {
         [props.selectProps.classes.chipFocused]: props.isFocused,
       })}
       onDelete={props.removeProps.onClick}
diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
index c68f1c387e4bd5..2865cffee904bf 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Select from 'react-select';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
@@ -181,7 +181,7 @@ function MultiValue(props) {
     <Chip
       tabIndex={-1}
       label={props.children}
-      className={classNames(props.selectProps.classes.chip, {
+      className={clsx(props.selectProps.classes.chip, {
         [props.selectProps.classes.chipFocused]: props.isFocused,
       })}
       onDelete={props.removeProps.onClick}
diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js
index f0bbf7e93ef5ae..92b9e9e54d4c17 100644
--- a/docs/src/pages/demos/buttons/CustomizedButtons.js
+++ b/docs/src/pages/demos/buttons/CustomizedButtons.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import purple from '@material-ui/core/colors/purple';
@@ -67,11 +67,7 @@ function CustomizedButtons(props) {
 
   return (
     <div>
-      <Button
-        variant="contained"
-        color="primary"
-        className={classNames(classes.margin, classes.cssRoot)}
-      >
+      <Button variant="contained" color="primary" className={clsx(classes.margin, classes.cssRoot)}>
         Custom CSS
       </Button>
       <MuiThemeProvider theme={theme}>
@@ -83,7 +79,7 @@ function CustomizedButtons(props) {
         variant="contained"
         color="primary"
         disableRipple
-        className={classNames(classes.margin, classes.bootstrapRoot)}
+        className={clsx(classes.margin, classes.bootstrapRoot)}
       >
         Bootstrap
       </Button>
diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js
index fc15e6b4be557e..aff0946fb0c448 100644
--- a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js
+++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SwipeableViews from 'react-swipeable-views';
 import { makeStyles, useTheme } from '@material-ui/styles';
 import AppBar from '@material-ui/core/AppBar';
@@ -81,7 +81,7 @@ function FloatingActionButtonZoom() {
     },
     {
       color: 'inherit',
-      className: classNames(classes.fab, classes.fabGreen),
+      className: clsx(classes.fab, classes.fabGreen),
       icon: <UpIcon />,
     },
   ];
diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js
index 37810e9b36ee31..68306ac3bf83d7 100644
--- a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js
+++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SwipeableViews from 'react-swipeable-views';
 import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
@@ -83,7 +83,7 @@ class FloatingActionButtonZoom extends React.Component {
       },
       {
         color: 'inherit',
-        className: classNames(classes.fab, classes.fabGreen),
+        className: clsx(classes.fab, classes.fabGreen),
         icon: <UpIcon />,
       },
     ];
diff --git a/docs/src/pages/demos/buttons/IconLabelButtons.js b/docs/src/pages/demos/buttons/IconLabelButtons.js
index 90614fd4a7f12c..b41cbff02b7a51 100644
--- a/docs/src/pages/demos/buttons/IconLabelButtons.js
+++ b/docs/src/pages/demos/buttons/IconLabelButtons.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -46,7 +46,7 @@ function IconLabelButtons(props) {
         Talk
       </Button>
       <Button variant="contained" size="small" className={classes.button}>
-        <SaveIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
+        <SaveIcon className={clsx(classes.leftIcon, classes.iconSmall)} />
         Save
       </Button>
     </div>
diff --git a/docs/src/pages/demos/drawers/MiniDrawer.hooks.js b/docs/src/pages/demos/drawers/MiniDrawer.hooks.js
index 8a8df2f31de420..037e9f83b7d6a3 100644
--- a/docs/src/pages/demos/drawers/MiniDrawer.hooks.js
+++ b/docs/src/pages/demos/drawers/MiniDrawer.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles, useTheme } from '@material-ui/styles';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
@@ -100,7 +100,7 @@ function MiniDrawer() {
       <CssBaseline />
       <AppBar
         position="fixed"
-        className={classNames(classes.appBar, {
+        className={clsx(classes.appBar, {
           [classes.appBarShift]: open,
         })}
       >
@@ -109,7 +109,7 @@ function MiniDrawer() {
             color="inherit"
             aria-label="Open drawer"
             onClick={handleDrawerOpen}
-            className={classNames(classes.menuButton, {
+            className={clsx(classes.menuButton, {
               [classes.hide]: open,
             })}
           >
@@ -122,12 +122,12 @@ function MiniDrawer() {
       </AppBar>
       <Drawer
         variant="permanent"
-        className={classNames(classes.drawer, {
+        className={clsx(classes.drawer, {
           [classes.drawerOpen]: open,
           [classes.drawerClose]: !open,
         })}
         classes={{
-          paper: classNames({
+          paper: clsx({
             [classes.drawerOpen]: open,
             [classes.drawerClose]: !open,
           }),
diff --git a/docs/src/pages/demos/drawers/MiniDrawer.js b/docs/src/pages/demos/drawers/MiniDrawer.js
index b4dea035153aa9..cdf200f61b64b7 100644
--- a/docs/src/pages/demos/drawers/MiniDrawer.js
+++ b/docs/src/pages/demos/drawers/MiniDrawer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
@@ -104,7 +104,7 @@ class MiniDrawer extends React.Component {
         <CssBaseline />
         <AppBar
           position="fixed"
-          className={classNames(classes.appBar, {
+          className={clsx(classes.appBar, {
             [classes.appBarShift]: this.state.open,
           })}
         >
@@ -113,7 +113,7 @@ class MiniDrawer extends React.Component {
               color="inherit"
               aria-label="Open drawer"
               onClick={this.handleDrawerOpen}
-              className={classNames(classes.menuButton, {
+              className={clsx(classes.menuButton, {
                 [classes.hide]: this.state.open,
               })}
             >
@@ -126,12 +126,12 @@ class MiniDrawer extends React.Component {
         </AppBar>
         <Drawer
           variant="permanent"
-          className={classNames(classes.drawer, {
+          className={clsx(classes.drawer, {
             [classes.drawerOpen]: this.state.open,
             [classes.drawerClose]: !this.state.open,
           })}
           classes={{
-            paper: classNames({
+            paper: clsx({
               [classes.drawerOpen]: this.state.open,
               [classes.drawerClose]: !this.state.open,
             }),
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js b/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js
index d14ede1f5c011d..24e52a3f529f4c 100644
--- a/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js
+++ b/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles, useTheme } from '@material-ui/styles';
 import Drawer from '@material-ui/core/Drawer';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -95,7 +95,7 @@ function PersistentDrawerLeft() {
       <CssBaseline />
       <AppBar
         position="fixed"
-        className={classNames(classes.appBar, {
+        className={clsx(classes.appBar, {
           [classes.appBarShift]: open,
         })}
       >
@@ -104,7 +104,7 @@ function PersistentDrawerLeft() {
             color="inherit"
             aria-label="Open drawer"
             onClick={handleDrawerOpen}
-            className={classNames(classes.menuButton, open && classes.hide)}
+            className={clsx(classes.menuButton, open && classes.hide)}
           >
             <MenuIcon />
           </IconButton>
@@ -147,7 +147,7 @@ function PersistentDrawerLeft() {
         </List>
       </Drawer>
       <main
-        className={classNames(classes.content, {
+        className={clsx(classes.content, {
           [classes.contentShift]: open,
         })}
       >
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerLeft.js b/docs/src/pages/demos/drawers/PersistentDrawerLeft.js
index f900acebbe8fbb..8322854c6db56c 100644
--- a/docs/src/pages/demos/drawers/PersistentDrawerLeft.js
+++ b/docs/src/pages/demos/drawers/PersistentDrawerLeft.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -100,7 +100,7 @@ class PersistentDrawerLeft extends React.Component {
         <CssBaseline />
         <AppBar
           position="fixed"
-          className={classNames(classes.appBar, {
+          className={clsx(classes.appBar, {
             [classes.appBarShift]: open,
           })}
         >
@@ -109,7 +109,7 @@ class PersistentDrawerLeft extends React.Component {
               color="inherit"
               aria-label="Open drawer"
               onClick={this.handleDrawerOpen}
-              className={classNames(classes.menuButton, open && classes.hide)}
+              className={clsx(classes.menuButton, open && classes.hide)}
             >
               <MenuIcon />
             </IconButton>
@@ -152,7 +152,7 @@ class PersistentDrawerLeft extends React.Component {
           </List>
         </Drawer>
         <main
-          className={classNames(classes.content, {
+          className={clsx(classes.content, {
             [classes.contentShift]: open,
           })}
         >
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js b/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js
index f7b301f023f57c..8c8af5448382fa 100644
--- a/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js
+++ b/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles, useTheme } from '@material-ui/styles';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
@@ -95,7 +95,7 @@ function PersistentDrawerRight() {
       <CssBaseline />
       <AppBar
         position="fixed"
-        className={classNames(classes.appBar, {
+        className={clsx(classes.appBar, {
           [classes.appBarShift]: open,
         })}
       >
@@ -104,7 +104,7 @@ function PersistentDrawerRight() {
             color="inherit"
             aria-label="Open drawer"
             onClick={handleDrawerOpen}
-            className={classNames(classes.menuButton, open && classes.hide)}
+            className={clsx(classes.menuButton, open && classes.hide)}
           >
             <MenuIcon />
           </IconButton>
@@ -114,7 +114,7 @@ function PersistentDrawerRight() {
         </Toolbar>
       </AppBar>
       <main
-        className={classNames(classes.content, {
+        className={clsx(classes.content, {
           [classes.contentShift]: open,
         })}
       >
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerRight.js b/docs/src/pages/demos/drawers/PersistentDrawerRight.js
index b2de661af25282..b80ffd265d4937 100644
--- a/docs/src/pages/demos/drawers/PersistentDrawerRight.js
+++ b/docs/src/pages/demos/drawers/PersistentDrawerRight.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
@@ -100,7 +100,7 @@ class PersistentDrawerRight extends React.Component {
         <CssBaseline />
         <AppBar
           position="fixed"
-          className={classNames(classes.appBar, {
+          className={clsx(classes.appBar, {
             [classes.appBarShift]: open,
           })}
         >
@@ -109,7 +109,7 @@ class PersistentDrawerRight extends React.Component {
               color="inherit"
               aria-label="Open drawer"
               onClick={this.handleDrawerOpen}
-              className={classNames(classes.menuButton, open && classes.hide)}
+              className={clsx(classes.menuButton, open && classes.hide)}
             >
               <MenuIcon />
             </IconButton>
@@ -119,7 +119,7 @@ class PersistentDrawerRight extends React.Component {
           </Toolbar>
         </AppBar>
         <main
-          className={classNames(classes.content, {
+          className={clsx(classes.content, {
             [classes.contentShift]: open,
           })}
         >
diff --git a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
index 16c8ac5281f4f3..b1965fdc9438d3 100644
--- a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
+++ b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
@@ -65,7 +65,7 @@ function DetailedExpansionPanel(props) {
           <div className={classes.column}>
             <Chip label="Barbados" className={classes.chip} onDelete={() => {}} />
           </div>
-          <div className={classNames(classes.column, classes.helper)}>
+          <div className={clsx(classes.column, classes.helper)}>
             <Typography variant="caption">
               Select your destination of choice
               <br />
diff --git a/docs/src/pages/demos/progress/CircularIntegration.hooks.js b/docs/src/pages/demos/progress/CircularIntegration.hooks.js
index eed9351280b35d..8caa33d182f894 100644
--- a/docs/src/pages/demos/progress/CircularIntegration.hooks.js
+++ b/docs/src/pages/demos/progress/CircularIntegration.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import green from '@material-ui/core/colors/green';
@@ -46,7 +46,7 @@ function CircularIntegration() {
   const [success, setSuccess] = React.useState(false);
   let timer = null;
 
-  const buttonClassname = classNames({
+  const buttonClassname = clsx({
     [classes.buttonSuccess]: success,
   });
 
diff --git a/docs/src/pages/demos/progress/CircularIntegration.js b/docs/src/pages/demos/progress/CircularIntegration.js
index 0c716b603c3cf8..4db9e652d3b596 100644
--- a/docs/src/pages/demos/progress/CircularIntegration.js
+++ b/docs/src/pages/demos/progress/CircularIntegration.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import green from '@material-ui/core/colors/green';
@@ -73,7 +73,7 @@ class CircularIntegration extends React.Component {
   render() {
     const { loading, success } = this.state;
     const { classes } = this.props;
-    const buttonClassname = classNames({
+    const buttonClassname = clsx({
       [classes.buttonSuccess]: success,
     });
 
diff --git a/docs/src/pages/demos/selects/MultipleSelect.hooks.js b/docs/src/pages/demos/selects/MultipleSelect.hooks.js
index 196d317c16acc9..0fdea873aa2380 100644
--- a/docs/src/pages/demos/selects/MultipleSelect.hooks.js
+++ b/docs/src/pages/demos/selects/MultipleSelect.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles, useTheme } from '@material-ui/styles';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
@@ -133,7 +133,7 @@ function MultipleSelect() {
           ))}
         </Select>
       </FormControl>
-      <FormControl className={classNames(classes.formControl, classes.noLabel)}>
+      <FormControl className={clsx(classes.formControl, classes.noLabel)}>
         <Select
           multiple
           displayEmpty
diff --git a/docs/src/pages/demos/selects/MultipleSelect.js b/docs/src/pages/demos/selects/MultipleSelect.js
index ba27de01e68830..061e0887eb919e 100644
--- a/docs/src/pages/demos/selects/MultipleSelect.js
+++ b/docs/src/pages/demos/selects/MultipleSelect.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
@@ -150,7 +150,7 @@ class MultipleSelect extends React.Component {
             ))}
           </Select>
         </FormControl>
-        <FormControl className={classNames(classes.formControl, classes.noLabel)}>
+        <FormControl className={clsx(classes.formControl, classes.noLabel)}>
           <Select
             multiple
             displayEmpty
diff --git a/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js b/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js
index ff20406f7a9397..c9b072333986bb 100644
--- a/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js
+++ b/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import ErrorIcon from '@material-ui/icons/Error';
@@ -54,11 +54,11 @@ function MySnackbarContentWrapper(props) {
 
   return (
     <SnackbarContent
-      className={classNames(classes[variant], className)}
+      className={clsx(classes[variant], className)}
       aria-describedby="client-snackbar"
       message={
         <span id="client-snackbar" className={classes.message}>
-          <Icon className={classNames(classes.icon, classes.iconVariant)} />
+          <Icon className={clsx(classes.icon, classes.iconVariant)} />
           {message}
         </span>
       }
diff --git a/docs/src/pages/demos/snackbars/CustomizedSnackbars.js b/docs/src/pages/demos/snackbars/CustomizedSnackbars.js
index 2542a16e29555b..aa1c23b9036ff5 100644
--- a/docs/src/pages/demos/snackbars/CustomizedSnackbars.js
+++ b/docs/src/pages/demos/snackbars/CustomizedSnackbars.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import ErrorIcon from '@material-ui/icons/Error';
@@ -53,11 +53,11 @@ function MySnackbarContent(props) {
 
   return (
     <SnackbarContent
-      className={classNames(classes[variant], className)}
+      className={clsx(classes[variant], className)}
       aria-describedby="client-snackbar"
       message={
         <span id="client-snackbar" className={classes.message}>
-          <Icon className={classNames(classes.icon, classes.iconVariant)} />
+          <Icon className={clsx(classes.icon, classes.iconVariant)} />
           {message}
         </span>
       }
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js
index 941bb9c0431f5d..0ef58baeb4e077 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -67,7 +67,7 @@ function FabIntegrationSnackbar() {
     setOpen(false);
   }
 
-  const fabClassName = classNames(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
+  const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
 
   return (
     <div className={classes.root}>
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
index e026cfceded85b..07864731a53012 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -72,7 +72,7 @@ class FabIntegrationSnackbar extends React.Component {
   render() {
     const { classes } = this.props;
     const { open } = this.state;
-    const fabClassName = classNames(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
+    const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
 
     return (
       <div className={classes.root}>
diff --git a/docs/src/pages/demos/tables/EnhancedTable.hooks.js b/docs/src/pages/demos/tables/EnhancedTable.hooks.js
index fe6ed7ccbc4297..cee9a25f280bb9 100644
--- a/docs/src/pages/demos/tables/EnhancedTable.hooks.js
+++ b/docs/src/pages/demos/tables/EnhancedTable.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/styles';
 import Table from '@material-ui/core/Table';
@@ -143,7 +143,7 @@ const EnhancedTableToolbar = props => {
 
   return (
     <Toolbar
-      className={classNames(classes.root, {
+      className={clsx(classes.root, {
         [classes.highlight]: numSelected > 0,
       })}
     >
diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js
index 0ed079d1b5241c..ea0bf86cb351f4 100644
--- a/docs/src/pages/demos/tables/EnhancedTable.js
+++ b/docs/src/pages/demos/tables/EnhancedTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
@@ -145,7 +145,7 @@ let EnhancedTableToolbar = props => {
 
   return (
     <Toolbar
-      className={classNames(classes.root, {
+      className={clsx(classes.root, {
         [classes.highlight]: numSelected > 0,
       })}
     >
diff --git a/docs/src/pages/demos/tables/ReactVirtualizedTable.js b/docs/src/pages/demos/tables/ReactVirtualizedTable.js
index 568cbe01ef22a0..20648dabab9522 100644
--- a/docs/src/pages/demos/tables/ReactVirtualizedTable.js
+++ b/docs/src/pages/demos/tables/ReactVirtualizedTable.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import TableCell from '@material-ui/core/TableCell';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
@@ -38,7 +38,7 @@ class MuiVirtualizedTable extends React.PureComponent {
   getRowClassName = ({ index }) => {
     const { classes, rowClassName, onRowClick } = this.props;
 
-    return classNames(classes.tableRow, classes.flexContainer, rowClassName, {
+    return clsx(classes.tableRow, classes.flexContainer, rowClassName, {
       [classes.tableRowHover]: index !== -1 && onRowClick != null,
     });
   };
@@ -48,7 +48,7 @@ class MuiVirtualizedTable extends React.PureComponent {
     return (
       <TableCell
         component="div"
-        className={classNames(classes.tableCell, classes.flexContainer, {
+        className={clsx(classes.tableCell, classes.flexContainer, {
           [classes.noClick]: onRowClick == null,
         })}
         variant="body"
@@ -79,7 +79,7 @@ class MuiVirtualizedTable extends React.PureComponent {
     return (
       <TableCell
         component="div"
-        className={classNames(classes.tableCell, classes.flexContainer, classes.noClick)}
+        className={clsx(classes.tableCell, classes.flexContainer, classes.noClick)}
         variant="head"
         style={{ height: headerHeight }}
         align={columns[columnIndex].numeric || false ? 'right' : 'left'}
@@ -122,7 +122,7 @@ class MuiVirtualizedTable extends React.PureComponent {
                       columnIndex: index,
                     })
                   }
-                  className={classNames(classes.flexContainer, className)}
+                  className={clsx(classes.flexContainer, className)}
                   cellRenderer={renderer}
                   dataKey={dataKey}
                   {...other}
diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js b/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js
index bc28f0ca8c022c..327c8a7de05864 100644
--- a/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js
+++ b/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/styles';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
@@ -58,7 +58,7 @@ function FilledInputAdornments() {
     <div className={classes.root}>
       <TextField
         id="filled-simple-start-adornment"
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         variant="filled"
         label="With filled TextField"
         InputProps={{
@@ -67,7 +67,7 @@ function FilledInputAdornments() {
       />
       <TextField
         select
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         variant="filled"
         label="With Select"
         value={values.weightRange}
@@ -84,7 +84,7 @@ function FilledInputAdornments() {
       </TextField>
       <TextField
         id="filled-adornment-amount"
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         variant="filled"
         label="Amount"
         value={values.amount}
@@ -95,7 +95,7 @@ function FilledInputAdornments() {
       />
       <TextField
         id="filled-adornment-weight"
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         variant="filled"
         label="Weight"
         value={values.weight}
@@ -107,7 +107,7 @@ function FilledInputAdornments() {
       />
       <TextField
         id="filled-adornment-password"
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         variant="filled"
         type={values.showPassword ? 'text' : 'password'}
         label="Password"
diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.js b/docs/src/pages/demos/text-fields/FilledInputAdornments.js
index 9d137dc1e072fe..128b8fe469c32c 100644
--- a/docs/src/pages/demos/text-fields/FilledInputAdornments.js
+++ b/docs/src/pages/demos/text-fields/FilledInputAdornments.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
@@ -61,7 +61,7 @@ class FilledInputAdornments extends React.Component {
       <div className={classes.root}>
         <TextField
           id="filled-simple-start-adornment"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="filled"
           label="With filled TextField"
           InputProps={{
@@ -71,7 +71,7 @@ class FilledInputAdornments extends React.Component {
 
         <TextField
           select
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="filled"
           label="With Select"
           value={this.state.weightRange}
@@ -88,7 +88,7 @@ class FilledInputAdornments extends React.Component {
         </TextField>
         <TextField
           id="filled-adornment-amount"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="filled"
           label="Amount"
           value={this.state.amount}
@@ -100,7 +100,7 @@ class FilledInputAdornments extends React.Component {
 
         <TextField
           id="filled-adornment-weight"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="filled"
           label="Weight"
           value={this.state.weight}
@@ -113,7 +113,7 @@ class FilledInputAdornments extends React.Component {
 
         <TextField
           id="filled-adornment-password"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="filled"
           type={this.state.showPassword ? 'text' : 'password'}
           label="Password"
diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx b/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx
index 53263f87d1eec9..f57ca517514f8b 100644
--- a/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx
+++ b/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
@@ -74,7 +74,7 @@ class FilledInputAdornments extends React.Component<Props, State> {
       <div className={classes.root}>
         <TextField
           id="filled-simple-start-adornment"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="filled"
           label="With filled TextField"
           InputProps={{
@@ -83,7 +83,7 @@ class FilledInputAdornments extends React.Component<Props, State> {
         />
         <TextField
           select
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="filled"
           label="With Select"
           value={this.state.weightRange}
@@ -100,7 +100,7 @@ class FilledInputAdornments extends React.Component<Props, State> {
         </TextField>
         <TextField
           id="filled-adornment-amount"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="filled"
           label="Amount"
           value={this.state.amount}
@@ -111,7 +111,7 @@ class FilledInputAdornments extends React.Component<Props, State> {
         />
         <TextField
           id="filled-adornment-weight"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="filled"
           label="Weight"
           value={this.state.weight}
@@ -123,7 +123,7 @@ class FilledInputAdornments extends React.Component<Props, State> {
         />
         <TextField
           id="filled-adornment-password"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="filled"
           type={this.state.showPassword ? 'text' : 'password'}
           label="Password"
diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js b/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js
index 29d1a4fef80665..c8ecd21f0ccabc 100644
--- a/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js
+++ b/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
@@ -132,7 +132,7 @@ function FilledTextFields() {
       <TextField
         id="filled-dense"
         label="Dense"
-        className={classNames(classes.textField, classes.dense)}
+        className={clsx(classes.textField, classes.dense)}
         margin="dense"
         variant="filled"
       />
diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.js b/docs/src/pages/demos/text-fields/FilledTextFields.js
index 0189030bd5cddf..f82585e7e230aa 100644
--- a/docs/src/pages/demos/text-fields/FilledTextFields.js
+++ b/docs/src/pages/demos/text-fields/FilledTextFields.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
@@ -145,7 +145,7 @@ class FilledTextFields extends React.Component {
         <TextField
           id="filled-dense"
           label="Dense"
-          className={classNames(classes.textField, classes.dense)}
+          className={clsx(classes.textField, classes.dense)}
           margin="dense"
           variant="filled"
         />
diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.tsx b/docs/src/pages/demos/text-fields/FilledTextFields.tsx
index 8fddd83e37aaaf..094a8414ac41e5 100644
--- a/docs/src/pages/demos/text-fields/FilledTextFields.tsx
+++ b/docs/src/pages/demos/text-fields/FilledTextFields.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
@@ -147,7 +147,7 @@ class FilledTextFields extends React.Component<Props, State> {
         <TextField
           id="filled-dense"
           label="Dense"
-          className={classNames(classes.textField, classes.dense)}
+          className={clsx(classes.textField, classes.dense)}
           margin="dense"
           variant="filled"
         />
diff --git a/docs/src/pages/demos/text-fields/InputAdornments.hooks.js b/docs/src/pages/demos/text-fields/InputAdornments.hooks.js
index 5eb7cbe64a3094..0968c78a4e2f23 100644
--- a/docs/src/pages/demos/text-fields/InputAdornments.hooks.js
+++ b/docs/src/pages/demos/text-fields/InputAdornments.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/styles';
 import IconButton from '@material-ui/core/IconButton';
 import Input from '@material-ui/core/Input';
@@ -66,7 +66,7 @@ function InputAdornments() {
       <TextField
         label="With normal TextField"
         id="simple-start-adornment"
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         InputProps={{
           startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
         }}
@@ -74,7 +74,7 @@ function InputAdornments() {
       <TextField
         select
         label="With Select"
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         value={values.weightRange}
         onChange={handleChange('weightRange')}
         InputProps={{
@@ -96,7 +96,7 @@ function InputAdornments() {
           startAdornment={<InputAdornment position="start">$</InputAdornment>}
         />
       </FormControl>
-      <FormControl className={classNames(classes.margin, classes.withoutLabel, classes.textField)}>
+      <FormControl className={clsx(classes.margin, classes.withoutLabel, classes.textField)}>
         <Input
           id="adornment-weight"
           value={values.weight}
@@ -109,7 +109,7 @@ function InputAdornments() {
         />
         <FormHelperText id="weight-helper-text">Weight</FormHelperText>
       </FormControl>
-      <FormControl className={classNames(classes.margin, classes.textField)}>
+      <FormControl className={clsx(classes.margin, classes.textField)}>
         <InputLabel htmlFor="adornment-password">Password</InputLabel>
         <Input
           id="adornment-password"
diff --git a/docs/src/pages/demos/text-fields/InputAdornments.js b/docs/src/pages/demos/text-fields/InputAdornments.js
index cdd1f88103d158..a162d8bc098758 100644
--- a/docs/src/pages/demos/text-fields/InputAdornments.js
+++ b/docs/src/pages/demos/text-fields/InputAdornments.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
@@ -69,7 +69,7 @@ class InputAdornments extends React.Component {
         <TextField
           label="With normal TextField"
           id="simple-start-adornment"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           InputProps={{
             startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
           }}
@@ -78,7 +78,7 @@ class InputAdornments extends React.Component {
         <TextField
           select
           label="With Select"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           value={this.state.weightRange}
           onChange={this.handleChange('weightRange')}
           InputProps={{
@@ -100,9 +100,7 @@ class InputAdornments extends React.Component {
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
           />
         </FormControl>
-        <FormControl
-          className={classNames(classes.margin, classes.withoutLabel, classes.textField)}
-        >
+        <FormControl className={clsx(classes.margin, classes.withoutLabel, classes.textField)}>
           <Input
             id="adornment-weight"
             value={this.state.weight}
@@ -116,7 +114,7 @@ class InputAdornments extends React.Component {
 
           <FormHelperText id="weight-helper-text">Weight</FormHelperText>
         </FormControl>
-        <FormControl className={classNames(classes.margin, classes.textField)}>
+        <FormControl className={clsx(classes.margin, classes.textField)}>
           <InputLabel htmlFor="adornment-password">Password</InputLabel>
           <Input
             id="adornment-password"
diff --git a/docs/src/pages/demos/text-fields/InputAdornments.tsx b/docs/src/pages/demos/text-fields/InputAdornments.tsx
index 4d409e25abb3fe..630ae4b1a571c6 100644
--- a/docs/src/pages/demos/text-fields/InputAdornments.tsx
+++ b/docs/src/pages/demos/text-fields/InputAdornments.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
@@ -82,7 +82,7 @@ class InputAdornments extends React.Component<Props, State> {
         <TextField
           label="With normal TextField"
           id="simple-start-adornment"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           InputProps={{
             startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
           }}
@@ -90,7 +90,7 @@ class InputAdornments extends React.Component<Props, State> {
         <TextField
           select
           label="With Select"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           value={this.state.weightRange}
           onChange={this.handleChange('weightRange')}
           InputProps={{
@@ -112,9 +112,7 @@ class InputAdornments extends React.Component<Props, State> {
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
           />
         </FormControl>
-        <FormControl
-          className={classNames(classes.margin, classes.withoutLabel, classes.textField)}
-        >
+        <FormControl className={clsx(classes.margin, classes.withoutLabel, classes.textField)}>
           <Input
             id="adornment-weight"
             value={this.state.weight}
@@ -127,7 +125,7 @@ class InputAdornments extends React.Component<Props, State> {
           />
           <FormHelperText id="weight-helper-text">Weight</FormHelperText>
         </FormControl>
-        <FormControl className={classNames(classes.margin, classes.textField)}>
+        <FormControl className={clsx(classes.margin, classes.textField)}>
           <InputLabel htmlFor="adornment-password">Password</InputLabel>
           <Input
             id="adornment-password"
diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js
index 1931f360b70b14..5c2c83742179d1 100644
--- a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js
+++ b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/styles';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
@@ -58,7 +58,7 @@ function OutlinedInputAdornments() {
     <div className={classes.root}>
       <TextField
         id="outlined-simple-start-adornment"
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         variant="outlined"
         label="With outlined TextField"
         InputProps={{
@@ -67,7 +67,7 @@ function OutlinedInputAdornments() {
       />
       <TextField
         select
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         variant="outlined"
         label="With Select"
         value={values.weightRange}
@@ -84,7 +84,7 @@ function OutlinedInputAdornments() {
       </TextField>
       <TextField
         id="outlined-adornment-amount"
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         variant="outlined"
         label="Amount"
         value={values.amount}
@@ -95,7 +95,7 @@ function OutlinedInputAdornments() {
       />
       <TextField
         id="outlined-adornment-weight"
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         variant="outlined"
         label="Weight"
         value={values.weight}
@@ -107,7 +107,7 @@ function OutlinedInputAdornments() {
       />
       <TextField
         id="outlined-adornment-password"
-        className={classNames(classes.margin, classes.textField)}
+        className={clsx(classes.margin, classes.textField)}
         variant="outlined"
         type={values.showPassword ? 'text' : 'password'}
         label="Password"
diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js
index 9918a5776137df..7e63c0661333c4 100644
--- a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js
+++ b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
@@ -61,7 +61,7 @@ class OutlinedInputAdornments extends React.Component {
       <div className={classes.root}>
         <TextField
           id="outlined-simple-start-adornment"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="outlined"
           label="With outlined TextField"
           InputProps={{
@@ -71,7 +71,7 @@ class OutlinedInputAdornments extends React.Component {
 
         <TextField
           select
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="outlined"
           label="With Select"
           value={this.state.weightRange}
@@ -88,7 +88,7 @@ class OutlinedInputAdornments extends React.Component {
         </TextField>
         <TextField
           id="outlined-adornment-amount"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="outlined"
           label="Amount"
           value={this.state.amount}
@@ -100,7 +100,7 @@ class OutlinedInputAdornments extends React.Component {
 
         <TextField
           id="outlined-adornment-weight"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="outlined"
           label="Weight"
           value={this.state.weight}
@@ -113,7 +113,7 @@ class OutlinedInputAdornments extends React.Component {
 
         <TextField
           id="outlined-adornment-password"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="outlined"
           type={this.state.showPassword ? 'text' : 'password'}
           label="Password"
diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx
index 3f06bbf0520b4a..8dee7d43c8ecf7 100644
--- a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx
+++ b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
@@ -74,7 +74,7 @@ class OutlinedInputAdornments extends React.Component<Props, State> {
       <div className={classes.root}>
         <TextField
           id="outlined-simple-start-adornment"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="outlined"
           label="With outlined TextField"
           InputProps={{
@@ -83,7 +83,7 @@ class OutlinedInputAdornments extends React.Component<Props, State> {
         />
         <TextField
           select
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="outlined"
           label="With Select"
           value={this.state.weightRange}
@@ -100,7 +100,7 @@ class OutlinedInputAdornments extends React.Component<Props, State> {
         </TextField>
         <TextField
           id="outlined-adornment-amount"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="outlined"
           label="Amount"
           value={this.state.amount}
@@ -111,7 +111,7 @@ class OutlinedInputAdornments extends React.Component<Props, State> {
         />
         <TextField
           id="outlined-adornment-weight"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="outlined"
           label="Weight"
           value={this.state.weight}
@@ -123,7 +123,7 @@ class OutlinedInputAdornments extends React.Component<Props, State> {
         />
         <TextField
           id="outlined-adornment-password"
-          className={classNames(classes.margin, classes.textField)}
+          className={clsx(classes.margin, classes.textField)}
           variant="outlined"
           type={this.state.showPassword ? 'text' : 'password'}
           label="Password"
diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js b/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js
index 482948c06254f8..dedafd06c6aeaa 100644
--- a/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js
+++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
@@ -132,7 +132,7 @@ function OutlinedTextFields() {
       <TextField
         id="outlined-dense"
         label="Dense"
-        className={classNames(classes.textField, classes.dense)}
+        className={clsx(classes.textField, classes.dense)}
         margin="dense"
         variant="outlined"
       />
diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.js b/docs/src/pages/demos/text-fields/OutlinedTextFields.js
index 6b73fbe6816767..a736cc9b147104 100644
--- a/docs/src/pages/demos/text-fields/OutlinedTextFields.js
+++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
@@ -145,7 +145,7 @@ class OutlinedTextFields extends React.Component {
         <TextField
           id="outlined-dense"
           label="Dense"
-          className={classNames(classes.textField, classes.dense)}
+          className={clsx(classes.textField, classes.dense)}
           margin="dense"
           variant="outlined"
         />
diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx b/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx
index 4f630bdfce4b3e..bc08f421d93acf 100644
--- a/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx
+++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
@@ -147,7 +147,7 @@ class OutlinedTextFields extends React.Component<Props, State> {
         <TextField
           id="outlined-dense"
           label="Dense"
-          className={classNames(classes.textField, classes.dense)}
+          className={clsx(classes.textField, classes.dense)}
           margin="dense"
           variant="outlined"
         />
diff --git a/docs/src/pages/demos/text-fields/TextFields.hooks.js b/docs/src/pages/demos/text-fields/TextFields.hooks.js
index 0de739bccf54c1..d1b3d5b5d0b537 100644
--- a/docs/src/pages/demos/text-fields/TextFields.hooks.js
+++ b/docs/src/pages/demos/text-fields/TextFields.hooks.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { makeStyles } from '@material-ui/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
@@ -116,7 +116,7 @@ function TextFields() {
       <TextField
         id="standard-dense"
         label="Dense"
-        className={classNames(classes.textField, classes.dense)}
+        className={clsx(classes.textField, classes.dense)}
         margin="dense"
       />
       <TextField
diff --git a/docs/src/pages/demos/text-fields/TextFields.js b/docs/src/pages/demos/text-fields/TextFields.js
index e0d1b2f66a294e..1562740657f38e 100644
--- a/docs/src/pages/demos/text-fields/TextFields.js
+++ b/docs/src/pages/demos/text-fields/TextFields.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
@@ -126,7 +126,7 @@ class TextFields extends React.Component {
         <TextField
           id="standard-dense"
           label="Dense"
-          className={classNames(classes.textField, classes.dense)}
+          className={clsx(classes.textField, classes.dense)}
           margin="dense"
         />
 
diff --git a/docs/src/pages/demos/text-fields/TextFields.tsx b/docs/src/pages/demos/text-fields/TextFields.tsx
index 91d58312ec3a91..8d105c5584584d 100644
--- a/docs/src/pages/demos/text-fields/TextFields.tsx
+++ b/docs/src/pages/demos/text-fields/TextFields.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
@@ -129,7 +129,7 @@ class TextFields extends React.Component<Props, State> {
         <TextField
           id="standard-dense"
           label="Dense"
-          className={classNames(classes.textField, classes.dense)}
+          className={clsx(classes.textField, classes.dense)}
           margin="dense"
         />
         <TextField
diff --git a/docs/src/pages/getting-started/faq/faq-de.md b/docs/src/pages/getting-started/faq/faq-de.md
index 6f0d73d599c40b..3a3900f5012cff 100644
--- a/docs/src/pages/getting-started/faq/faq-de.md
+++ b/docs/src/pages/getting-started/faq/faq-de.md
@@ -6,7 +6,7 @@ If you still can't find what you're looking for, you can ask the community in [g
 
 ## Why aren't my components rendering correctly in production builds?
 
-This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
+This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `clsx` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
 
 To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.
 
@@ -38,7 +38,7 @@ const theme = createMuiTheme({
     // Name of the component ⚛️
     MuiButtonBase: {
       // The properties to apply
-      disableRipple: true, // No more ripple, on the whole application 
+      disableRipple: true, // No more ripple, on the whole application
     },
   },
 });
@@ -131,4 +131,4 @@ There are many ways to support Material-UI:
 
 If you use Material-UI in a commercial project and would like to support its continued development by becoming a **Sponsor**, or in a side or hobby project and would like to become a backer, you can do so through [OpenCollective](https://opencollective.com/material-ui).
 
-All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
\ No newline at end of file
+All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
diff --git a/docs/src/pages/getting-started/faq/faq-es.md b/docs/src/pages/getting-started/faq/faq-es.md
index 6f0d73d599c40b..3a3900f5012cff 100644
--- a/docs/src/pages/getting-started/faq/faq-es.md
+++ b/docs/src/pages/getting-started/faq/faq-es.md
@@ -6,7 +6,7 @@ If you still can't find what you're looking for, you can ask the community in [g
 
 ## Why aren't my components rendering correctly in production builds?
 
-This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
+This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `clsx` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
 
 To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.
 
@@ -38,7 +38,7 @@ const theme = createMuiTheme({
     // Name of the component ⚛️
     MuiButtonBase: {
       // The properties to apply
-      disableRipple: true, // No more ripple, on the whole application 
+      disableRipple: true, // No more ripple, on the whole application
     },
   },
 });
@@ -131,4 +131,4 @@ There are many ways to support Material-UI:
 
 If you use Material-UI in a commercial project and would like to support its continued development by becoming a **Sponsor**, or in a side or hobby project and would like to become a backer, you can do so through [OpenCollective](https://opencollective.com/material-ui).
 
-All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
\ No newline at end of file
+All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
diff --git a/docs/src/pages/getting-started/faq/faq-fr.md b/docs/src/pages/getting-started/faq/faq-fr.md
index 6f0d73d599c40b..3a3900f5012cff 100644
--- a/docs/src/pages/getting-started/faq/faq-fr.md
+++ b/docs/src/pages/getting-started/faq/faq-fr.md
@@ -6,7 +6,7 @@ If you still can't find what you're looking for, you can ask the community in [g
 
 ## Why aren't my components rendering correctly in production builds?
 
-This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
+This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `clsx` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
 
 To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.
 
@@ -38,7 +38,7 @@ const theme = createMuiTheme({
     // Name of the component ⚛️
     MuiButtonBase: {
       // The properties to apply
-      disableRipple: true, // No more ripple, on the whole application 
+      disableRipple: true, // No more ripple, on the whole application
     },
   },
 });
@@ -131,4 +131,4 @@ There are many ways to support Material-UI:
 
 If you use Material-UI in a commercial project and would like to support its continued development by becoming a **Sponsor**, or in a side or hobby project and would like to become a backer, you can do so through [OpenCollective](https://opencollective.com/material-ui).
 
-All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
\ No newline at end of file
+All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
diff --git a/docs/src/pages/getting-started/faq/faq-ja.md b/docs/src/pages/getting-started/faq/faq-ja.md
index 6f0d73d599c40b..3a3900f5012cff 100644
--- a/docs/src/pages/getting-started/faq/faq-ja.md
+++ b/docs/src/pages/getting-started/faq/faq-ja.md
@@ -6,7 +6,7 @@ If you still can't find what you're looking for, you can ask the community in [g
 
 ## Why aren't my components rendering correctly in production builds?
 
-This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
+This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `clsx` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
 
 To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.
 
@@ -38,7 +38,7 @@ const theme = createMuiTheme({
     // Name of the component ⚛️
     MuiButtonBase: {
       // The properties to apply
-      disableRipple: true, // No more ripple, on the whole application 
+      disableRipple: true, // No more ripple, on the whole application
     },
   },
 });
@@ -131,4 +131,4 @@ There are many ways to support Material-UI:
 
 If you use Material-UI in a commercial project and would like to support its continued development by becoming a **Sponsor**, or in a side or hobby project and would like to become a backer, you can do so through [OpenCollective](https://opencollective.com/material-ui).
 
-All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
\ No newline at end of file
+All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
diff --git a/docs/src/pages/getting-started/faq/faq-pt.md b/docs/src/pages/getting-started/faq/faq-pt.md
index a0caee44746cdb..aa986f37f761fb 100644
--- a/docs/src/pages/getting-started/faq/faq-pt.md
+++ b/docs/src/pages/getting-started/faq/faq-pt.md
@@ -6,7 +6,7 @@ If you still can't find what you're looking for, you can ask the community in [g
 
 ## Why aren't my components rendering correctly in production builds?
 
-This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
+This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `clsx` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
 
 To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.
 
@@ -131,4 +131,4 @@ There are many ways to support Material-UI:
 
 If you use Material-UI in a commercial project and would like to support its continued development by becoming a **Sponsor**, or in a side or hobby project and would like to become a backer, you can do so through [OpenCollective](https://opencollective.com/material-ui).
 
-All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
\ No newline at end of file
+All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
diff --git a/docs/src/pages/getting-started/faq/faq-ru.md b/docs/src/pages/getting-started/faq/faq-ru.md
index 6f0d73d599c40b..3a3900f5012cff 100644
--- a/docs/src/pages/getting-started/faq/faq-ru.md
+++ b/docs/src/pages/getting-started/faq/faq-ru.md
@@ -6,7 +6,7 @@ If you still can't find what you're looking for, you can ask the community in [g
 
 ## Why aren't my components rendering correctly in production builds?
 
-This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
+This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `clsx` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
 
 To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.
 
@@ -38,7 +38,7 @@ const theme = createMuiTheme({
     // Name of the component ⚛️
     MuiButtonBase: {
       // The properties to apply
-      disableRipple: true, // No more ripple, on the whole application 
+      disableRipple: true, // No more ripple, on the whole application
     },
   },
 });
@@ -131,4 +131,4 @@ There are many ways to support Material-UI:
 
 If you use Material-UI in a commercial project and would like to support its continued development by becoming a **Sponsor**, or in a side or hobby project and would like to become a backer, you can do so through [OpenCollective](https://opencollective.com/material-ui).
 
-All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
\ No newline at end of file
+All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
diff --git a/docs/src/pages/getting-started/faq/faq-zh.md b/docs/src/pages/getting-started/faq/faq-zh.md
index cd8458fbab5530..a7c5d2f4fce3ef 100644
--- a/docs/src/pages/getting-started/faq/faq-zh.md
+++ b/docs/src/pages/getting-started/faq/faq-zh.md
@@ -6,7 +6,7 @@
 
 ## 为什么我的组件在生产版本中没有正确呈现？
 
-一旦您的代码在生产包中，这可能是由于类名冲突而发生的n°1问题。 要使Material-UI起作用，页面上所有组件的 `classNames` 值必须由 [类名生成器](/customization/css-in-js/#creategenerateclassname-options-class-name-generator)的单个实例生成。
+一旦您的代码在生产包中，这可能是由于类名冲突而发生的n°1问题。 要使Material-UI起作用，页面上所有组件的 `clsx` 值必须由 [类名生成器](/customization/css-in-js/#creategenerateclassname-options-class-name-generator)的单个实例生成。
 
 要纠正此问题，需要初始化页面上的所有组件，以便它们之间只有 **个类名生成器**。
 
@@ -127,8 +127,8 @@ export default withTheme()(withStyles(styles)(Modal));
 - 提高 [的文档](https://github.com/mui-org/material-ui/tree/master/docs)。
 - 帮助他人入门。
 - [传播单词](https://twitter.com/MaterialUI)。
-- 回答 [StackOverflow在存储库中对标记为问题](https://stackoverflow.com/questions/tagged/material-ui) </a> 或 问题提出疑问。</li> </ul> 
-    
+- 回答 [StackOverflow在存储库中对标记为问题](https://stackoverflow.com/questions/tagged/material-ui) </a> 或 问题提出疑问。</li> </ul>
+
     如果您在商业项目中使用材料的用户界面，并希望通过成为支持其持续发展 **赞助商**， 或侧或业余爱好项目，并想成为一个靠山，你可以通过做 [OpenCollective](https://opencollective.com/material-ui)。
-    
-    筹集的所有资金都是透明管理的，赞助商在README和Material-UI主页上获得认可。
\ No newline at end of file
+
+    筹集的所有资金都是透明管理的，赞助商在README和Material-UI主页上获得认可。
diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md
index 27e65bba81a925..1bc8f9713e22e2 100644
--- a/docs/src/pages/getting-started/faq/faq.md
+++ b/docs/src/pages/getting-started/faq/faq.md
@@ -8,7 +8,7 @@ For how-to questions and other non-issues, please use [StackOverflow](https://st
 ## Why aren't my components rendering correctly in production builds?
 
 This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle.
-For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
+For Material-UI to work, the `clsx` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator).
 
 To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/album/Album.js b/docs/src/pages/getting-started/page-layout-examples/album/Album.js
index 2fcecd90975b9b..2a634ddf808156 100644
--- a/docs/src/pages/getting-started/page-layout-examples/album/Album.js
+++ b/docs/src/pages/getting-started/page-layout-examples/album/Album.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import AppBar from '@material-ui/core/AppBar';
 import Button from '@material-ui/core/Button';
 import CameraIcon from '@material-ui/icons/PhotoCamera';
@@ -106,7 +106,7 @@ function Album(props) {
             </div>
           </div>
         </div>
-        <div className={classNames(classes.layout, classes.cardGrid)}>
+        <div className={clsx(classes.layout, classes.cardGrid)}>
           {/* End hero unit */}
           <Grid container spacing={40}>
             {cards.map(card => (
diff --git a/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js b/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js
index 76dddb182259a9..f10142df4dde78 100644
--- a/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js
+++ b/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Drawer from '@material-ui/core/Drawer';
@@ -118,17 +118,14 @@ class Dashboard extends React.Component {
         <CssBaseline />
         <AppBar
           position="absolute"
-          className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
+          className={clsx(classes.appBar, this.state.open && classes.appBarShift)}
         >
           <Toolbar disableGutters={!this.state.open} className={classes.toolbar}>
             <IconButton
               color="inherit"
               aria-label="Open drawer"
               onClick={this.handleDrawerOpen}
-              className={classNames(
-                classes.menuButton,
-                this.state.open && classes.menuButtonHidden,
-              )}
+              className={clsx(classes.menuButton, this.state.open && classes.menuButtonHidden)}
             >
               <MenuIcon />
             </IconButton>
@@ -151,7 +148,7 @@ class Dashboard extends React.Component {
         <Drawer
           variant="permanent"
           classes={{
-            paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
+            paper: clsx(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
           }}
           open={this.state.open}
         >
diff --git a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
index 50c9fd9bc64b4f..c4c2a409676b3d 100644
--- a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
+++ b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
 import Button from '@material-ui/core/Button';
@@ -185,7 +185,7 @@ function Pricing(props) {
         </Grid>
       </main>
       {/* Footer */}
-      <footer className={classNames(classes.footer, classes.layout)}>
+      <footer className={clsx(classes.footer, classes.layout)}>
         <Grid container spacing={32} justify="space-evenly">
           {footers.map(footer => (
             <Grid item xs key={footer.title}>
diff --git a/docs/src/pages/guides/interoperability/interoperability-de.md b/docs/src/pages/guides/interoperability/interoperability-de.md
index 73626fd4438266..680d661b11d6cc 100644
--- a/docs/src/pages/guides/interoperability/interoperability-de.md
+++ b/docs/src/pages/guides/interoperability/interoperability-de.md
@@ -505,7 +505,7 @@ const buttonStyles = {
   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
 };
 
-// First we get the classNames with Glamor css function
+// First we get the clsx with Glamor css function
 const buttonClasses = css(buttonStyles);
 
 // We need the class names to be strings
@@ -530,4 +530,4 @@ export default GlamorButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov5l1j2j8z)
 
-**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
\ No newline at end of file
+**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
diff --git a/docs/src/pages/guides/interoperability/interoperability-es.md b/docs/src/pages/guides/interoperability/interoperability-es.md
index 73626fd4438266..680d661b11d6cc 100644
--- a/docs/src/pages/guides/interoperability/interoperability-es.md
+++ b/docs/src/pages/guides/interoperability/interoperability-es.md
@@ -505,7 +505,7 @@ const buttonStyles = {
   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
 };
 
-// First we get the classNames with Glamor css function
+// First we get the clsx with Glamor css function
 const buttonClasses = css(buttonStyles);
 
 // We need the class names to be strings
@@ -530,4 +530,4 @@ export default GlamorButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov5l1j2j8z)
 
-**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
\ No newline at end of file
+**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
diff --git a/docs/src/pages/guides/interoperability/interoperability-fr.md b/docs/src/pages/guides/interoperability/interoperability-fr.md
index 73626fd4438266..680d661b11d6cc 100644
--- a/docs/src/pages/guides/interoperability/interoperability-fr.md
+++ b/docs/src/pages/guides/interoperability/interoperability-fr.md
@@ -505,7 +505,7 @@ const buttonStyles = {
   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
 };
 
-// First we get the classNames with Glamor css function
+// First we get the clsx with Glamor css function
 const buttonClasses = css(buttonStyles);
 
 // We need the class names to be strings
@@ -530,4 +530,4 @@ export default GlamorButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov5l1j2j8z)
 
-**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
\ No newline at end of file
+**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
diff --git a/docs/src/pages/guides/interoperability/interoperability-ja.md b/docs/src/pages/guides/interoperability/interoperability-ja.md
index 73626fd4438266..680d661b11d6cc 100644
--- a/docs/src/pages/guides/interoperability/interoperability-ja.md
+++ b/docs/src/pages/guides/interoperability/interoperability-ja.md
@@ -505,7 +505,7 @@ const buttonStyles = {
   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
 };
 
-// First we get the classNames with Glamor css function
+// First we get the clsx with Glamor css function
 const buttonClasses = css(buttonStyles);
 
 // We need the class names to be strings
@@ -530,4 +530,4 @@ export default GlamorButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov5l1j2j8z)
 
-**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
\ No newline at end of file
+**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
diff --git a/docs/src/pages/guides/interoperability/interoperability-pt.md b/docs/src/pages/guides/interoperability/interoperability-pt.md
index 73626fd4438266..680d661b11d6cc 100644
--- a/docs/src/pages/guides/interoperability/interoperability-pt.md
+++ b/docs/src/pages/guides/interoperability/interoperability-pt.md
@@ -505,7 +505,7 @@ const buttonStyles = {
   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
 };
 
-// First we get the classNames with Glamor css function
+// First we get the clsx with Glamor css function
 const buttonClasses = css(buttonStyles);
 
 // We need the class names to be strings
@@ -530,4 +530,4 @@ export default GlamorButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov5l1j2j8z)
 
-**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
\ No newline at end of file
+**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
diff --git a/docs/src/pages/guides/interoperability/interoperability-ru.md b/docs/src/pages/guides/interoperability/interoperability-ru.md
index 73626fd4438266..680d661b11d6cc 100644
--- a/docs/src/pages/guides/interoperability/interoperability-ru.md
+++ b/docs/src/pages/guides/interoperability/interoperability-ru.md
@@ -505,7 +505,7 @@ const buttonStyles = {
   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
 };
 
-// First we get the classNames with Glamor css function
+// First we get the clsx with Glamor css function
 const buttonClasses = css(buttonStyles);
 
 // We need the class names to be strings
@@ -530,4 +530,4 @@ export default GlamorButton;
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov5l1j2j8z)
 
-**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
\ No newline at end of file
+**Note:** Both Glamor and JSS inject their styles at the bottom of the `<head>`. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/customization/css-in-js/#css-injection-order), as in the demo.
diff --git a/docs/src/pages/guides/interoperability/interoperability-zh.md b/docs/src/pages/guides/interoperability/interoperability-zh.md
index 57de80a25ff424..5354480cb59bba 100644
--- a/docs/src/pages/guides/interoperability/interoperability-zh.md
+++ b/docs/src/pages/guides/interoperability/interoperability-zh.md
@@ -104,7 +104,7 @@ export default StyledComponents;
 
 ### 控制优先权
 
-样式组件和JSS都将样式注入 `<head>`的底部。 确保样式组件样式最后加载的一种方法是将CSS注入顺序</a>更改为 ，如演示中所示。</p> 
+样式组件和JSS都将样式注入 `<head>`的底部。 确保样式组件样式最后加载的一种方法是将CSS注入顺序</a>更改为 ，如演示中所示。</p>
 
 另一种方法是使用 `&&` 在风格的组件字符 [颠簸起来特异性](https://www.styled-components.com/docs/advanced#issues-with-specificity) 通过重复类名。 使用此选项可确保在JSS样式之前应用样式化组件样式。 此解决方案的一个示例：
 
@@ -505,7 +505,7 @@ const buttonStyles = {
   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
 };
 
-// 首先，我们使用Glamor css函数获取classNames
+// 首先，我们使用Glamor css函数获取clsx
 const buttonClasses = css(buttonStyles);
 
 // 我们需要类名是字符串
@@ -530,4 +530,4 @@ export default GlamorButton;
 
 [![编辑按钮](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ov5l1j2j8z)
 
-**注意：** Glamour和JSS都在 `<head>`的底部注入了他们的风格。 如果您不想使用 **!important**标记样式属性，则需要更改 [CSS注入顺序](/customization/css-in-js/#css-injection-order)，如演示中所示。
\ No newline at end of file
+**注意：** Glamour和JSS都在 `<head>`的底部注入了他们的风格。 如果您不想使用 **!important**标记样式属性，则需要更改 [CSS注入顺序](/customization/css-in-js/#css-injection-order)，如演示中所示。
diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md
index e5590ccce2429a..9802571a05c3c1 100644
--- a/docs/src/pages/guides/interoperability/interoperability.md
+++ b/docs/src/pages/guides/interoperability/interoperability.md
@@ -516,7 +516,7 @@ const buttonStyles = {
   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
 };
 
-// First we get the classNames with Glamor css function
+// First we get the clsx with Glamor css function
 const buttonClasses = css(buttonStyles);
 
 // We need the class names to be strings
diff --git a/docs/src/pages/lab/speed-dial/SpeedDials.js b/docs/src/pages/lab/speed-dial/SpeedDials.js
index 2d6c191a684895..81ea1864a59369 100644
--- a/docs/src/pages/lab/speed-dial/SpeedDials.js
+++ b/docs/src/pages/lab/speed-dial/SpeedDials.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
@@ -95,7 +95,7 @@ class SpeedDials extends React.Component {
     const { classes } = this.props;
     const { direction, hidden, open } = this.state;
 
-    const speedDialClassName = classNames(
+    const speedDialClassName = clsx(
       classes.speedDial,
       classes[`direction${capitalize(direction)}`],
     );
diff --git a/docs/src/pages/premium-themes/instapaper/theme/core/classes.js b/docs/src/pages/premium-themes/instapaper/theme/core/classes.js
index 3744b569f3995c..baa1889b7a24bd 100644
--- a/docs/src/pages/premium-themes/instapaper/theme/core/classes.js
+++ b/docs/src/pages/premium-themes/instapaper/theme/core/classes.js
@@ -1,5 +1,5 @@
-export const attach = (...classNames) => `&.${classNames.join('.')}`;
-export const nest = (...classNames) => `& .${classNames.join('.')}`;
+export const attach = (...clsx) => `&.${clsx.join('.')}`;
+export const nest = (...clsx) => `& .${clsx.join('.')}`;
 
 export const APP_BAR = {
   root: 'app-bar__root',
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js b/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
index ee7ad7d39769e7..35983dcb1eb1af 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import { capitalize } from '@material-ui/core/utils/helpers';
 
@@ -92,7 +92,7 @@ function LayoutBody(props) {
 
   return (
     <Component
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes[`width${capitalize(width)}`]]: !fullWidth,
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Paper.js b/docs/src/pages/premium-themes/onepirate/modules/components/Paper.js
index cf28b927c74da5..0582b218a40798 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/Paper.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/Paper.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import MuiPaper from '@material-ui/core/Paper';
 import { capitalize } from '@material-ui/core/utils/helpers';
@@ -26,7 +26,7 @@ function Paper(props) {
     <MuiPaper
       elevation={0}
       square
-      className={classNames(
+      className={clsx(
         classes[`background${capitalize(background)}`],
         {
           [classes.padding]: padding,
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
index 0e57c3d76f1669..2b5c5487169498 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import MuiTextField from '@material-ui/core/TextField';
@@ -79,7 +79,7 @@ function TextField(props) {
         disableUnderline: true,
         classes: {
           root: classes.root,
-          input: classNames(
+          input: clsx(
             classes.input,
             classes[`inputSize${capitalize(size)}`],
             {
diff --git a/docs/src/pages/premium-themes/onepirate/modules/form/FormFeedback.js b/docs/src/pages/premium-themes/onepirate/modules/form/FormFeedback.js
index 0df679db7c6e58..53b0e8e159b17c 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/form/FormFeedback.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/form/FormFeedback.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '../components/Typography';
 
@@ -21,7 +21,7 @@ const styles = theme => ({
 function FormFeedback(props) {
   return (
     <div
-      className={classNames(
+      className={clsx(
         props.classes.root,
         { [props.classes.error]: props.error, [props.classes.success]: props.success },
         props.className,
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js
index def0bcd579a53f..6fdd537e8a2330 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
 import AppBar from '../components/AppBar';
@@ -65,7 +65,7 @@ function AppAppBar(props) {
             <Link
               variant="h6"
               underline="none"
-              className={classNames(classes.rightLink, classes.linkSecondary)}
+              className={clsx(classes.rightLink, classes.linkSecondary)}
               href="/premium-themes/onepirate/sign-up"
             >
               {'Sign Up'}
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHeroLayout.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHeroLayout.js
index a1eff875423788..8af2754d0f3181 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHeroLayout.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHeroLayout.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import LayoutBody from '../components/LayoutBody';
 
@@ -63,7 +63,7 @@ function ProductHeroLayout(props) {
         />
         {children}
         <div className={classes.backdrop} />
-        <div className={classNames(classes.background, backgroundClassName)} />
+        <div className={clsx(classes.background, backgroundClassName)} />
         <img
           className={classes.arrowDown}
           src="/static/themes/onepirate/productHeroArrowDown.png"
diff --git a/docs/src/pages/premium-themes/paperbase/Navigator.js b/docs/src/pages/premium-themes/paperbase/Navigator.js
index 9dec5c05a811d9..cdb5e8e4154d43 100644
--- a/docs/src/pages/premium-themes/paperbase/Navigator.js
+++ b/docs/src/pages/premium-themes/paperbase/Navigator.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Divider from '@material-ui/core/Divider';
 import Drawer from '@material-ui/core/Drawer';
@@ -92,10 +92,10 @@ function Navigator(props) {
   return (
     <Drawer variant="permanent" {...other}>
       <List disablePadding>
-        <ListItem className={classNames(classes.firebase, classes.item, classes.itemCategory)}>
+        <ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory)}>
           Paperbase
         </ListItem>
-        <ListItem className={classNames(classes.item, classes.itemCategory)}>
+        <ListItem className={clsx(classes.item, classes.itemCategory)}>
           <ListItemIcon>
             <HomeIcon />
           </ListItemIcon>
@@ -123,7 +123,7 @@ function Navigator(props) {
                 button
                 dense
                 key={childId}
-                className={classNames(
+                className={clsx(
                   classes.item,
                   classes.itemActionable,
                   active && classes.itemActiveItem,
diff --git a/docs/src/pages/premium-themes/tweeper/theme/core/classes.js b/docs/src/pages/premium-themes/tweeper/theme/core/classes.js
index 2556166ef77f36..138071c1c23bc7 100644
--- a/docs/src/pages/premium-themes/tweeper/theme/core/classes.js
+++ b/docs/src/pages/premium-themes/tweeper/theme/core/classes.js
@@ -1,5 +1,5 @@
-export const attach = (...classNames) => `&.${classNames.join('.')}`;
-export const nest = (...classNames) => `& .${classNames.join('.')}`;
+export const attach = (...clsx) => `&.${clsx.join('.')}`;
+export const nest = (...clsx) => `& .${clsx.join('.')}`;
 
 export const APP_BAR = {
   root: 'app-bar__root',
diff --git a/docs/src/pages/style/icons/FontAwesome.js b/docs/src/pages/style/icons/FontAwesome.js
index b18e1964b00d42..4d124fe78e3f94 100644
--- a/docs/src/pages/style/icons/FontAwesome.js
+++ b/docs/src/pages/style/icons/FontAwesome.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { loadCSS } from 'fg-loadcss/src/loadCSS';
 import { withStyles } from '@material-ui/core/styles';
 import red from '@material-ui/core/colors/red';
@@ -36,17 +36,17 @@ class FontAwesome extends React.Component {
 
     return (
       <div className={classes.root}>
-        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} />
-        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="primary" />
-        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="secondary" />
-        <Icon className={classNames(classes.icon, 'fa fa-plus-circle')} color="action" />
+        <Icon className={clsx(classes.icon, 'fa fa-plus-circle')} />
+        <Icon className={clsx(classes.icon, 'fa fa-plus-circle')} color="primary" />
+        <Icon className={clsx(classes.icon, 'fa fa-plus-circle')} color="secondary" />
+        <Icon className={clsx(classes.icon, 'fa fa-plus-circle')} color="action" />
         <Icon
-          className={classNames(classes.iconHover, 'fa fa-plus-circle')}
+          className={clsx(classes.iconHover, 'fa fa-plus-circle')}
           color="error"
           style={{ fontSize: 30 }}
         />
         <Icon
-          className={classNames(classes.icon, 'fa fa-plus-circle')}
+          className={clsx(classes.icon, 'fa fa-plus-circle')}
           color="disabled"
           fontSize="large"
         />
diff --git a/package.json b/package.json
index 8b2c9fc7fde0b6..46df6f5d638a27 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,6 @@
     "@date-io/date-fns": "^1.0.0",
     "@emotion/core": "^10.0.0",
     "@emotion/styled": "^10.0.0",
-    "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.4",
     "@types/react": "^16.7.10",
     "@types/react-dom": "^16.0.9",
diff --git a/packages/material-ui-docs/package.json b/packages/material-ui-docs/package.json
index 810a706543b74b..e8fe62b5cb9bab 100644
--- a/packages/material-ui-docs/package.json
+++ b/packages/material-ui-docs/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "@babel/runtime": "^7.2.0",
     "@material-ui/utils": "^3.0.0-alpha.2",
+    "clsx": "^1.0.2",
     "marked": "^0.6.0",
     "nprogress": "^0.2.0",
     "prismjs": "^1.8.4"
diff --git a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
index dfd4678b0d6a39..51ac62671ab32d 100644
--- a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
+++ b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import marked from 'marked';
 import { withStyles } from '@material-ui/core/styles';
 import prism from './prism';
@@ -279,7 +279,7 @@ function MarkdownElement(props) {
   /* eslint-disable react/no-danger */
   return (
     <div
-      className={classNames(classes.root, 'markdown-body', className)}
+      className={clsx(classes.root, 'markdown-body', className)}
       dangerouslySetInnerHTML={{ __html: marked(text, markedOptions) }}
       {...other}
     />
diff --git a/packages/material-ui-lab/package.json b/packages/material-ui-lab/package.json
index 34bf836a773532..69246236549da8 100644
--- a/packages/material-ui-lab/package.json
+++ b/packages/material-ui-lab/package.json
@@ -40,7 +40,7 @@
   "dependencies": {
     "@babel/runtime": "^7.2.0",
     "@material-ui/utils": "^3.0.0-alpha.2",
-    "classnames": "^2.2.5",
+    "clsx": "^1.0.2",
     "keycode": "^2.1.9",
     "prop-types": "^15.6.0"
   },
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index cd92bef2d849b4..38dd059643451d 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '@material-ui/core/styles/withStyles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -520,7 +520,7 @@ class Slider extends React.Component {
       [classes.rtl]: theme.direction === 'rtl',
     };
 
-    const className = classNames(
+    const className = clsx(
       classes.root,
       {
         [classes.vertical]: vertical,
@@ -529,12 +529,12 @@ class Slider extends React.Component {
       classNameProp,
     );
 
-    const containerClasses = classNames(classes.container, {
+    const containerClasses = clsx(classes.container, {
       [classes.vertical]: vertical,
     });
 
-    const trackBeforeClasses = classNames(classes.track, classes.trackBefore, commonClasses);
-    const trackAfterClasses = classNames(classes.track, classes.trackAfter, commonClasses);
+    const trackBeforeClasses = clsx(classes.track, classes.trackBefore, commonClasses);
+    const trackAfterClasses = clsx(classes.track, classes.trackAfter, commonClasses);
 
     const thumbTransformFunction = vertical ? 'translateY' : 'translateX';
     const thumbDirectionInverted = vertical || theme.direction === 'rtl';
@@ -548,13 +548,13 @@ class Slider extends React.Component {
     const ThumbIcon = thumbIcon
       ? React.cloneElement(thumbIcon, {
           ...thumbIcon.props,
-          className: classNames(thumbIcon.props.className, classes.thumbIcon),
+          className: clsx(thumbIcon.props.className, classes.thumbIcon),
         })
       : null;
     /** End Thumb Icon Logic Here */
 
-    const thumbWrapperClasses = classNames(classes.thumbWrapper, commonClasses);
-    const thumbClasses = classNames(
+    const thumbWrapperClasses = clsx(classes.thumbWrapper, commonClasses);
+    const thumbClasses = clsx(
       classes.thumb,
       {
         [classes.thumbIconWrapper]: thumbIcon,
diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
index 7878c6a9d4090f..bb2e24ef01b329 100644
--- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
+++ b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import keycode from 'keycode';
 import warning from 'warning';
 import { componentPropType } from '@material-ui/utils';
@@ -239,7 +239,7 @@ class SpeedDial extends React.Component {
     }
 
     return (
-      <div className={classNames(classes.root, actionsPlacementClass, classNameProp)} {...other}>
+      <div className={clsx(classes.root, actionsPlacementClass, classNameProp)} {...other}>
         <TransitionComponent
           in={!hidden}
           timeout={transitionDuration}
@@ -268,7 +268,7 @@ class SpeedDial extends React.Component {
           id={`${id}-actions`}
           role="menu"
           aria-orientation={orientation}
-          className={classNames(
+          className={clsx(
             classes.actions,
             { [classes.actionsClosed]: !open },
             actionsPlacementClass,
diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
index bf8796c4086396..d47bcee911c221 100644
--- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
+++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import { emphasize } from '@material-ui/core/styles/colorManipulator';
 import Fab from '@material-ui/core/Fab';
@@ -110,7 +110,7 @@ class SpeedDialAction extends React.Component {
       >
         <Fab
           size="small"
-          className={classNames(className, classes.button, !open && classes.buttonClosed)}
+          className={clsx(className, classes.button, !open && classes.buttonClosed)}
           style={{ transitionDelay: `${delay}ms` }}
           tabIndex={-1}
           role="menuitem"
diff --git a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js
index 88dddbf97218b9..eef7fdb25af949 100644
--- a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js
+++ b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import AddIcon from '../internal/svg-icons/Add';
 
@@ -42,11 +42,11 @@ export const styles = theme => ({
 function SpeedDialIcon(props) {
   const { classes, icon: iconProp, open, openIcon: openIconProp, ...other } = props;
 
-  const iconClassName = classNames(classes.icon, {
+  const iconClassName = clsx(classes.icon, {
     [classes.iconOpen]: open,
     [classes.iconWithOpenIconOpen]: openIconProp && open,
   });
-  const openIconClassName = classNames(classes.openIcon, { [classes.openIconOpen]: open });
+  const openIconClassName = clsx(classes.openIcon, { [classes.openIconOpen]: open });
 
   function formatIcon(icon, className) {
     if (React.isValidElement(icon)) {
diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
index 7f60dc85d05cc0..1058392f263a6c 100644
--- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
+++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import ButtonBase from '@material-ui/core/ButtonBase';
@@ -87,7 +87,7 @@ class ToggleButton extends React.Component {
       ...other
     } = this.props;
 
-    const className = classNames(
+    const className = clsx(
       classes.root,
       {
         [classes.disabled]: disabled,
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
index beb920fff49521..ba6b1c65afe1fa 100644
--- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '@material-ui/core/styles/withStyles';
 import hasValue from './hasValue';
 import isValueSelected from './isValueSelected';
@@ -80,7 +80,7 @@ class ToggleButtonGroup extends React.Component {
     });
 
     const groupSelected = selectedProp === 'auto' ? hasValue(value) : selectedProp;
-    const className = classNames(
+    const className = clsx(
       classes.root,
       {
         [classes.selected]: groupSelected,
diff --git a/packages/material-ui-styles/package.json b/packages/material-ui-styles/package.json
index f9f70cd183d4e6..d1e844886243ce 100644
--- a/packages/material-ui-styles/package.json
+++ b/packages/material-ui-styles/package.json
@@ -40,7 +40,7 @@
     "@babel/runtime": "^7.2.0",
     "@emotion/hash": "^0.7.1",
     "@material-ui/utils": "^3.0.0-alpha.2",
-    "classnames": "^2.2.5",
+    "clsx": "^1.0.2",
     "deepmerge": "^3.0.0",
     "hoist-non-react-statics": "^3.2.1",
     "jss": "^10.0.0-alpha.7",
diff --git a/packages/material-ui-styles/src/styled.js b/packages/material-ui-styles/src/styled.js
index 2d018b5c8d3d97..08098cab892342 100644
--- a/packages/material-ui-styles/src/styled.js
+++ b/packages/material-ui-styles/src/styled.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { chainPropTypes, getDisplayName } from '@material-ui/utils';
 import hoistNonReactStatics from 'hoist-non-react-statics';
@@ -30,11 +30,11 @@ function styled(Component) {
         component: ComponentProp,
         ...other
       } = props;
-      const className = classNames(classes.root, classNameProp);
+      const className = clsx(classes.root, classNameProp);
 
       if (clone) {
         return React.cloneElement(children, {
-          className: classNames(children.props.className, className),
+          className: clsx(children.props.className, className),
         });
       }
 
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
index 0aa2c1f4d6eacd..5640837328dcdd 100644
--- a/packages/material-ui/package.json
+++ b/packages/material-ui/package.json
@@ -42,7 +42,7 @@
     "@types/jss": "^9.5.6",
     "@types/react-transition-group": "^2.0.8",
     "brcast": "^3.0.1",
-    "classnames": "^2.2.5",
+    "clsx": "^1.0.2",
     "csstype": "^2.5.2",
     "debounce": "^1.1.0",
     "deepmerge": "^3.0.0",
diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js
index 9f728bb0549b24..0f416108114178 100644
--- a/packages/material-ui/src/AppBar/AppBar.js
+++ b/packages/material-ui/src/AppBar/AppBar.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 import Paper from '../Paper';
@@ -71,7 +71,7 @@ export const styles = theme => {
 function AppBar(props) {
   const { children, classes, className: classNameProp, color, position, ...other } = props;
 
-  const className = classNames(
+  const className = clsx(
     classes.root,
     classes[`position${capitalize(position)}`],
     {
diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js
index 9132286c0c0f0e..7fe5d5fb5ee456 100644
--- a/packages/material-ui/src/Avatar/Avatar.js
+++ b/packages/material-ui/src/Avatar/Avatar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 
@@ -67,7 +67,7 @@ function Avatar(props) {
     );
   } else if (childrenClassNameProp && React.isValidElement(childrenProp)) {
     children = React.cloneElement(childrenProp, {
-      className: classNames(childrenClassNameProp, childrenProp.props.className),
+      className: clsx(childrenClassNameProp, childrenProp.props.className),
     });
   } else {
     children = childrenProp;
@@ -75,7 +75,7 @@ function Avatar(props) {
 
   return (
     <Component
-      className={classNames(
+      className={clsx(
         classes.root,
         classes.system,
         {
diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js
index a68849214bf099..70074b491f6a22 100644
--- a/packages/material-ui/src/Backdrop/Backdrop.js
+++ b/packages/material-ui/src/Backdrop/Backdrop.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import Fade from '../Fade';
 
@@ -32,7 +32,7 @@ const Backdrop = React.forwardRef(function Backdrop(props, ref) {
     <Fade in={open} timeout={transitionDuration} {...other}>
       <div
         data-mui-test="Backdrop"
-        className={classNames(
+        className={clsx(
           classes.root,
           {
             [classes.invisible]: invisible,
diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
index 6fb036c91654c7..0107ba047a88a7 100644
--- a/packages/material-ui/src/Badge/Badge.js
+++ b/packages/material-ui/src/Badge/Badge.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
@@ -97,7 +97,7 @@ function Badge(props) {
     invisible = true;
   }
 
-  const badgeClassName = classNames(classes.badge, {
+  const badgeClassName = clsx(classes.badge, {
     [classes[`color${capitalize(color)}`]]: color !== 'default',
     [classes.invisible]: invisible,
     [classes.dot]: variant === 'dot',
@@ -109,7 +109,7 @@ function Badge(props) {
   }
 
   return (
-    <ComponentProp className={classNames(classes.root, className)} {...other}>
+    <ComponentProp className={clsx(classes.root, className)} {...other}>
       {children}
       <span className={badgeClassName}>{displayValue}</span>
     </ComponentProp>
diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.js b/packages/material-ui/src/BottomNavigation/BottomNavigation.js
index a72e15c75f27a6..564e21eea3a1e9 100755
--- a/packages/material-ui/src/BottomNavigation/BottomNavigation.js
+++ b/packages/material-ui/src/BottomNavigation/BottomNavigation.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import warning from 'warning';
 import withStyles from '../styles/withStyles';
@@ -27,7 +27,7 @@ function BottomNavigation(props) {
     ...other
   } = props;
 
-  const className = classNames(classes.root, classNameProp);
+  const className = clsx(classes.root, classNameProp);
 
   const children = React.Children.map(childrenProp, (child, childIndex) => {
     if (!React.isValidElement(child)) {
diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
index d8c50b8315c1df..f4dd1c3f32db69 100644
--- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
+++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
 import unsupportedProp from '../utils/unsupportedProp';
@@ -82,7 +82,7 @@ class BottomNavigationAction extends React.Component {
       ...other
     } = this.props;
 
-    const className = classNames(
+    const className = clsx(
       classes.root,
       {
         [classes.selected]: selected,
@@ -91,7 +91,7 @@ class BottomNavigationAction extends React.Component {
       classNameProp,
     );
 
-    const labelClassName = classNames(classes.label, {
+    const labelClassName = clsx(classes.label, {
       [classes.selected]: selected,
       [classes.iconOnly]: !showLabelProp && !selected,
     });
diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js
index 179415d7f9c3ac..77cab30b4604f1 100644
--- a/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js
+++ b/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 
 const styles = {
@@ -19,7 +19,7 @@ function BreadcrumbSeparator(props) {
   const { children, classes, className, ...other } = props;
 
   return (
-    <li aria-hidden="true" className={classNames(classes.root, className)} {...other}>
+    <li aria-hidden="true" className={clsx(classes.root, className)} {...other}>
       {children}
     </li>
   );
diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
index 47933955a6cc05..a2cb0068563a59 100644
--- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
+++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
@@ -98,7 +98,7 @@ class Breadcrumbs extends React.Component {
       <Typography
         component={Component}
         color="textSecondary"
-        className={classNames(classes.root, classNameProp)}
+        className={clsx(classes.root, classNameProp)}
         {...other}
       >
         <ol className={classes.ol}>
diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
index 0f4618ecc8725e..fe9438086edb62 100644
--- a/packages/material-ui/src/Button/Button.js
+++ b/packages/material-ui/src/Button/Button.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
@@ -203,7 +203,7 @@ function Button(props) {
 
   const contained = variant === 'contained';
   const text = variant === 'text';
-  const className = classNames(
+  const className = clsx(
     classes.root,
     {
       [classes.text]: text,
@@ -228,7 +228,7 @@ function Button(props) {
       className={className}
       disabled={disabled}
       focusRipple={!disableFocusRipple}
-      focusVisibleClassName={classNames(classes.focusVisible, focusVisibleClassName)}
+      focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
       {...other}
     >
       <span className={classes.label}>{children}</span>
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js
index 400812919353b0..5450a4a1ae73ca 100644
--- a/packages/material-ui/src/ButtonBase/ButtonBase.js
+++ b/packages/material-ui/src/ButtonBase/ButtonBase.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import ownerWindow from '../utils/ownerWindow';
 import withStyles from '../styles/withStyles';
@@ -257,7 +257,7 @@ class ButtonBase extends React.Component {
       ...other
     } = this.props;
 
-    const className = classNames(
+    const className = clsx(
       classes.root,
       {
         [classes.disabled]: disabled,
diff --git a/packages/material-ui/src/ButtonBase/Ripple.js b/packages/material-ui/src/ButtonBase/Ripple.js
index f15286fee8ff78..ef3767003f5ccd 100644
--- a/packages/material-ui/src/ButtonBase/Ripple.js
+++ b/packages/material-ui/src/ButtonBase/Ripple.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Transition from 'react-transition-group/Transition';
 
 /**
@@ -36,7 +36,7 @@ class Ripple extends React.Component {
     } = this.props;
     const { visible, leaving } = this.state;
 
-    const rippleClassName = classNames(
+    const rippleClassName = clsx(
       classes.ripple,
       {
         [classes.rippleVisible]: visible,
@@ -52,7 +52,7 @@ class Ripple extends React.Component {
       left: -(rippleSize / 2) + rippleX,
     };
 
-    const childClassName = classNames(classes.child, {
+    const childClassName = clsx(classes.child, {
       [classes.childLeaving]: leaving,
       [classes.childPulsate]: pulsate,
     });
diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.js b/packages/material-ui/src/ButtonBase/TouchRipple.js
index 4081a9d8739a9e..4f119339fe6129 100644
--- a/packages/material-ui/src/ButtonBase/TouchRipple.js
+++ b/packages/material-ui/src/ButtonBase/TouchRipple.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import TransitionGroup from 'react-transition-group/TransitionGroup';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import Ripple from './Ripple';
 
@@ -267,7 +267,7 @@ class TouchRipple extends React.PureComponent {
         component="span"
         enter
         exit
-        className={classNames(classes.root, className)}
+        className={clsx(classes.root, className)}
         {...other}
       >
         {this.state.ripples}
diff --git a/packages/material-ui/src/Card/Card.js b/packages/material-ui/src/Card/Card.js
index 9f55d5db54caa0..274f7aacd28a75 100644
--- a/packages/material-ui/src/Card/Card.js
+++ b/packages/material-ui/src/Card/Card.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Paper from '../Paper';
 import withStyles from '../styles/withStyles';
 
@@ -16,9 +16,7 @@ export const styles = {
 function Card(props) {
   const { classes, className, raised, ...other } = props;
 
-  return (
-    <Paper className={classNames(classes.root, className)} elevation={raised ? 8 : 1} {...other} />
-  );
+  return <Paper className={clsx(classes.root, className)} elevation={raised ? 8 : 1} {...other} />;
 }
 
 Card.propTypes = {
diff --git a/packages/material-ui/src/CardActionArea/CardActionArea.js b/packages/material-ui/src/CardActionArea/CardActionArea.js
index 30dfc4af2555f3..77741f201d2f80 100644
--- a/packages/material-ui/src/CardActionArea/CardActionArea.js
+++ b/packages/material-ui/src/CardActionArea/CardActionArea.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
 
@@ -42,8 +42,8 @@ function CardActionArea(props) {
 
   return (
     <ButtonBase
-      className={classNames(classes.root, className)}
-      focusVisibleClassName={classNames(focusVisibleClassName, classes.focusVisible)}
+      className={clsx(classes.root, className)}
+      focusVisibleClassName={clsx(focusVisibleClassName, classes.focusVisible)}
       {...other}
     >
       {children}
diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js
index f97618ea0a0afa..9a282f2ecfe9ae 100644
--- a/packages/material-ui/src/CardActions/CardActions.js
+++ b/packages/material-ui/src/CardActions/CardActions.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
@@ -28,7 +28,7 @@ function CardActions(props) {
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         classes.root,
         { [classes.disableActionSpacing]: disableActionSpacing },
         className,
diff --git a/packages/material-ui/src/CardContent/CardContent.js b/packages/material-ui/src/CardContent/CardContent.js
index c795f32bd9430c..6dc9e01b0c0a3f 100644
--- a/packages/material-ui/src/CardContent/CardContent.js
+++ b/packages/material-ui/src/CardContent/CardContent.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 
@@ -17,7 +17,7 @@ export const styles = {
 function CardContent(props) {
   const { classes, className, component: Component, ...other } = props;
 
-  return <Component className={classNames(classes.root, className)} {...other} />;
+  return <Component className={clsx(classes.root, className)} {...other} />;
 }
 
 CardContent.propTypes = {
diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js
index 3be86f53b82021..5a09c925e5b530 100644
--- a/packages/material-ui/src/CardHeader/CardHeader.js
+++ b/packages/material-ui/src/CardHeader/CardHeader.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
@@ -80,7 +80,7 @@ function CardHeader(props) {
   }
 
   return (
-    <Component className={classNames(classes.root, classNameProp)} {...other}>
+    <Component className={clsx(classes.root, classNameProp)} {...other}>
       {avatar && <div className={classes.avatar}>{avatar}</div>}
       <div className={classes.content}>
         {title}
diff --git a/packages/material-ui/src/CardMedia/CardMedia.js b/packages/material-ui/src/CardMedia/CardMedia.js
index 0bb015ab6f8dd4..32252611679757 100644
--- a/packages/material-ui/src/CardMedia/CardMedia.js
+++ b/packages/material-ui/src/CardMedia/CardMedia.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import warning from 'warning';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
@@ -35,7 +35,7 @@ function CardMedia(props) {
 
   return (
     <Component
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.media]: isMediaComponent,
diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js
index f579f3e75675d8..992cdf7fcfae4c 100644
--- a/packages/material-ui/src/Checkbox/Checkbox.js
+++ b/packages/material-ui/src/Checkbox/Checkbox.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SwitchBase from '../internal/SwitchBase';
 import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';
 import CheckBoxIcon from '../internal/svg-icons/CheckBox';
@@ -56,14 +56,14 @@ function Checkbox(props) {
     <SwitchBase
       type="checkbox"
       checkedIcon={indeterminate ? indeterminateIcon : checkedIcon}
-      className={classNames(
+      className={clsx(
         {
           [classes.indeterminate]: indeterminate,
         },
         className,
       )}
       classes={{
-        root: classNames(classes.root, classes[`color${capitalize(color)}`]),
+        root: clsx(classes.root, classes[`color${capitalize(color)}`]),
         checked: classes.checked,
         disabled: classes.disabled,
       }}
diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
index 5180d45deeb053..e229d8a934e77a 100644
--- a/packages/material-ui/src/Chip/Chip.js
+++ b/packages/material-ui/src/Chip/Chip.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import warning from 'warning';
 import { componentPropType } from '@material-ui/utils';
 import CancelIcon from '../internal/svg-icons/Cancel';
@@ -295,7 +295,7 @@ class Chip extends React.Component {
     } = this.props;
 
     const clickable = clickableProp !== false && onClick ? true : clickableProp;
-    const className = classNames(
+    const className = clsx(
       classes.root,
       {
         [classes[`color${capitalize(color)}`]]: color !== 'default',
@@ -322,16 +322,12 @@ class Chip extends React.Component {
       deleteIcon =
         deleteIconProp && React.isValidElement(deleteIconProp) ? (
           React.cloneElement(deleteIconProp, {
-            className: classNames(
-              deleteIconProp.props.className,
-              classes.deleteIcon,
-              customClasses,
-            ),
+            className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses),
             onClick: this.handleDeleteIconClick,
           })
         ) : (
           <CancelIcon
-            className={classNames(classes.deleteIcon, customClasses)}
+            className={clsx(classes.deleteIcon, customClasses)}
             onClick={this.handleDeleteIconClick}
           />
         );
@@ -340,17 +336,17 @@ class Chip extends React.Component {
     let avatar = null;
     if (avatarProp && React.isValidElement(avatarProp)) {
       avatar = React.cloneElement(avatarProp, {
-        className: classNames(classes.avatar, avatarProp.props.className, {
+        className: clsx(classes.avatar, avatarProp.props.className, {
           [classes[`avatarColor${capitalize(color)}`]]: color !== 'default',
         }),
-        childrenClassName: classNames(classes.avatarChildren, avatarProp.props.childrenClassName),
+        childrenClassName: clsx(classes.avatarChildren, avatarProp.props.childrenClassName),
       });
     }
 
     let icon = null;
     if (iconProp && React.isValidElement(iconProp)) {
       icon = React.cloneElement(iconProp, {
-        className: classNames(classes.icon, iconProp.props.className, {
+        className: clsx(classes.icon, iconProp.props.className, {
           [classes[`iconColor${capitalize(color)}`]]: color !== 'default',
         }),
       });
diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js
index 55a5740e6fcc50..d8915cf5d49fee 100644
--- a/packages/material-ui/src/CircularProgress/CircularProgress.js
+++ b/packages/material-ui/src/CircularProgress/CircularProgress.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { chainPropTypes } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
@@ -138,7 +138,7 @@ function CircularProgress(props) {
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes[`color${capitalize(color)}`]]: color !== 'inherit',
@@ -154,7 +154,7 @@ function CircularProgress(props) {
     >
       <svg className={classes.svg} viewBox={`${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`}>
         <circle
-          className={classNames(classes.circle, {
+          className={clsx(classes.circle, {
             [classes.circleIndeterminate]: variant === 'indeterminate',
             [classes.circleStatic]: variant === 'static',
             [classes.circleDisableShrink]: disableShrink,
diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js
index 816898b83fe4cb..e116ce91f9ab3d 100644
--- a/packages/material-ui/src/Collapse/Collapse.js
+++ b/packages/material-ui/src/Collapse/Collapse.js
@@ -1,7 +1,7 @@
 // @inheritedComponent Transition
 
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
 import { componentPropType } from '@material-ui/utils';
@@ -152,7 +152,7 @@ class Collapse extends React.Component {
       >
         {(state, childProps) => (
           <Component
-            className={classNames(
+            className={clsx(
               classes.container,
               {
                 [classes.entered]: state === 'entered',
diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js
index 350bc0fc7358d3..f62937a6d8e277 100644
--- a/packages/material-ui/src/Dialog/Dialog.js
+++ b/packages/material-ui/src/Dialog/Dialog.js
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
@@ -185,7 +185,7 @@ class Dialog extends React.Component {
 
     return (
       <Modal
-        className={classNames(classes.root, className)}
+        className={clsx(classes.root, className)}
         BackdropProps={{
           transitionDuration,
           ...BackdropProps,
@@ -213,7 +213,7 @@ class Dialog extends React.Component {
           {...TransitionProps}
         >
           <div
-            className={classNames(classes.container, classes[`scroll${capitalize(scroll)}`])}
+            className={clsx(classes.container, classes[`scroll${capitalize(scroll)}`])}
             onClick={this.handleBackdropClick}
             onMouseDown={this.handleMouseDown}
             role="document"
@@ -221,7 +221,7 @@ class Dialog extends React.Component {
             <PaperComponent
               elevation={24}
               {...PaperProps}
-              className={classNames(
+              className={clsx(
                 classes.paper,
                 classes[`paperScroll${capitalize(scroll)}`],
                 classes[`paperWidth${capitalize(String(maxWidth))}`],
diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
index eb013bf47b9f8d..5955b04e061c21 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
@@ -24,7 +24,7 @@ function DialogActions(props) {
   const { disableActionSpacing, children, classes, className, ...other } = props;
 
   return (
-    <div className={classNames(classes.root, className)} {...other}>
+    <div className={clsx(classes.root, className)} {...other}>
       {disableActionSpacing ? children : cloneChildrenWithClassName(children, classes.action)}
     </div>
   );
diff --git a/packages/material-ui/src/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js
index 5dcfe2488baa70..c9b453c2bd9628 100644
--- a/packages/material-ui/src/DialogContent/DialogContent.js
+++ b/packages/material-ui/src/DialogContent/DialogContent.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 
 export const styles = {
@@ -20,7 +20,7 @@ function DialogContent(props) {
   const { classes, children, className, ...other } = props;
 
   return (
-    <div className={classNames(classes.root, className)} {...other}>
+    <div className={clsx(classes.root, className)} {...other}>
       {children}
     </div>
   );
diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js
index 8dc06a645b8fda..e75b3d792d1831 100644
--- a/packages/material-ui/src/DialogTitle/DialogTitle.js
+++ b/packages/material-ui/src/DialogTitle/DialogTitle.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
 
@@ -17,7 +17,7 @@ function DialogTitle(props) {
   const { children, classes, className, disableTypography, ...other } = props;
 
   return (
-    <div className={classNames(classes.root, className)} {...other}>
+    <div className={clsx(classes.root, className)} {...other}>
       {disableTypography ? (
         children
       ) : (
diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
index 0cf7346df0a851..69681c82bd47cc 100644
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType, chainPropTypes } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
@@ -50,7 +50,7 @@ function Divider(props) {
 
   return (
     <Component
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.inset]: inset || variant === 'inset',
diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js
index f09d67a73f02a0..ea03bbdc0dd1e4 100644
--- a/packages/material-ui/src/Drawer/Drawer.js
+++ b/packages/material-ui/src/Drawer/Drawer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Modal from '../Modal';
 import withStyles from '../styles/withStyles';
 import Slide from '../Slide';
@@ -135,7 +135,7 @@ class Drawer extends React.Component {
       <Paper
         elevation={variant === 'temporary' ? elevation : 0}
         square
-        className={classNames(classes.paper, classes[`paperAnchor${capitalize(anchor)}`], {
+        className={clsx(classes.paper, classes[`paperAnchor${capitalize(anchor)}`], {
           [classes[`paperAnchorDocked${capitalize(anchor)}`]]: variant !== 'temporary',
         })}
         {...PaperProps}
@@ -146,7 +146,7 @@ class Drawer extends React.Component {
 
     if (variant === 'permanent') {
       return (
-        <div className={classNames(classes.root, classes.docked, className)} {...other}>
+        <div className={clsx(classes.root, classes.docked, className)} {...other}>
           {drawer}
         </div>
       );
@@ -166,7 +166,7 @@ class Drawer extends React.Component {
 
     if (variant === 'persistent') {
       return (
-        <div className={classNames(classes.root, classes.docked, className)} {...other}>
+        <div className={clsx(classes.root, classes.docked, className)} {...other}>
           {slidingDrawer}
         </div>
       );
@@ -180,7 +180,7 @@ class Drawer extends React.Component {
           ...BackdropPropsProp,
           transitionDuration,
         }}
-        className={classNames(classes.root, classes.modal, className)}
+        className={clsx(classes.root, classes.modal, className)}
         open={open}
         onClose={onClose}
         {...other}
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
index e527de6e182a5f..2a65335dce46ee 100644
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import warning from 'warning';
 import Collapse from '../Collapse';
 import Paper from '../Paper';
@@ -151,7 +151,7 @@ class ExpansionPanel extends React.Component {
 
     return (
       <Paper
-        className={classNames(
+        className={clsx(
           classes.root,
           {
             [classes.expanded]: expanded,
diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
index 66d004ec1740ee..f000d35023a1a9 100644
--- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
+++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
@@ -23,7 +23,7 @@ function ExpansionPanelActions(props) {
   const { children, classes, className, ...other } = props;
 
   return (
-    <div className={classNames(classes.root, className)} {...other}>
+    <div className={clsx(classes.root, className)} {...other}>
       {cloneChildrenWithClassName(children, classes.action)}
     </div>
   );
diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
index d5789f9fb885ee..e1b57d8c4808fd 100644
--- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
+++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 
 export const styles = {
@@ -15,7 +15,7 @@ function ExpansionPanelDetails(props) {
   const { classes, children, className, ...other } = props;
 
   return (
-    <div className={classNames(classes.root, className)} {...other}>
+    <div className={clsx(classes.root, className)} {...other}>
       {children}
     </div>
   );
diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
index 05d3f53b4eb0b1..f363e6ff8befce 100644
--- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
+++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import ButtonBase from '../ButtonBase';
 import IconButton from '../IconButton';
 import withStyles from '../styles/withStyles';
@@ -129,7 +129,7 @@ class ExpansionPanelSummary extends React.Component {
         disabled={disabled}
         component="div"
         aria-expanded={expanded}
-        className={classNames(
+        className={clsx(
           classes.root,
           {
             [classes.disabled]: disabled,
@@ -143,13 +143,11 @@ class ExpansionPanelSummary extends React.Component {
         onClick={this.handleChange}
         {...other}
       >
-        <div className={classNames(classes.content, { [classes.expanded]: expanded })}>
-          {children}
-        </div>
+        <div className={clsx(classes.content, { [classes.expanded]: expanded })}>{children}</div>
         {expandIcon && (
           <IconButton
             disabled={disabled}
-            className={classNames(classes.expandIcon, {
+            className={clsx(classes.expandIcon, {
               [classes.expanded]: expanded,
             })}
             component="div"
diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js
index 8412ed4a7e7224..e7e286dfef0f3c 100644
--- a/packages/material-ui/src/Fab/Fab.js
+++ b/packages/material-ui/src/Fab/Fab.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
@@ -138,7 +138,7 @@ function Fab(props) {
 
   return (
     <ButtonBase
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.extended]: variant === 'extended',
@@ -152,7 +152,7 @@ function Fab(props) {
       )}
       disabled={disabled}
       focusRipple={!disableFocusRipple}
-      focusVisibleClassName={classNames(classes.focusVisible, focusVisibleClassName)}
+      focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
       {...other}
     >
       <span className={classes.label}>{children}</span>
diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
index c2722a3191d38f..850ef86be01856 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.js
+++ b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import InputBase from '../InputBase';
 import withStyles from '../styles/withStyles';
@@ -131,7 +131,7 @@ function FilledInput(props) {
     <InputBase
       classes={{
         ...classes,
-        root: classNames(classes.root, {
+        root: clsx(classes.root, {
           [classes.underline]: !disableUnderline,
         }),
         underline: null,
diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
index c43e7aeed20b73..0b704009f5a50c 100644
--- a/packages/material-ui/src/FormControl/FormControl.js
+++ b/packages/material-ui/src/FormControl/FormControl.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import { isFilled, isAdornedStart } from '../InputBase/utils';
 import withStyles from '../styles/withStyles';
@@ -141,7 +141,7 @@ class FormControl extends React.Component {
     return (
       <FormControlContext.Provider value={childContext}>
         <Component
-          className={classNames(
+          className={clsx(
             classes.root,
             {
               [classes[`margin${capitalize(margin)}`]]: margin !== 'none',
diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
index 3fe513d3a77653..15b1a5ceb78383 100644
--- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js
+++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withFormControlContext from '../FormControl/withFormControlContext';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
@@ -88,7 +88,7 @@ function FormControlLabel(props) {
 
   return (
     <label
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes[`labelPlacement${capitalize(labelPlacement)}`]]: labelPlacement !== 'end',
@@ -101,7 +101,7 @@ function FormControlLabel(props) {
       {React.cloneElement(control, controlProps)}
       <Typography
         component="span"
-        className={classNames(classes.label, { [classes.disabled]: disabled })}
+        className={clsx(classes.label, { [classes.disabled]: disabled })}
       >
         {label}
       </Typography>
diff --git a/packages/material-ui/src/FormGroup/FormGroup.js b/packages/material-ui/src/FormGroup/FormGroup.js
index 717c590e75a691..dc71d13d0ccad9 100644
--- a/packages/material-ui/src/FormGroup/FormGroup.js
+++ b/packages/material-ui/src/FormGroup/FormGroup.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 
 export const styles = {
@@ -26,7 +26,7 @@ function FormGroup(props) {
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.row]: row,
diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js
index c43afd52438fc0..2fbf0472ecb8cd 100644
--- a/packages/material-ui/src/FormHelperText/FormHelperText.js
+++ b/packages/material-ui/src/FormHelperText/FormHelperText.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import formControlState from '../FormControl/formControlState';
 import withFormControlContext from '../FormControl/withFormControlContext';
@@ -68,7 +68,7 @@ function FormHelperText(props) {
 
   return (
     <Component
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.contained]: fcs.variant === 'filled' || fcs.variant === 'outlined',
diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js
index bd8e517cde3450..9a761443890f93 100644
--- a/packages/material-ui/src/FormLabel/FormLabel.js
+++ b/packages/material-ui/src/FormLabel/FormLabel.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import formControlState from '../FormControl/formControlState';
 import withFormControlContext from '../FormControl/withFormControlContext';
@@ -64,7 +64,7 @@ function FormLabel(props) {
 
   return (
     <Component
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.disabled]: fcs.disabled,
@@ -80,7 +80,7 @@ function FormLabel(props) {
       {children}
       {fcs.required && (
         <span
-          className={classNames(classes.asterisk, {
+          className={clsx(classes.asterisk, {
             [classes.error]: fcs.error,
           })}
           data-mui-test="FormLabelAsterisk"
diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js
index 3d08c033d76c54..9fcf1aa6e02433 100644
--- a/packages/material-ui/src/Grid/Grid.js
+++ b/packages/material-ui/src/Grid/Grid.js
@@ -11,7 +11,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { keys as breakpointKeys } from '../styles/createBreakpoints';
@@ -215,7 +215,7 @@ function Grid(props) {
     ...other
   } = props;
 
-  const className = classNames(
+  const className = clsx(
     {
       [classes.container]: container,
       [classes.item]: item,
diff --git a/packages/material-ui/src/GridList/GridList.js b/packages/material-ui/src/GridList/GridList.js
index 760ed31d44c952..4f705d80e7e72b 100644
--- a/packages/material-ui/src/GridList/GridList.js
+++ b/packages/material-ui/src/GridList/GridList.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import warning from 'warning';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
@@ -32,7 +32,7 @@ function GridList(props) {
 
   return (
     <Component
-      className={classNames(classes.root, classNameProp)}
+      className={clsx(classes.root, classNameProp)}
       style={{ margin: -spacing / 2, ...style }}
       {...other}
     >
diff --git a/packages/material-ui/src/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js
index 2b52d9ee4200d6..a4f871a5cf030a 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.js
+++ b/packages/material-ui/src/GridListTile/GridListTile.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import EventListener from 'react-event-listener';
 import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import { componentPropType } from '@material-ui/utils';
@@ -95,7 +95,7 @@ class GridListTile extends React.Component {
     const { children, classes, className, cols, component: Component, rows, ...other } = this.props;
 
     return (
-      <Component className={classNames(classes.root, className)} {...other}>
+      <Component className={clsx(classes.root, className)} {...other}>
         <EventListener target="window" onResize={this.handleResize} />
         <div className={classes.tile}>
           {React.Children.map(children, child => {
diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.js b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
index 19ffc254b502bf..a102497c95125b 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.js
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
@@ -80,7 +80,7 @@ function GridListTileBar(props) {
   } = props;
 
   const actionPos = actionIcon && actionPosition;
-  const className = classNames(
+  const className = clsx(
     classes.root,
     {
       [classes.titlePositionBottom]: titlePosition === 'bottom',
@@ -91,7 +91,7 @@ function GridListTileBar(props) {
   );
 
   // Remove the margin between the title / subtitle wrapper, and the Action Icon
-  const titleWrapClassName = classNames(classes.titleWrap, {
+  const titleWrapClassName = clsx(classes.titleWrap, {
     [classes.titleWrapActionPosLeft]: actionPos === 'left',
     [classes.titleWrapActionPosRight]: actionPos === 'right',
   });
@@ -104,7 +104,7 @@ function GridListTileBar(props) {
       </div>
       {actionIcon ? (
         <div
-          className={classNames(classes.actionIcon, {
+          className={clsx(classes.actionIcon, {
             [classes.actionIconActionPosLeft]: actionPos === 'left',
           })}
         >
diff --git a/packages/material-ui/src/Hidden/HiddenCss.js b/packages/material-ui/src/Hidden/HiddenCss.js
index 9b6690e951e705..a2a89c7f5ed80c 100644
--- a/packages/material-ui/src/Hidden/HiddenCss.js
+++ b/packages/material-ui/src/Hidden/HiddenCss.js
@@ -55,10 +55,10 @@ function HiddenCss(props) {
     )} by \`<Hidden />\`.`,
   );
 
-  const classNames = [];
+  const clsx = [];
 
   if (className) {
-    classNames.push(className);
+    clsx.push(className);
   }
 
   for (let i = 0; i < breakpointKeys.length; i += 1) {
@@ -67,21 +67,21 @@ function HiddenCss(props) {
     const breakpointDown = props[`${breakpoint}Down`];
 
     if (breakpointUp) {
-      classNames.push(classes[`${breakpoint}Up`]);
+      clsx.push(classes[`${breakpoint}Up`]);
     }
     if (breakpointDown) {
-      classNames.push(classes[`${breakpoint}Down`]);
+      clsx.push(classes[`${breakpoint}Down`]);
     }
   }
 
   if (only) {
     const onlyBreakpoints = Array.isArray(only) ? only : [only];
     onlyBreakpoints.forEach(breakpoint => {
-      classNames.push(classes[`only${capitalize(breakpoint)}`]);
+      clsx.push(classes[`only${capitalize(breakpoint)}`]);
     });
   }
 
-  return <div className={classNames.join(' ')}>{children}</div>;
+  return <div className={clsx.join(' ')}>{children}</div>;
 }
 
 HiddenCss.propTypes = {
diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js
index f66c643eedff3f..50c167e78ef81f 100644
--- a/packages/material-ui/src/Icon/Icon.js
+++ b/packages/material-ui/src/Icon/Icon.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
@@ -55,7 +55,7 @@ function Icon(props) {
 
   return (
     <Component
-      className={classNames(
+      className={clsx(
         'material-icons',
         classes.root,
         {
diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js
index c2c5daa078d103..46fcb49769b221 100644
--- a/packages/material-ui/src/IconButton/IconButton.js
+++ b/packages/material-ui/src/IconButton/IconButton.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { chainPropTypes } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
@@ -82,7 +82,7 @@ function IconButton(props) {
 
   return (
     <ButtonBase
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes[`color${capitalize(color)}`]]: color !== 'default',
diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
index 75d362208cde3c..577b6c299a2a8e 100644
--- a/packages/material-ui/src/Input/Input.js
+++ b/packages/material-ui/src/Input/Input.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import InputBase from '../InputBase';
 import withStyles from '../styles/withStyles';
@@ -100,7 +100,7 @@ function Input(props) {
     <InputBase
       classes={{
         ...classes,
-        root: classNames(classes.root, {
+        root: clsx(classes.root, {
           [classes.underline]: !disableUnderline,
         }),
         underline: null,
diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.js b/packages/material-ui/src/InputAdornment/InputAdornment.js
index 7e87c968a4471e..09e91381663367 100644
--- a/packages/material-ui/src/InputAdornment/InputAdornment.js
+++ b/packages/material-ui/src/InputAdornment/InputAdornment.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import warning from 'warning';
 import Typography from '../Typography';
@@ -67,7 +67,7 @@ function InputAdornment(props) {
   return (
     <FormControlContext.Provider value={null}>
       <Component
-        className={classNames(
+        className={clsx(
           classes.root,
           {
             [classes.filled]: variant === 'filled',
diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index cd565a633b2e3e..0aa331a259ba52 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import formControlState from '../FormControl/formControlState';
 import FormControlContext from '../FormControl/FormControlContext';
@@ -330,7 +330,7 @@ class InputBase extends React.Component {
 
     const focused = muiFormControl ? muiFormControl.focused : this.state.focused;
 
-    const className = classNames(
+    const className = clsx(
       classes.root,
       {
         [classes.disabled]: fcs.disabled,
@@ -346,7 +346,7 @@ class InputBase extends React.Component {
       classNameProp,
     );
 
-    const inputClassName = classNames(
+    const inputClassName = clsx(
       classes.input,
       {
         [classes.disabled]: fcs.disabled,
diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js
index 9c871cd0a8aa81..73052def98b7a2 100644
--- a/packages/material-ui/src/InputLabel/InputLabel.js
+++ b/packages/material-ui/src/InputLabel/InputLabel.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import formControlState from '../FormControl/formControlState';
 import withFormControlContext from '../FormControl/withFormControlContext';
 import withStyles from '../styles/withStyles';
@@ -105,7 +105,7 @@ function InputLabel(props) {
     states: ['margin', 'variant'],
   });
 
-  const className = classNames(
+  const className = clsx(
     classes.root,
     {
       [classes.formControl]: muiFormControl,
diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js
index b0a2aa2f69a45d..056eb0597fa2ae 100644
--- a/packages/material-ui/src/LinearProgress/LinearProgress.js
+++ b/packages/material-ui/src/LinearProgress/LinearProgress.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import warning from 'warning';
 import withStyles from '../styles/withStyles';
 import { lighten } from '../styles/colorManipulator';
@@ -174,7 +174,7 @@ export const styles = theme => ({
 function LinearProgress(props) {
   const { classes, className: classNameProp, color, value, valueBuffer, variant, ...other } = props;
 
-  const className = classNames(
+  const className = clsx(
     classes.root,
     {
       [classes.colorPrimary]: color === 'primary',
@@ -186,18 +186,18 @@ function LinearProgress(props) {
     },
     classNameProp,
   );
-  const dashedClass = classNames(classes.dashed, {
+  const dashedClass = clsx(classes.dashed, {
     [classes.dashedColorPrimary]: color === 'primary',
     [classes.dashedColorSecondary]: color === 'secondary',
   });
-  const bar1ClassName = classNames(classes.bar, {
+  const bar1ClassName = clsx(classes.bar, {
     [classes.barColorPrimary]: color === 'primary',
     [classes.barColorSecondary]: color === 'secondary',
     [classes.bar1Indeterminate]: variant === 'indeterminate' || variant === 'query',
     [classes.bar1Determinate]: variant === 'determinate',
     [classes.bar1Buffer]: variant === 'buffer',
   });
-  const bar2ClassName = classNames(classes.bar, {
+  const bar2ClassName = clsx(classes.bar, {
     [classes.barColorPrimary]: color === 'primary' && variant !== 'buffer',
     [classes.colorPrimary]: color === 'primary' && variant === 'buffer',
     [classes.barColorSecondary]: color === 'secondary' && variant !== 'buffer',
diff --git a/packages/material-ui/src/Link/Link.js b/packages/material-ui/src/Link/Link.js
index acec504f94fe7a..43581016bbc0df 100644
--- a/packages/material-ui/src/Link/Link.js
+++ b/packages/material-ui/src/Link/Link.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { componentPropType } from '@material-ui/utils';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { capitalize } from '../utils/helpers';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
@@ -64,7 +64,7 @@ function Link(props) {
 
   return (
     <Typography
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.button]: component === 'button',
diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js
index 0f1448cbaf80ff..05b59cc8e73be1 100644
--- a/packages/material-ui/src/List/List.js
+++ b/packages/material-ui/src/List/List.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import ListContext from './ListContext';
@@ -43,7 +43,7 @@ const List = React.forwardRef(function List(props, ref) {
 
   return (
     <Component
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.dense]: dense && !disablePadding,
diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
index 0ec1cabbc1e459..f3938ca71695a2 100644
--- a/packages/material-ui/src/ListItem/ListItem.js
+++ b/packages/material-ui/src/ListItem/ListItem.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { chainPropTypes, componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
@@ -114,7 +114,7 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
           children.length &&
           isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
 
-        const className = classNames(
+        const className = clsx(
           classes.root,
           classes.default,
           {
@@ -135,10 +135,7 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
 
         if (button) {
           componentProps.component = componentProp || 'div';
-          componentProps.focusVisibleClassName = classNames(
-            classes.focusVisible,
-            focusVisibleClassName,
-          );
+          componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);
           Component = ButtonBase;
         }
 
@@ -157,7 +154,7 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
 
           return (
             <ContainerComponent
-              className={classNames(classes.container, ContainerClassName)}
+              className={clsx(classes.container, ContainerClassName)}
               ref={ref}
               {...ContainerProps}
             >
diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
index 8784ca6501263e..b4e84270d2649e 100644
--- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
+++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import ListContext from '../List/ListContext';
 
@@ -35,7 +35,7 @@ function ListItemAvatar(props) {
     <ListContext.Consumer>
       {context =>
         React.cloneElement(children, {
-          className: classNames(
+          className: clsx(
             {
               [classes.root]: context.dense,
               [classes.alignItemsFlexStart]: context.alignItems === 'flex-start',
@@ -43,7 +43,7 @@ function ListItemAvatar(props) {
             className,
             children.props.className,
           ),
-          childrenClassName: classNames(
+          childrenClassName: clsx(
             { [classes.icon]: context.dense },
             children.props.childrenClassName,
           ),
diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
index a39c340880d3ed..f35a28ca9d093a 100644
--- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js
+++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
@@ -20,7 +20,7 @@ function ListItemIcon(props) {
   const { children, classes, className: classNameProp, ...other } = props;
 
   return (
-    <div className={classNames(classes.root, classNameProp)} {...other}>
+    <div className={clsx(classes.root, classNameProp)} {...other}>
       {children}
     </div>
   );
diff --git a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js
index dc260b031010a4..192079da8a4e12 100644
--- a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js
+++ b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 
 export const styles = {
@@ -20,7 +20,7 @@ function ListItemSecondaryAction(props) {
   const { children, classes, className, ...other } = props;
 
   return (
-    <div className={classNames(classes.root, className)} {...other}>
+    <div className={clsx(classes.root, className)} {...other}>
       {children}
     </div>
   );
diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js
index 985fef303199b3..6070601b178080 100644
--- a/packages/material-ui/src/ListItemText/ListItemText.js
+++ b/packages/material-ui/src/ListItemText/ListItemText.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
 import ListContext from '../List/ListContext';
@@ -64,7 +64,7 @@ function ListItemText(props) {
           primary = (
             <Typography
               variant={theme.typography.useNextVariants ? 'body1' : 'subheading'}
-              className={classNames(classes.primary, { [classes.textDense]: dense })}
+              className={clsx(classes.primary, { [classes.textDense]: dense })}
               component="span"
               {...primaryTypographyProps}
             >
@@ -77,7 +77,7 @@ function ListItemText(props) {
         if (secondary != null && secondary.type !== Typography && !disableTypography) {
           secondary = (
             <Typography
-              className={classNames(classes.secondary, {
+              className={clsx(classes.secondary, {
                 [classes.textDense]: dense,
               })}
               color="textSecondary"
@@ -90,7 +90,7 @@ function ListItemText(props) {
 
         return (
           <div
-            className={classNames(
+            className={clsx(
               classes.root,
               {
                 [classes.dense]: dense,
diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js
index bea527bb2a0548..4fbc0914fc261a 100644
--- a/packages/material-ui/src/ListSubheader/ListSubheader.js
+++ b/packages/material-ui/src/ListSubheader/ListSubheader.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
@@ -56,7 +56,7 @@ function ListSubheader(props) {
 
   return (
     <Component
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes[`color${capitalize(color)}`]]: color !== 'default',
diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js
index 74e52fb2435421..f329549847b8ab 100644
--- a/packages/material-ui/src/MenuItem/MenuItem.js
+++ b/packages/material-ui/src/MenuItem/MenuItem.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import ListItem from '../ListItem';
@@ -38,7 +38,7 @@ const MenuItem = React.forwardRef(function MenuItem(props, ref) {
       component={component}
       selected={selected}
       disableGutters={disableGutters}
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.selected]: selected,
diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.js b/packages/material-ui/src/MobileStepper/MobileStepper.js
index 8043d25855301c..11072aa8bd2e43 100644
--- a/packages/material-ui/src/MobileStepper/MobileStepper.js
+++ b/packages/material-ui/src/MobileStepper/MobileStepper.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import Paper from '../Paper';
 import { capitalize } from '../utils/helpers';
@@ -73,11 +73,7 @@ function MobileStepper(props) {
     ...other
   } = props;
 
-  const className = classNames(
-    classes.root,
-    classes[`position${capitalize(position)}`],
-    classNameProp,
-  );
+  const className = clsx(classes.root, classes[`position${capitalize(position)}`], classNameProp);
 
   return (
     <Paper square elevation={0} className={className} {...other}>
@@ -85,7 +81,7 @@ function MobileStepper(props) {
       {variant === 'dots' && (
         <div className={classes.dots}>
           {[...new Array(steps)].map((_, step) => {
-            const dotClassName = classNames(classes.dot, {
+            const dotClassName = clsx(classes.dot, {
               [classes.dotActive]: step === activeStep,
             });
             // eslint-disable-next-line react/no-array-index-key
diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
index 15d3e2b718d9bb..965e527fbb0fa8 100644
--- a/packages/material-ui/src/Modal/Modal.js
+++ b/packages/material-ui/src/Modal/Modal.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import warning from 'warning';
 import { componentPropType } from '@material-ui/utils';
 import ownerDocument from '../utils/ownerDocument';
@@ -331,7 +331,7 @@ class Modal extends React.Component {
           ref={this.handleModalRef}
           onKeyDown={this.handleKeyDown}
           role="presentation"
-          className={classNames(classes.root, className, {
+          className={clsx(classes.root, className, {
             [classes.hidden]: exited,
           })}
           {...other}
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index 72420f32f7b64e..07a95f68ed2844 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 
 /**
@@ -24,7 +24,7 @@ function NativeSelectInput(props) {
   return (
     <div className={classes.root}>
       <select
-        className={classNames(
+        className={clsx(
           classes.select,
           {
             [classes.filled]: variant === 'filled',
diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
index 3c535aabf09918..5a369de3126a83 100644
--- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js
+++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '../styles';
 import { capitalize } from '../utils/helpers';
 
@@ -65,7 +65,7 @@ function NotchedOutline(props) {
         [`padding${capitalize(align)}`]: 8 + (notched ? 0 : labelWidth / 2),
         ...style,
       }}
-      className={classNames(classes.root, className)}
+      className={clsx(classes.root, className)}
       {...other}
     >
       <legend
diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
index 7dc4eb3f4b08c8..0ba6780e35ee36 100644
--- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js
+++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import InputBase from '../InputBase';
 import NotchedOutline from './NotchedOutline';
@@ -100,7 +100,7 @@ function OutlinedInput(props) {
       )}
       classes={{
         ...classes,
-        root: classNames(classes.root, classes.underline),
+        root: clsx(classes.root, classes.underline),
         notchedOutline: null,
       }}
       {...other}
diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js
index f0860b51e20c7c..6cced908516b25 100644
--- a/packages/material-ui/src/Paper/Paper.js
+++ b/packages/material-ui/src/Paper/Paper.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import warning from 'warning';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
@@ -41,7 +41,7 @@ const Paper = React.forwardRef(function Paper(props, ref) {
     `Material-UI: this elevation \`${elevation}\` is not implemented.`,
   );
 
-  const className = classNames(
+  const className = clsx(
     classes.root,
     classes[`elevation${elevation}`],
     {
diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index fa0a082f9e37bf..9a160a1bdd63f2 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SwitchBase from '../internal/SwitchBase';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
@@ -45,7 +45,7 @@ function Radio(props) {
       icon={<RadioButtonUncheckedIcon />}
       checkedIcon={<RadioButtonCheckedIcon />}
       classes={{
-        root: classNames(classes.root, classes[`color${capitalize(color)}`]),
+        root: clsx(classes.root, classes[`color${capitalize(color)}`]),
         checked: classes.checked,
         disabled: classes.disabled,
       }}
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index 853272250e6fe8..241052b6a0eac5 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import warning from 'warning';
 import { componentPropType } from '@material-ui/utils';
 import Menu from '../Menu/Menu';
@@ -274,7 +274,7 @@ class SelectInput extends React.Component {
     return (
       <div className={classes.root}>
         <div
-          className={classNames(
+          className={clsx(
             classes.select,
             classes.selectMenu,
             {
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 17a949acca0d12..5c4ecad835865c 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import EventListener from 'react-event-listener';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
@@ -233,7 +233,7 @@ class Snackbar extends React.Component {
     return (
       <ClickAwayListener onClickAway={this.handleClickAway} {...ClickAwayListenerProps}>
         <div
-          className={classNames(
+          className={clsx(
             classes.root,
             classes[`anchorOrigin${capitalize(vertical)}${capitalize(horizontal)}`],
             className,
diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js
index b1e6a33b31222e..b48df8e89a70b8 100644
--- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js
+++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import Paper from '../Paper';
 import Typography from '../Typography';
@@ -58,7 +58,7 @@ function SnackbarContent(props) {
       role="alertdialog"
       square
       elevation={6}
-      className={classNames(classes.root, className)}
+      className={clsx(classes.root, className)}
       {...other}
     >
       <div className={classes.message}>{message}</div>
diff --git a/packages/material-ui/src/Step/Step.js b/packages/material-ui/src/Step/Step.js
index a382245d18b03c..5adc81db86b6b2 100644
--- a/packages/material-ui/src/Step/Step.js
+++ b/packages/material-ui/src/Step/Step.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import warning from 'warning';
 import withStyles from '../styles/withStyles';
 
@@ -45,7 +45,7 @@ function Step(props) {
     ...other
   } = props;
 
-  const className = classNames(
+  const className = clsx(
     classes.root,
     classes[orientation],
     {
diff --git a/packages/material-ui/src/StepButton/StepButton.js b/packages/material-ui/src/StepButton/StepButton.js
index 2ec881c644cb5d..7422913f5c5c3c 100644
--- a/packages/material-ui/src/StepButton/StepButton.js
+++ b/packages/material-ui/src/StepButton/StepButton.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
 import StepLabel from '../StepLabel';
@@ -63,7 +63,7 @@ function StepButton(props) {
     <ButtonBase
       disabled={disabled}
       TouchRippleProps={{ className: classes.touchRipple }}
-      className={classNames(classes.root, classes[orientation], classNameProp)}
+      className={clsx(classes.root, classes[orientation], classNameProp)}
       {...other}
     >
       {child}
diff --git a/packages/material-ui/src/StepConnector/StepConnector.js b/packages/material-ui/src/StepConnector/StepConnector.js
index acee00dfea4e00..cb56aaead08c8d 100644
--- a/packages/material-ui/src/StepConnector/StepConnector.js
+++ b/packages/material-ui/src/StepConnector/StepConnector.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
@@ -61,7 +61,7 @@ function StepConnector(props) {
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         classes.root,
         classes[orientation],
         {
@@ -75,7 +75,7 @@ function StepConnector(props) {
       {...other}
     >
       <span
-        className={classNames(classes.line, {
+        className={clsx(classes.line, {
           [classes.lineHorizontal]: orientation === 'horizontal',
           [classes.lineVertical]: orientation === 'vertical',
         })}
diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js
index d93afac7af7d83..50afcf324338b2 100644
--- a/packages/material-ui/src/StepContent/StepContent.js
+++ b/packages/material-ui/src/StepContent/StepContent.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import Collapse from '../Collapse';
 import withStyles from '../styles/withStyles';
@@ -54,7 +54,7 @@ function StepContent(props) {
   }
 
   return (
-    <div className={classNames(classes.root, { [classes.last]: last }, className)} {...other}>
+    <div className={clsx(classes.root, { [classes.last]: last }, className)} {...other}>
       <TransitionComponent
         in={active}
         className={classes.transition}
diff --git a/packages/material-ui/src/StepIcon/StepIcon.js b/packages/material-ui/src/StepIcon/StepIcon.js
index 19cfa0b6638a4c..8491cb9bb34914 100644
--- a/packages/material-ui/src/StepIcon/StepIcon.js
+++ b/packages/material-ui/src/StepIcon/StepIcon.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import CheckCircle from '../internal/svg-icons/CheckCircle';
 import Warning from '../internal/svg-icons/Warning';
 import withStyles from '../styles/withStyles';
@@ -40,14 +40,14 @@ function StepIcon(props) {
 
   if (typeof icon === 'number' || typeof icon === 'string') {
     if (error) {
-      return <Warning className={classNames(classes.root, classes.error)} />;
+      return <Warning className={clsx(classes.root, classes.error)} />;
     }
     if (completed) {
-      return <CheckCircle className={classNames(classes.root, classes.completed)} />;
+      return <CheckCircle className={clsx(classes.root, classes.completed)} />;
     }
     return (
       <SvgIcon
-        className={classNames(classes.root, {
+        className={clsx(classes.root, {
           [classes.active]: active,
         })}
       >
diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js
index 2b484434047bb1..895b41443e3c67 100644
--- a/packages/material-ui/src/StepLabel/StepLabel.js
+++ b/packages/material-ui/src/StepLabel/StepLabel.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
@@ -93,7 +93,7 @@ function StepLabel(props) {
 
   return (
     <span
-      className={classNames(
+      className={clsx(
         classes.root,
         classes[orientation],
         {
@@ -107,7 +107,7 @@ function StepLabel(props) {
     >
       {icon || StepIconComponent ? (
         <span
-          className={classNames(classes.iconContainer, {
+          className={clsx(classes.iconContainer, {
             [classes.alternativeLabel]: alternativeLabel,
           })}
         >
@@ -123,7 +123,7 @@ function StepLabel(props) {
       <span className={classes.labelContainer}>
         <Typography
           component="span"
-          className={classNames(classes.label, {
+          className={clsx(classes.label, {
             [classes.alternativeLabel]: alternativeLabel,
             [classes.completed]: completed,
             [classes.active]: active,
diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js
index 1f1e225e1cbdd4..a0130ce0b4dd95 100644
--- a/packages/material-ui/src/Stepper/Stepper.js
+++ b/packages/material-ui/src/Stepper/Stepper.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import Paper from '../Paper';
 import StepConnector from '../StepConnector';
@@ -41,7 +41,7 @@ function Stepper(props) {
     ...other
   } = props;
 
-  const className = classNames(
+  const className = clsx(
     classes.root,
     classes[orientation],
     {
diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js
index 627b7d0aa3becf..1ef1ad590e9984 100644
--- a/packages/material-ui/src/SvgIcon/SvgIcon.js
+++ b/packages/material-ui/src/SvgIcon/SvgIcon.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
@@ -69,7 +69,7 @@ function SvgIcon(props) {
 
   return (
     <Component
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes[`color${capitalize(color)}`]]: color !== 'inherit',
diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeArea.js b/packages/material-ui/src/SwipeableDrawer/SwipeArea.js
index 7dd81c93237970..f098bc528790e7 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeArea.js
+++ b/packages/material-ui/src/SwipeableDrawer/SwipeArea.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 import { isHorizontal } from '../Drawer/Drawer';
@@ -40,7 +40,7 @@ function SwipeArea(props) {
 
   return (
     <div
-      className={classNames(classes.root, classes[`anchor${capitalize(anchor)}`], className)}
+      className={clsx(classes.root, classes[`anchor${capitalize(anchor)}`], className)}
       style={{
         [isHorizontal(props) ? 'width' : 'height']: width,
       }}
diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index b7436b556495c3..493670bceb703f 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 import SwitchBase from '../internal/SwitchBase';
@@ -104,16 +104,16 @@ function Switch(props) {
   const { classes, className, color, ...other } = props;
 
   return (
-    <span className={classNames(classes.root, className)}>
+    <span className={clsx(classes.root, className)}>
       <SwitchBase
         type="checkbox"
         icon={<span className={classes.icon} />}
         classes={{
-          root: classNames(classes.switchBase, classes[`color${capitalize(color)}`]),
+          root: clsx(classes.switchBase, classes[`color${capitalize(color)}`]),
           checked: classes.checked,
           disabled: classes.disabled,
         }}
-        checkedIcon={<span className={classNames(classes.icon, classes.iconChecked)} />}
+        checkedIcon={<span className={clsx(classes.icon, classes.iconChecked)} />}
         {...other}
       />
       <span className={classes.bar} />
diff --git a/packages/material-ui/src/Switch/Switch.test.js b/packages/material-ui/src/Switch/Switch.test.js
index df755f97e2bb4b..cc764622e4322c 100644
--- a/packages/material-ui/src/Switch/Switch.test.js
+++ b/packages/material-ui/src/Switch/Switch.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { assert } from 'chai';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createShallow, getClasses } from '@material-ui/core/test-utils';
 import SwitchBase from '../internal/SwitchBase';
 import Switch from './Switch';
@@ -43,7 +43,7 @@ describe('<Switch />', () => {
       assert.strictEqual(switchBase.props().checkedIcon.type, 'span');
       assert.strictEqual(
         switchBase.props().checkedIcon.props.className,
-        classNames(classes.icon, classes.iconChecked),
+        clsx(classes.icon, classes.iconChecked),
       );
     });
 
diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js
index d9fdd1b765deed..b79b4ba9cb7bb0 100644
--- a/packages/material-ui/src/Tab/Tab.js
+++ b/packages/material-ui/src/Tab/Tab.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
 import { capitalize } from '../utils/helpers';
@@ -165,7 +165,7 @@ class Tab extends React.Component {
       label = (
         <span className={classes.labelContainer}>
           <span
-            className={classNames(classes.label, {
+            className={clsx(classes.label, {
               [classes.labelWrapped]: this.state.labelWrapped,
             })}
             ref={ref => {
@@ -181,7 +181,7 @@ class Tab extends React.Component {
     return (
       <ButtonBase
         focusRipple
-        className={classNames(
+        className={clsx(
           classes.root,
           classes[`textColor${capitalize(textColor)}`],
           {
diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js
index c27a1df12677aa..c4d08a43e6db0f 100644
--- a/packages/material-ui/src/Table/Table.js
+++ b/packages/material-ui/src/Table/Table.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import TableContext from './TableContext';
@@ -40,7 +40,7 @@ class Table extends React.Component {
 
     return (
       <TableContext.Provider value={this.useMemo({ padding })}>
-        <Component className={classNames(classes.root, className)} {...other} />
+        <Component className={clsx(classes.root, className)} {...other} />
       </TableContext.Provider>
     );
   }
diff --git a/packages/material-ui/src/TableBody/TableBody.js b/packages/material-ui/src/TableBody/TableBody.js
index 95b733cd303c67..3958b917c0906f 100644
--- a/packages/material-ui/src/TableBody/TableBody.js
+++ b/packages/material-ui/src/TableBody/TableBody.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
@@ -19,7 +19,7 @@ function TableBody(props) {
 
   return (
     <Tablelvl2Context.Provider value={contextValue}>
-      <Component className={classNames(classes.root, className)} {...other} />
+      <Component className={clsx(classes.root, className)} {...other} />
     </Tablelvl2Context.Provider>
   );
 }
diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
index bca1c96c5bf4b5..c3ce3664aa0f1a 100644
--- a/packages/material-ui/src/TableCell/TableCell.js
+++ b/packages/material-ui/src/TableCell/TableCell.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
@@ -121,7 +121,7 @@ function TableCell(props) {
             }
             const padding = paddingProp || (table && table.padding ? table.padding : 'default');
 
-            const className = classNames(
+            const className = clsx(
               classes.root,
               {
                 [classes.head]: variant
diff --git a/packages/material-ui/src/TableFooter/TableFooter.js b/packages/material-ui/src/TableFooter/TableFooter.js
index ad59493abbc23b..a7d71d377af6b1 100644
--- a/packages/material-ui/src/TableFooter/TableFooter.js
+++ b/packages/material-ui/src/TableFooter/TableFooter.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
@@ -19,7 +19,7 @@ function TableFooter(props) {
 
   return (
     <Tablelvl2Context.Provider value={contextValue}>
-      <Component className={classNames(classes.root, className)} {...other} />
+      <Component className={clsx(classes.root, className)} {...other} />
     </Tablelvl2Context.Provider>
   );
 }
diff --git a/packages/material-ui/src/TableHead/TableHead.js b/packages/material-ui/src/TableHead/TableHead.js
index 69ef279503496d..89f69b0fc51e92 100644
--- a/packages/material-ui/src/TableHead/TableHead.js
+++ b/packages/material-ui/src/TableHead/TableHead.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
@@ -19,7 +19,7 @@ function TableHead(props) {
 
   return (
     <Tablelvl2Context.Provider value={contextValue}>
-      <Component className={classNames(classes.root, className)} {...other} />
+      <Component className={clsx(classes.root, className)} {...other} />
     </Tablelvl2Context.Provider>
   );
 }
diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js
index 404949601f3866..933b260ea19f4b 100644
--- a/packages/material-ui/src/TableRow/TableRow.js
+++ b/packages/material-ui/src/TableRow/TableRow.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
@@ -58,7 +58,7 @@ function TableRow(props) {
   return (
     <Tablelvl2Context.Consumer>
       {tablelvl2 => {
-        const className = classNames(
+        const className = clsx(
           classes.root,
           {
             [classes.head]: tablelvl2 && tablelvl2.variant === 'head',
diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js
index 52378f34fa0973..f912273b5fe641 100644
--- a/packages/material-ui/src/TableSortLabel/TableSortLabel.js
+++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward';
 import withStyles from '../styles/withStyles';
@@ -70,7 +70,7 @@ function TableSortLabel(props) {
 
   return (
     <ButtonBase
-      className={classNames(classes.root, { [classes.active]: active }, className)}
+      className={clsx(classes.root, { [classes.active]: active }, className)}
       component="span"
       disableRipple
       {...other}
@@ -78,7 +78,7 @@ function TableSortLabel(props) {
       {children}
       {hideSortIcon && !active ? null : (
         <IconComponent
-          className={classNames(classes.icon, classes[`iconDirection${capitalize(direction)}`])}
+          className={clsx(classes.icon, classes[`iconDirection${capitalize(direction)}`])}
         />
       )}
     </ButtonBase>
diff --git a/packages/material-ui/src/Tabs/TabIndicator.js b/packages/material-ui/src/Tabs/TabIndicator.js
index 99297c511e11f4..8ac248e9cf9889 100644
--- a/packages/material-ui/src/Tabs/TabIndicator.js
+++ b/packages/material-ui/src/Tabs/TabIndicator.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 
@@ -31,7 +31,7 @@ function TabIndicator(props) {
 
   return (
     <span
-      className={classNames(classes.root, classes[`color${capitalize(color)}`], className)}
+      className={clsx(classes.root, classes[`color${capitalize(color)}`], className)}
       {...other}
     />
   );
diff --git a/packages/material-ui/src/Tabs/TabScrollButton.js b/packages/material-ui/src/Tabs/TabScrollButton.js
index 95d2e4ece97e82..9e9ac76e56bef4 100644
--- a/packages/material-ui/src/Tabs/TabScrollButton.js
+++ b/packages/material-ui/src/Tabs/TabScrollButton.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import withStyles from '../styles/withStyles';
@@ -21,7 +21,7 @@ export const styles = {
 function TabScrollButton(props) {
   const { classes, className: classNameProp, direction, onClick, visible, ...other } = props;
 
-  const className = classNames(classes.root, classNameProp);
+  const className = clsx(classes.root, classNameProp);
 
   if (!visible) {
     return <div className={className} />;
diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
index 9b38d814c59b8e..e36dfae31898e4 100644
--- a/packages/material-ui/src/Tabs/Tabs.js
+++ b/packages/material-ui/src/Tabs/Tabs.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import EventListener from 'react-event-listener';
 import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import { getNormalizedScrollLeft, detectScrollType } from 'normalize-scroll-left';
@@ -135,7 +135,7 @@ class Tabs extends React.Component {
         direction={theme && theme.direction === 'rtl' ? 'right' : 'left'}
         onClick={this.handleLeftScrollClick}
         visible={this.state.showLeftScroll}
-        className={classNames(classes.scrollButtons, {
+        className={clsx(classes.scrollButtons, {
           [classes.scrollButtonsAuto]: scrollButtons === 'auto',
         })}
       />
@@ -146,7 +146,7 @@ class Tabs extends React.Component {
         direction={theme && theme.direction === 'rtl' ? 'left' : 'right'}
         onClick={this.handleRightScrollClick}
         visible={this.state.showRightScroll}
-        className={classNames(classes.scrollButtons, {
+        className={clsx(classes.scrollButtons, {
           [classes.scrollButtonsAuto]: scrollButtons === 'auto',
         })}
       />
@@ -327,11 +327,11 @@ class Tabs extends React.Component {
         'at the same time on a `Tabs` component.',
     );
 
-    const className = classNames(classes.root, classNameProp);
-    const flexContainerClassName = classNames(classes.flexContainer, {
+    const className = clsx(classes.root, classNameProp);
+    const flexContainerClassName = clsx(classes.flexContainer, {
       [classes.centered]: centered && !scrollable,
     });
-    const scrollerClassName = classNames(classes.scroller, {
+    const scrollerClassName = clsx(classes.scroller, {
       [classes.fixed]: !scrollable,
       [classes.scrollable]: scrollable,
     });
diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js
index 1527f5599f6b92..1985a2bc959357 100644
--- a/packages/material-ui/src/TextField/TextField.js
+++ b/packages/material-ui/src/TextField/TextField.js
@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import warning from 'warning';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Input from '../Input';
 import FilledInput from '../FilledInput';
 import OutlinedInput from '../OutlinedInput';
@@ -145,7 +145,7 @@ class TextField extends React.Component {
 
     return (
       <FormControl
-        className={classNames(classes.root, classNameProp)}
+        className={clsx(classes.root, classNameProp)}
         error={error}
         fullWidth={fullWidth}
         required={required}
diff --git a/packages/material-ui/src/Toolbar/Toolbar.js b/packages/material-ui/src/Toolbar/Toolbar.js
index 2fa6acd521e18e..30075a580d1ebf 100644
--- a/packages/material-ui/src/Toolbar/Toolbar.js
+++ b/packages/material-ui/src/Toolbar/Toolbar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
@@ -23,7 +23,7 @@ export const styles = theme => ({
 function Toolbar(props) {
   const { children, classes, className: classNameProp, disableGutters, variant, ...other } = props;
 
-  const className = classNames(
+  const className = clsx(
     classes.root,
     classes[variant],
     {
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 5d1ceb604886c0..e35d449f3a54d6 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import RootRef from '../RootRef';
 import withStyles from '../styles/withStyles';
@@ -297,7 +297,7 @@ class Tooltip extends React.Component {
       title: shouldShowNativeTitle && typeof title === 'string' ? title : null,
       ...other,
       ...children.props,
-      className: classNames(other.className, children.props.className),
+      className: clsx(other.className, children.props.className),
     };
 
     if (!disableTouchListener) {
@@ -336,7 +336,7 @@ class Tooltip extends React.Component {
       <React.Fragment>
         <RootRef rootRef={this.onRootRef}>{React.cloneElement(children, childrenProps)}</RootRef>
         <Popper
-          className={classNames(classes.popper, {
+          className={clsx(classes.popper, {
             [classes.popperInteractive]: interactive,
           })}
           placement={placement}
@@ -354,7 +354,7 @@ class Tooltip extends React.Component {
               {...TransitionProps}
             >
               <div
-                className={classNames(
+                className={clsx(
                   classes.tooltip,
                   {
                     [classes.touch]: this.ignoreNonTouchEvents,
diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js
index a60a69f3f7f09f..1cfde687c80b49 100644
--- a/packages/material-ui/src/Typography/Typography.js
+++ b/packages/material-ui/src/Typography/Typography.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { componentPropType, chainPropTypes } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
@@ -184,7 +184,7 @@ function Typography(props) {
   } = props;
 
   const variant = getVariant(theme, variantProp);
-  const className = classNames(
+  const className = clsx(
     classes.root,
     {
       [classes[variant]]: variant !== 'inherit',
diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js
index 4f5b2c8415e124..30f6f0edc772cd 100644
--- a/packages/material-ui/src/internal/SwitchBase.js
+++ b/packages/material-ui/src/internal/SwitchBase.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import withFormControlContext from '../FormControl/withFormControlContext';
 import withStyles from '../styles/withStyles';
 import IconButton from '../IconButton';
@@ -120,7 +120,7 @@ class SwitchBase extends React.Component {
     return (
       <IconButton
         component="span"
-        className={classNames(
+        className={clsx(
           classes.root,
           {
             [classes.checked]: checked,
diff --git a/packages/material-ui/src/utils/reactHelpers.js b/packages/material-ui/src/utils/reactHelpers.js
index 1cb6595b1aded1..a63e15c9b27abd 100644
--- a/packages/material-ui/src/utils/reactHelpers.js
+++ b/packages/material-ui/src/utils/reactHelpers.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export function cloneElementWithClassName(child, className) {
   return React.cloneElement(child, {
-    className: classNames(child.props.className, className),
+    className: clsx(child.props.className, className),
   });
 }
 
diff --git a/test/regressions/tests/Input/Inputs.js b/test/regressions/tests/Input/Inputs.js
index bd21fc2df06b8b..05fc08b00876c9 100644
--- a/test/regressions/tests/Input/Inputs.js
+++ b/test/regressions/tests/Input/Inputs.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Input from '@material-ui/core/Input';
 
@@ -41,7 +41,7 @@ class Inputs extends React.Component {
             className={classes.input}
           />
         </div>
-        <Input value="Large input" className={classNames(classes.input, classes.large)} />
+        <Input value="Large input" className={clsx(classes.input, classes.large)} />
       </div>
     );
   }
diff --git a/test/regressions/tests/SpeedDial/Directions.js b/test/regressions/tests/SpeedDial/Directions.js
index 7ef39f0ec4011a..4d3187c4b0f805 100644
--- a/test/regressions/tests/SpeedDial/Directions.js
+++ b/test/regressions/tests/SpeedDial/Directions.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Avatar from '@material-ui/core/Avatar';
@@ -69,7 +69,7 @@ SimpleSpeedDial.propTypes = {
 
 function Directions({ classes }) {
   const speedDialClassName = direction =>
-    classNames(classes.speedDial, classes[`direction${capitalize(direction)}`]);
+    clsx(classes.speedDial, classes[`direction${capitalize(direction)}`]);
 
   return (
     <div className={classes.root}>
diff --git a/yarn.lock b/yarn.lock
index 77b23eeb280e3c..4f778846c344b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1692,11 +1692,6 @@
   resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.10.tgz#780d552467824be4a241b29510a7873a7432c4a6"
   integrity sha512-fOM/Jhv51iyugY7KOBZz2ThfT1gwvsGCfWxpLpZDgkGjpEO4Le9cld07OdskikLjDUQJ43dzDaVRSFwQlpdqVg==
 
-"@types/classnames@^2.2.6":
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd"
-  integrity sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg==
-
 "@types/enzyme@^3.1.4":
   version "3.1.16"
   resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.1.16.tgz#b29e1d7148e4e15a773a9b9f2149ea4c42d3a91d"
@@ -4294,6 +4289,11 @@ clsx@^1.0.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.2.tgz#2e0d63a900d7fe33218d7a53dee9e3a0c7300e1d"
   integrity sha512-NQZV7ri2Gfufu9q1P9JDV4MHhdJvUukOadjAoN12pK37P12nrYp/mC05BSoekv0KX/5hGHAe2WQeOlhaWhXC5Q==
 
+clsx@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.2.tgz#2e0d63a900d7fe33218d7a53dee9e3a0c7300e1d"
+  integrity sha512-NQZV7ri2Gfufu9q1P9JDV4MHhdJvUukOadjAoN12pK37P12nrYp/mC05BSoekv0KX/5hGHAe2WQeOlhaWhXC5Q==
+
 cmd-shim@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-2.0.2.tgz#6fcbda99483a8fd15d7d30a196ca69d688a2efdb"