From 5032c39bca8c14662d31e027a94de8185bc40d91 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 18:32:54 +0200
Subject: [PATCH 01/16] [docs] Prefer export default

---
 docs/pages/_document.js                        |  4 +---
 .../onepirate/forgot-password.js               |  4 +---
 docs/pages/premium-themes/onepirate/index.js   |  4 +---
 docs/pages/premium-themes/onepirate/privacy.js |  4 +---
 docs/pages/premium-themes/onepirate/sign-in.js |  4 +---
 docs/pages/premium-themes/onepirate/sign-up.js |  4 +---
 docs/pages/premium-themes/onepirate/terms.js   |  4 +---
 docs/pages/premium-themes/paperbase/index.js   |  4 +---
 .../components/css-baseline/css-baseline.md    |  4 +---
 .../interoperability/StyledComponentsTheme.js  |  4 +---
 docs/src/pages/styles/advanced/advanced.md     | 18 +++++-------------
 docs/src/pages/styles/api/api.md               |  4 +---
 docs/src/pages/system/basics/basics.md         |  4 +---
 13 files changed, 17 insertions(+), 49 deletions(-)

diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 32f3e01dd39d80..7a7213b793dd21 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -28,7 +28,7 @@ if (process.env.NODE_ENV === 'production') {
 
 const GOOGLE_ID = process.env.NODE_ENV === 'production' ? 'UA-106598593-2' : 'UA-106598593-3';
 
-class MyDocument extends Document {
+export default class MyDocument extends Document {
   render() {
     const { canonical, userLanguage } = this.props;
 
@@ -152,5 +152,3 @@ MyDocument.getInitialProps = async ctx => {
     ),
   };
 };
-
-export default MyDocument;
diff --git a/docs/pages/premium-themes/onepirate/forgot-password.js b/docs/pages/premium-themes/onepirate/forgot-password.js
index 84e9e06b0be2f8..d6218c4590af98 100644
--- a/docs/pages/premium-themes/onepirate/forgot-password.js
+++ b/docs/pages/premium-themes/onepirate/forgot-password.js
@@ -2,12 +2,10 @@ import React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
 import ForgotPassword from 'docs/src/pages/premium-themes/onepirate/ForgotPassword';
 
-function Page() {
+export default function Page() {
   return (
     <AppTheme title="Onepirate theme - Material-UI" description="A onepirate theme">
       <ForgotPassword />
     </AppTheme>
   );
 }
-
-export default Page;
diff --git a/docs/pages/premium-themes/onepirate/index.js b/docs/pages/premium-themes/onepirate/index.js
index 32c45e6209d5a1..c1bfb4e3f89315 100644
--- a/docs/pages/premium-themes/onepirate/index.js
+++ b/docs/pages/premium-themes/onepirate/index.js
@@ -2,12 +2,10 @@ import React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
 import Home from 'docs/src/pages/premium-themes/onepirate/Home';
 
-function Page() {
+export default function Page() {
   return (
     <AppTheme title="Onepirate theme - Material-UI" description="A onepirate theme">
       <Home />
     </AppTheme>
   );
 }
-
-export default Page;
diff --git a/docs/pages/premium-themes/onepirate/privacy.js b/docs/pages/premium-themes/onepirate/privacy.js
index f76cd94f0cbf46..5b3749da5545b1 100644
--- a/docs/pages/premium-themes/onepirate/privacy.js
+++ b/docs/pages/premium-themes/onepirate/privacy.js
@@ -2,12 +2,10 @@ import React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
 import Privacy from 'docs/src/pages/premium-themes/onepirate/Privacy';
 
-function Page() {
+export default function Page() {
   return (
     <AppTheme title="Onepirate theme - Material-UI" description="A onepirate theme">
       <Privacy />
     </AppTheme>
   );
 }
-
-export default Page;
diff --git a/docs/pages/premium-themes/onepirate/sign-in.js b/docs/pages/premium-themes/onepirate/sign-in.js
index 4f7f0925568844..0c6aedbe08144a 100644
--- a/docs/pages/premium-themes/onepirate/sign-in.js
+++ b/docs/pages/premium-themes/onepirate/sign-in.js
@@ -2,12 +2,10 @@ import React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
 import SignIn from 'docs/src/pages/premium-themes/onepirate/SignIn';
 
-function Page() {
+export default function Page() {
   return (
     <AppTheme title="Onepirate theme - Material-UI" description="A onepirate theme">
       <SignIn />
     </AppTheme>
   );
 }
-
-export default Page;
diff --git a/docs/pages/premium-themes/onepirate/sign-up.js b/docs/pages/premium-themes/onepirate/sign-up.js
index 2d2c181e120963..9ba6200b37622a 100644
--- a/docs/pages/premium-themes/onepirate/sign-up.js
+++ b/docs/pages/premium-themes/onepirate/sign-up.js
@@ -2,12 +2,10 @@ import React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
 import SignUp from 'docs/src/pages/premium-themes/onepirate/SignUp';
 
-function Page() {
+export default function Page() {
   return (
     <AppTheme title="Onepirate theme - Material-UI" description="A onepirate theme">
       <SignUp />
     </AppTheme>
   );
 }
-
-export default Page;
diff --git a/docs/pages/premium-themes/onepirate/terms.js b/docs/pages/premium-themes/onepirate/terms.js
index 2370a606cd15e4..a3a1fcbecd6ee1 100644
--- a/docs/pages/premium-themes/onepirate/terms.js
+++ b/docs/pages/premium-themes/onepirate/terms.js
@@ -2,12 +2,10 @@ import React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
 import Terms from 'docs/src/pages/premium-themes/onepirate/Terms';
 
-function Page() {
+export default function Page() {
   return (
     <AppTheme title="Onepirate theme - Material-UI" description="A onepirate theme">
       <Terms />
     </AppTheme>
   );
 }
-
-export default Page;
diff --git a/docs/pages/premium-themes/paperbase/index.js b/docs/pages/premium-themes/paperbase/index.js
index fd0cd393c399b0..f4401b54033083 100644
--- a/docs/pages/premium-themes/paperbase/index.js
+++ b/docs/pages/premium-themes/paperbase/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
 import Paperbase from 'docs/src/pages/premium-themes/paperbase/Paperbase';
 
-function Page() {
+export default function Page() {
   return (
     <AppTheme
       title="Paperbase theme - Material-UI"
@@ -13,5 +13,3 @@ function Page() {
     </AppTheme>
   );
 }
-
-export default Page;
diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md
index c9d881ccec54e9..0533b6ffdfd9e7 100644
--- a/docs/src/pages/components/css-baseline/css-baseline.md
+++ b/docs/src/pages/components/css-baseline/css-baseline.md
@@ -12,7 +12,7 @@ You might be familiar with [normalize.css](https://github.com/necolas/normalize.
 import React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
 
-function MyApp() {
+export default function MyApp() {
   return (
     <React.Fragment>
       <CssBaseline />
@@ -20,8 +20,6 @@ function MyApp() {
     </React.Fragment>
   );
 }
-
-export default MyApp;
 ```
 
 ## Approach
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
index 72fd50c2483891..b4a8f9fdf8ef0c 100644
--- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
+++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
@@ -44,7 +44,7 @@ const StyledButton = styled.button`
   }
 `;
 
-function StyledComponentsTheme() {
+export default function StyledComponentsTheme() {
   return (
     <NoSsr>
       <ThemeProvider theme={defaultTheme}>
@@ -53,5 +53,3 @@ function StyledComponentsTheme() {
     </NoSsr>
   );
 }
-
-export default StyledComponentsTheme;
diff --git a/docs/src/pages/styles/advanced/advanced.md b/docs/src/pages/styles/advanced/advanced.md
index a37fca73d401cd..2086023aee8fac 100644
--- a/docs/src/pages/styles/advanced/advanced.md
+++ b/docs/src/pages/styles/advanced/advanced.md
@@ -196,15 +196,13 @@ const jss = create({
   plugins: [...jssPreset().plugins, rtl()],
 });
 
-function App() {
+export default function App() {
   return (
     <StylesProvider jss={jss}>
       ...
     </StylesProvider>
   );
 }
-
-export default App;
 ```
 
 ## String templates
@@ -313,11 +311,9 @@ const jss = create({
   insertionPoint: 'jss-insertion-point',
 });
 
-function App() {
+export default function App() {
   return <StylesProvider jss={jss}>...</StylesProvider>;
 }
-
-export default App;
 ```
 
 #### Other HTML elements
@@ -342,11 +338,9 @@ const jss = create({
   insertionPoint: document.getElementById('jss-insertion-point'),
 });
 
-function App() {
+export default function App() {
   return <StylesProvider jss={jss}>...</StylesProvider>;
 }
-
-export default App;
 ```
 
 #### JS createComment
@@ -367,11 +361,9 @@ const jss = create({
   insertionPoint: 'jss-insertion-point',
 });
 
-function App() {
+export default function App() {
   return <StylesProvider jss={jss}>...</StylesProvider>;
 }
-
-export default App;
 ```
 
 ## Server-side rendering
@@ -591,7 +583,7 @@ If you are using Server-Side Rendering (SSR), you should pass the nonce in the `
 />
 ```
 
-Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` tags.  
+Then, you must pass this nonce to JSS so it can add it to subsequent `<style>` tags.
 
 The way that you do this is by passing a `<meta property="csp-nonce" content={nonce} />` tag in the `<head>` of your HTML.  JSS will then, by convention, look for a `<meta property="csp-nonce"` tag and use the `content` value as the nonce.
 
diff --git a/docs/src/pages/styles/api/api.md b/docs/src/pages/styles/api/api.md
index 3a3bb75f53ecde..e5dddbc8f4c4eb 100644
--- a/docs/src/pages/styles/api/api.md
+++ b/docs/src/pages/styles/api/api.md
@@ -59,12 +59,10 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
   },
 }));
 
-function MyComponent {
+export default function MyComponent {
   const classes = useStyles();
   return <div className={classes.root} />;
 }
-
-export default MyComponent;
 ```
 
 ## `makeStyles(styles, [options]) => hook`
diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md
index 64160ff23d5160..845012908819f0 100644
--- a/docs/src/pages/system/basics/basics.md
+++ b/docs/src/pages/system/basics/basics.md
@@ -73,15 +73,13 @@ const theme = {
   },
 };
 
-function App() {
+export default function App() {
   return (
     <ThemeProvider theme={theme}>
       {/* children */}
     </ThemeProvider>
   )
 }
-
-export default App
 ```
 
 Now, you can provide a spacing multiplier value:

From 23e88833a821b61cd814c7b5007fa299a0cc4df6 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 18:38:08 +0200
Subject: [PATCH 02/16] [docs] Experiment with a different price point

---
 docs/src/pages/getting-started/support/support.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/getting-started/support/support.md b/docs/src/pages/getting-started/support/support.md
index 6992d10e8952a5..8df9e59d93105b 100644
--- a/docs/src/pages/getting-started/support/support.md
+++ b/docs/src/pages/getting-started/support/support.md
@@ -138,6 +138,6 @@ Tweak Material-UI to meet specific requirements. Give us a summary of your needs
 
 Note that work must be Material-UI related.
 We don't accept general React development work.
-Our contracting price is $300/hour or $2,000/day.
+Our contracting price is $300/hour or $1,500/day.
 
 [Send us an email](mailto:custom-work@material-ui.com)

From 98287655d8b9276ac83306ac3ce9c2196d52127c Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 18:39:33 +0200
Subject: [PATCH 03/16] [docs] Add a new backer

---
 docs/src/pages/discover-more/backers/backers.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/discover-more/backers/backers.md b/docs/src/pages/discover-more/backers/backers.md
index 2850cc5cde223b..eb9a8a61254dfe 100644
--- a/docs/src/pages/discover-more/backers/backers.md
+++ b/docs/src/pages/discover-more/backers/backers.md
@@ -73,7 +73,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
 | Antonio Seveso | Ali Akhavan | Bruno Winck | Alessandro Annini | Victor Irzak |
 | Manuel U Grullon | Skaronator | Peter James | Vincz | Micah Davidson |
 | Nelson Batalha | Daniel Woss | Michael Staub | Scott Fortmann-Roe | Markus Wüstenberg |
-| Anthony Mezzolesta | Julien Vallini | Johan Eliasson | Tomasz Szkodziński |
+| Anthony Mezzolesta | Julien Vallini | Johan Eliasson | Tomasz Szkodziński | Joseph Dillman |
 
 via [OpenCollective](https://opencollective.com/material-ui)
 

From 3bb585fe2e00f6c7365c8ba79c441ee3ffc7304e Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 18:43:53 +0200
Subject: [PATCH 04/16] [test] Remove redundant cleanup

---
 packages/material-ui-lab/src/Rating/Rating.test.js       | 6 +-----
 packages/material-ui-lab/src/Skeleton/Skeleton.test.js   | 6 +-----
 packages/material-ui-lab/src/TreeItem/TreeItem.test.js   | 6 +-----
 packages/material-ui-lab/src/TreeView/TreeView.test.js   | 6 +-----
 packages/material-ui/src/Popper/Popper.test.js           | 6 +-----
 packages/material-ui/test/integration/Menu.test.js       | 3 +--
 packages/material-ui/test/integration/MenuList.test.js   | 6 +-----
 packages/material-ui/test/integration/NestedMenu.test.js | 6 +-----
 8 files changed, 8 insertions(+), 37 deletions(-)

diff --git a/packages/material-ui-lab/src/Rating/Rating.test.js b/packages/material-ui-lab/src/Rating/Rating.test.js
index 450205e4716c81..975b29f8acf94b 100644
--- a/packages/material-ui-lab/src/Rating/Rating.test.js
+++ b/packages/material-ui-lab/src/Rating/Rating.test.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { stub } from 'sinon';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import { cleanup, createClientRender, fireEvent } from 'test/utils/createClientRender';
+import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 import Rating from './Rating';
 
 describe('<Rating />', () => {
@@ -20,10 +20,6 @@ describe('<Rating />', () => {
     classes = getClasses(<Rating {...defaultProps} />);
   });
 
-  afterEach(() => {
-    cleanup();
-  });
-
   after(() => {
     mount.cleanUp();
   });
diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.test.js b/packages/material-ui-lab/src/Skeleton/Skeleton.test.js
index ba8e0c5298a192..69c76644c4bcf4 100644
--- a/packages/material-ui-lab/src/Skeleton/Skeleton.test.js
+++ b/packages/material-ui-lab/src/Skeleton/Skeleton.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import { cleanup, createClientRender } from 'test/utils/createClientRender';
+import { createClientRender } from 'test/utils/createClientRender';
 import Skeleton from './Skeleton';
 
 describe('<Skeleton />', () => {
@@ -15,10 +15,6 @@ describe('<Skeleton />', () => {
     classes = getClasses(<Skeleton />);
   });
 
-  afterEach(() => {
-    cleanup();
-  });
-
   after(() => {
     mount.cleanUp();
   });
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
index b56c684e804684..afbd340354de90 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import { cleanup, createClientRender, fireEvent } from 'test/utils/createClientRender';
+import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 import TreeItem from './TreeItem';
 import TreeView from '../TreeView';
 
@@ -13,10 +13,6 @@ describe('<TreeItem />', () => {
   const mount = createMount({ strict: false });
   const classes = getClasses(<TreeItem nodeId="one" label="one" />);
 
-  afterEach(() => {
-    cleanup();
-  });
-
   describeConformance(<TreeItem nodeId="one" label="one" />, () => ({
     classes,
     inheritComponent: 'li',
diff --git a/packages/material-ui-lab/src/TreeView/TreeView.test.js b/packages/material-ui-lab/src/TreeView/TreeView.test.js
index f8f21c74a105bf..e298f9c6b74735 100644
--- a/packages/material-ui-lab/src/TreeView/TreeView.test.js
+++ b/packages/material-ui-lab/src/TreeView/TreeView.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { cleanup, createClientRender, fireEvent } from 'test/utils/createClientRender';
+import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import TreeView from './TreeView';
@@ -12,10 +12,6 @@ describe('<TreeView />', () => {
   const mount = createMount({ strict: false });
   const classes = getClasses(<TreeView />);
 
-  afterEach(() => {
-    cleanup();
-  });
-
   describeConformance(<TreeView />, () => ({
     classes,
     inheritComponent: 'ul',
diff --git a/packages/material-ui/src/Popper/Popper.test.js b/packages/material-ui/src/Popper/Popper.test.js
index 2222ed3bc2f4c6..f6e351d5ce25b2 100644
--- a/packages/material-ui/src/Popper/Popper.test.js
+++ b/packages/material-ui/src/Popper/Popper.test.js
@@ -4,7 +4,7 @@ import { spy, useFakeTimers } from 'sinon';
 import PropTypes from 'prop-types';
 import { createMount } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import { cleanup, createClientRender } from 'test/utils/createClientRender';
+import { createClientRender } from 'test/utils/createClientRender';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import PopperJS from 'popper.js';
 import Grow from '../Grow';
@@ -23,10 +23,6 @@ describe('<Popper />', () => {
     mount = createMount({ strict: true });
   });
 
-  afterEach(() => {
-    cleanup();
-  });
-
   after(() => {
     mount.cleanUp();
   });
diff --git a/packages/material-ui/test/integration/Menu.test.js b/packages/material-ui/test/integration/Menu.test.js
index 504346ed3884c3..a186e49e72c438 100644
--- a/packages/material-ui/test/integration/Menu.test.js
+++ b/packages/material-ui/test/integration/Menu.test.js
@@ -6,7 +6,7 @@ import { useFakeTimers } from 'sinon';
 import Button from '@material-ui/core/Button';
 import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
-import { cleanup, createClientRender, fireEvent } from 'test/utils/createClientRender';
+import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 
 const options = [
   'Show some love to Material-UI',
@@ -83,7 +83,6 @@ describe('<Menu /> integration', () => {
 
   afterEach(() => {
     clock.restore();
-    cleanup();
   });
 
   it('is part of the DOM by default but hidden', () => {
diff --git a/packages/material-ui/test/integration/MenuList.test.js b/packages/material-ui/test/integration/MenuList.test.js
index 724ca7c752e6df..2b582809d4a26f 100644
--- a/packages/material-ui/test/integration/MenuList.test.js
+++ b/packages/material-ui/test/integration/MenuList.test.js
@@ -4,7 +4,7 @@ import { spy } from 'sinon';
 import MenuList from '@material-ui/core/MenuList';
 import MenuItem from '@material-ui/core/MenuItem';
 import Divider from '@material-ui/core/Divider';
-import { createClientRender, fireEvent, cleanup } from 'test/utils/createClientRender';
+import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 
 describe('<MenuList> integration', () => {
   const render = createClientRender({ strict: true });
@@ -15,10 +15,6 @@ describe('<MenuList> integration', () => {
     return;
   }
 
-  afterEach(() => {
-    cleanup();
-  });
-
   specify('the MenuItems have the `menuitem` role', () => {
     const { getAllByRole } = render(
       <MenuList>
diff --git a/packages/material-ui/test/integration/NestedMenu.test.js b/packages/material-ui/test/integration/NestedMenu.test.js
index 510e77fd7e6c1a..592674b103e782 100644
--- a/packages/material-ui/test/integration/NestedMenu.test.js
+++ b/packages/material-ui/test/integration/NestedMenu.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { expect } from 'chai';
-import { cleanup, createClientRender, within } from 'test/utils/createClientRender';
+import { createClientRender, within } from 'test/utils/createClientRender';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 
@@ -41,10 +41,6 @@ describe('<NestedMenu> integration', () => {
   // StrictModeViolation: uses Popover
   const render = createClientRender({ strict: false });
 
-  afterEach(() => {
-    cleanup();
-  });
-
   it('should not be open', () => {
     const { queryAllByRole } = render(<NestedMenu />);
 

From 0ed84e102926c6875135f59ced7b9c16ba417ff5 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 18:45:15 +0200
Subject: [PATCH 05/16] [docs] Simpler copy & paste of the global class names

---
 docs/pages/api/app-bar.md                    | 18 ++--
 docs/pages/api/avatar.md                     |  6 +-
 docs/pages/api/backdrop.md                   |  4 +-
 docs/pages/api/badge.md                      | 30 +++----
 docs/pages/api/bottom-navigation-action.md   | 10 +--
 docs/pages/api/bottom-navigation.md          |  2 +-
 docs/pages/api/breadcrumbs.md                |  8 +-
 docs/pages/api/button-base.md                |  6 +-
 docs/pages/api/button-group.md               | 28 +++---
 docs/pages/api/button.md                     | 56 ++++++------
 docs/pages/api/card-action-area.md           |  6 +-
 docs/pages/api/card-actions.md               |  4 +-
 docs/pages/api/card-content.md               |  2 +-
 docs/pages/api/card-header.md                | 12 +--
 docs/pages/api/card-media.md                 |  6 +-
 docs/pages/api/card.md                       |  2 +-
 docs/pages/api/checkbox.md                   | 12 +--
 docs/pages/api/chip.md                       | 60 ++++++-------
 docs/pages/api/circular-progress.md          | 20 ++---
 docs/pages/api/collapse.md                   | 10 +--
 docs/pages/api/container.md                  | 14 +--
 docs/pages/api/dialog-actions.md             |  4 +-
 docs/pages/api/dialog-content-text.md        |  2 +-
 docs/pages/api/dialog-content.md             |  4 +-
 docs/pages/api/dialog-title.md               |  2 +-
 docs/pages/api/dialog.md                     | 30 +++----
 docs/pages/api/divider.md                    | 12 +--
 docs/pages/api/drawer.md                     | 24 ++---
 docs/pages/api/expansion-panel-actions.md    |  4 +-
 docs/pages/api/expansion-panel-details.md    |  2 +-
 docs/pages/api/expansion-panel-summary.md    | 12 +--
 docs/pages/api/expansion-panel.md            |  8 +-
 docs/pages/api/fab.md                        | 20 ++---
 docs/pages/api/filled-input.md               | 32 +++----
 docs/pages/api/form-control-label.md         | 12 +--
 docs/pages/api/form-control.md               |  8 +-
 docs/pages/api/form-group.md                 |  4 +-
 docs/pages/api/form-helper-text.md           | 16 ++--
 docs/pages/api/form-label.md                 | 14 +--
 docs/pages/api/grid-list-tile-bar.md         | 22 ++---
 docs/pages/api/grid-list-tile.md             |  8 +-
 docs/pages/api/grid-list.md                  |  2 +-
 docs/pages/api/grid.md                       | 94 ++++++++++----------
 docs/pages/api/icon-button.md                | 18 ++--
 docs/pages/api/icon.md                       | 18 ++--
 docs/pages/api/input-adornment.md            | 14 +--
 docs/pages/api/input-base.md                 | 36 ++++----
 docs/pages/api/input-label.md                | 24 ++---
 docs/pages/api/input.md                      | 24 ++---
 docs/pages/api/linear-progress.md            | 36 ++++----
 docs/pages/api/link.md                       | 12 +--
 docs/pages/api/list-item-avatar.md           |  4 +-
 docs/pages/api/list-item-icon.md             |  4 +-
 docs/pages/api/list-item-secondary-action.md |  2 +-
 docs/pages/api/list-item-text.md             | 12 +--
 docs/pages/api/list-item.md                  | 22 ++---
 docs/pages/api/list-subheader.md             | 12 +--
 docs/pages/api/list.md                       |  8 +-
 docs/pages/api/menu-item.md                  |  8 +-
 docs/pages/api/menu.md                       |  4 +-
 docs/pages/api/mobile-stepper.md             | 16 ++--
 docs/pages/api/native-select.md              | 18 ++--
 docs/pages/api/outlined-input.md             | 30 +++----
 docs/pages/api/paper.md                      | 54 +++++------
 docs/pages/api/popover.md                    |  4 +-
 docs/pages/api/radio.md                      | 10 +--
 docs/pages/api/rating.md                     | 32 +++----
 docs/pages/api/select.md                     | 18 ++--
 docs/pages/api/skeleton.md                   | 10 +--
 docs/pages/api/slider.md                     | 40 ++++-----
 docs/pages/api/snackbar-content.md           |  6 +-
 docs/pages/api/snackbar.md                   | 14 +--
 docs/pages/api/speed-dial-action.md          | 14 +--
 docs/pages/api/speed-dial-icon.md            | 12 +--
 docs/pages/api/speed-dial.md                 | 16 ++--
 docs/pages/api/step-button.md                |  8 +-
 docs/pages/api/step-connector.md             | 20 ++---
 docs/pages/api/step-content.md               |  6 +-
 docs/pages/api/step-icon.md                  | 10 +--
 docs/pages/api/step-label.md                 | 22 ++---
 docs/pages/api/step.md                       | 10 +--
 docs/pages/api/stepper.md                    |  8 +-
 docs/pages/api/svg-icon.md                   | 18 ++--
 docs/pages/api/switch.md                     | 24 ++---
 docs/pages/api/tab.md                        | 20 ++---
 docs/pages/api/table-body.md                 |  2 +-
 docs/pages/api/table-cell.md                 | 24 ++---
 docs/pages/api/table-footer.md               |  2 +-
 docs/pages/api/table-head.md                 |  2 +-
 docs/pages/api/table-pagination.md           | 20 ++---
 docs/pages/api/table-row.md                  | 10 +--
 docs/pages/api/table-sort-label.md           | 10 +--
 docs/pages/api/table.md                      |  4 +-
 docs/pages/api/tabs.md                       | 22 ++---
 docs/pages/api/text-field.md                 |  2 +-
 docs/pages/api/toggle-button-group.md        |  8 +-
 docs/pages/api/toggle-button.md              | 12 +--
 docs/pages/api/toolbar.md                    |  8 +-
 docs/pages/api/tooltip.md                    | 16 ++--
 docs/pages/api/tree-item.md                  | 12 +--
 docs/pages/api/tree-view.md                  |  2 +-
 docs/pages/api/typography.md                 | 60 ++++++-------
 docs/src/modules/utils/generateMarkdown.js   |  2 +-
 103 files changed, 784 insertions(+), 784 deletions(-)

diff --git a/docs/pages/api/app-bar.md b/docs/pages/api/app-bar.md
index 8b5ace9d03c4e2..3a1e998ec352ec 100644
--- a/docs/pages/api/app-bar.md
+++ b/docs/pages/api/app-bar.md
@@ -40,15 +40,15 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiAppBar-root</span> | Styles applied to the root element.
-| <span class="prop-name">positionFixed</span> | <span class="prop-name">MuiAppBar-positionFixed</span> | Styles applied to the root element if `position="fixed"`.
-| <span class="prop-name">positionAbsolute</span> | <span class="prop-name">MuiAppBar-positionAbsolute</span> | Styles applied to the root element if `position="absolute"`.
-| <span class="prop-name">positionSticky</span> | <span class="prop-name">MuiAppBar-positionSticky</span> | Styles applied to the root element if `position="sticky"`.
-| <span class="prop-name">positionStatic</span> | <span class="prop-name">MuiAppBar-positionStatic</span> | Styles applied to the root element if `position="static"`.
-| <span class="prop-name">positionRelative</span> | <span class="prop-name">MuiAppBar-positionRelative</span> | Styles applied to the root element if `position="relative"`.
-| <span class="prop-name">colorDefault</span> | <span class="prop-name">MuiAppBar-colorDefault</span> | Styles applied to the root element if `color="default"`.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiAppBar-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiAppBar-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiAppBar-root</span> | Styles applied to the root element.
+| <span class="prop-name">positionFixed</span> | <span class="prop-name">.MuiAppBar-positionFixed</span> | Styles applied to the root element if `position="fixed"`.
+| <span class="prop-name">positionAbsolute</span> | <span class="prop-name">.MuiAppBar-positionAbsolute</span> | Styles applied to the root element if `position="absolute"`.
+| <span class="prop-name">positionSticky</span> | <span class="prop-name">.MuiAppBar-positionSticky</span> | Styles applied to the root element if `position="sticky"`.
+| <span class="prop-name">positionStatic</span> | <span class="prop-name">.MuiAppBar-positionStatic</span> | Styles applied to the root element if `position="static"`.
+| <span class="prop-name">positionRelative</span> | <span class="prop-name">.MuiAppBar-positionRelative</span> | Styles applied to the root element if `position="relative"`.
+| <span class="prop-name">colorDefault</span> | <span class="prop-name">.MuiAppBar-colorDefault</span> | Styles applied to the root element if `color="default"`.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiAppBar-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiAppBar-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/avatar.md b/docs/pages/api/avatar.md
index 55523ef4a0f8d5..7d21d040e13ecb 100644
--- a/docs/pages/api/avatar.md
+++ b/docs/pages/api/avatar.md
@@ -44,9 +44,9 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiAvatar-root</span> | Styles applied to the root element.
-| <span class="prop-name">colorDefault</span> | <span class="prop-name">MuiAvatar-colorDefault</span> | Styles applied to the root element if there are children and not `src` or `srcSet`.
-| <span class="prop-name">img</span> | <span class="prop-name">MuiAvatar-img</span> | Styles applied to the img element if either `src` or `srcSet` is defined.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiAvatar-root</span> | Styles applied to the root element.
+| <span class="prop-name">colorDefault</span> | <span class="prop-name">.MuiAvatar-colorDefault</span> | Styles applied to the root element if there are children and not `src` or `srcSet`.
+| <span class="prop-name">img</span> | <span class="prop-name">.MuiAvatar-img</span> | Styles applied to the img element if either `src` or `srcSet` is defined.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/backdrop.md b/docs/pages/api/backdrop.md
index 9f22580bfbbbdc..2be86c6e5c969f 100644
--- a/docs/pages/api/backdrop.md
+++ b/docs/pages/api/backdrop.md
@@ -41,8 +41,8 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiBackdrop-root</span> | Styles applied to the root element.
-| <span class="prop-name">invisible</span> | <span class="prop-name">MuiBackdrop-invisible</span> | Styles applied to the root element if `invisible={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiBackdrop-root</span> | Styles applied to the root element.
+| <span class="prop-name">invisible</span> | <span class="prop-name">.MuiBackdrop-invisible</span> | Styles applied to the root element if `invisible={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/badge.md b/docs/pages/api/badge.md
index f442727766fe24..2d0cf4337cd398 100644
--- a/docs/pages/api/badge.md
+++ b/docs/pages/api/badge.md
@@ -47,21 +47,21 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiBadge-root</span> | Styles applied to the root element.
-| <span class="prop-name">badge</span> | <span class="prop-name">MuiBadge-badge</span> | Styles applied to the badge `span` element.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiBadge-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiBadge-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
-| <span class="prop-name">colorError</span> | <span class="prop-name">MuiBadge-colorError</span> | Styles applied to the root element if `color="error"`.
-| <span class="prop-name">dot</span> | <span class="prop-name">MuiBadge-dot</span> | Styles applied to the root element if `variant="dot"`.
-| <span class="prop-name">anchorOriginTopRightRectangle</span> | <span class="prop-name">MuiBadge-anchorOriginTopRightRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`.
-| <span class="prop-name">anchorOriginBottomRightRectangle</span> | <span class="prop-name">MuiBadge-anchorOriginBottomRightRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`.
-| <span class="prop-name">anchorOriginTopLeftRectangle</span> | <span class="prop-name">MuiBadge-anchorOriginTopLeftRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`.
-| <span class="prop-name">anchorOriginBottomLeftRectangle</span> | <span class="prop-name">MuiBadge-anchorOriginBottomLeftRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`.
-| <span class="prop-name">anchorOriginTopRightCircle</span> | <span class="prop-name">MuiBadge-anchorOriginTopRightCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`.
-| <span class="prop-name">anchorOriginBottomRightCircle</span> | <span class="prop-name">MuiBadge-anchorOriginBottomRightCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`.
-| <span class="prop-name">anchorOriginTopLeftCircle</span> | <span class="prop-name">MuiBadge-anchorOriginTopLeftCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`.
-| <span class="prop-name">anchorOriginBottomLeftCircle</span> | <span class="prop-name">MuiBadge-anchorOriginBottomLeftCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`.
-| <span class="prop-name">invisible</span> | <span class="prop-name">MuiBadge-invisible</span> | Pseudo-class to the badge `span` element if `invisible={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiBadge-root</span> | Styles applied to the root element.
+| <span class="prop-name">badge</span> | <span class="prop-name">.MuiBadge-badge</span> | Styles applied to the badge `span` element.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiBadge-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiBadge-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">colorError</span> | <span class="prop-name">.MuiBadge-colorError</span> | Styles applied to the root element if `color="error"`.
+| <span class="prop-name">dot</span> | <span class="prop-name">.MuiBadge-dot</span> | Styles applied to the root element if `variant="dot"`.
+| <span class="prop-name">anchorOriginTopRightRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginBottomRightRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginTopLeftRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginBottomLeftRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginTopRightCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginBottomRightCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginTopLeftCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginBottomLeftCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`.
+| <span class="prop-name">invisible</span> | <span class="prop-name">.MuiBadge-invisible</span> | Pseudo-class to the badge `span` element if `invisible={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/bottom-navigation-action.md b/docs/pages/api/bottom-navigation-action.md
index aeec8c40786602..5255c8c3e8cc16 100644
--- a/docs/pages/api/bottom-navigation-action.md
+++ b/docs/pages/api/bottom-navigation-action.md
@@ -42,11 +42,11 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiBottomNavigationAction-root</span> | Styles applied to the root element.
-| <span class="prop-name">selected</span> | <span class="prop-name">Mui-selected</span> | Pseudo-class applied to the root element if selected.
-| <span class="prop-name">iconOnly</span> | <span class="prop-name">MuiBottomNavigationAction-iconOnly</span> | Pseudo-class applied to the root element if `showLabel={false}` and not selected.
-| <span class="prop-name">wrapper</span> | <span class="prop-name">MuiBottomNavigationAction-wrapper</span> | Styles applied to the span element that wraps the icon and label.
-| <span class="prop-name">label</span> | <span class="prop-name">MuiBottomNavigationAction-label</span> | Styles applied to the label's span element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiBottomNavigationAction-root</span> | Styles applied to the root element.
+| <span class="prop-name">selected</span> | <span class="prop-name">.Mui-selected</span> | Pseudo-class applied to the root element if selected.
+| <span class="prop-name">iconOnly</span> | <span class="prop-name">.MuiBottomNavigationAction-iconOnly</span> | Pseudo-class applied to the root element if `showLabel={false}` and not selected.
+| <span class="prop-name">wrapper</span> | <span class="prop-name">.MuiBottomNavigationAction-wrapper</span> | Styles applied to the span element that wraps the icon and label.
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiBottomNavigationAction-label</span> | Styles applied to the label's span element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/bottom-navigation.md b/docs/pages/api/bottom-navigation.md
index d95b77e61d8fd1..fc12d88092764b 100644
--- a/docs/pages/api/bottom-navigation.md
+++ b/docs/pages/api/bottom-navigation.md
@@ -42,7 +42,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiBottomNavigation-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiBottomNavigation-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/breadcrumbs.md b/docs/pages/api/breadcrumbs.md
index 390aa0f9380382..fd9848a5234ef3 100644
--- a/docs/pages/api/breadcrumbs.md
+++ b/docs/pages/api/breadcrumbs.md
@@ -43,10 +43,10 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiBreadcrumbs-root</span> | Styles applied to the root element.
-| <span class="prop-name">ol</span> | <span class="prop-name">MuiBreadcrumbs-ol</span> | Styles applied to the ol element.
-| <span class="prop-name">li</span> | <span class="prop-name">MuiBreadcrumbs-li</span> | Styles applied to the li element.
-| <span class="prop-name">separator</span> | <span class="prop-name">MuiBreadcrumbs-separator</span> | Styles applied to the separator element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiBreadcrumbs-root</span> | Styles applied to the root element.
+| <span class="prop-name">ol</span> | <span class="prop-name">.MuiBreadcrumbs-ol</span> | Styles applied to the ol element.
+| <span class="prop-name">li</span> | <span class="prop-name">.MuiBreadcrumbs-li</span> | Styles applied to the li element.
+| <span class="prop-name">separator</span> | <span class="prop-name">.MuiBreadcrumbs-separator</span> | Styles applied to the separator element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/button-base.md b/docs/pages/api/button-base.md
index 93178ec452a8f5..2ff7c24af53cc5 100644
--- a/docs/pages/api/button-base.md
+++ b/docs/pages/api/button-base.md
@@ -52,9 +52,9 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiButtonBase-root</span> | Styles applied to the root element.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">focusVisible</span> | <span class="prop-name">Mui-focusVisible</span> | Pseudo-class applied to the root element if keyboard focused.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiButtonBase-root</span> | Styles applied to the root element.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the root element if keyboard focused.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/button-group.md b/docs/pages/api/button-group.md
index 75674611c5437b..bdaf6901e34887 100644
--- a/docs/pages/api/button-group.md
+++ b/docs/pages/api/button-group.md
@@ -46,20 +46,20 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiButtonGroup-root</span> | Styles applied to the root element.
-| <span class="prop-name">contained</span> | <span class="prop-name">MuiButtonGroup-contained</span> | Styles applied to the root element if `variant="contained"`.
-| <span class="prop-name">fullWidth</span> | <span class="prop-name">MuiButtonGroup-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
-| <span class="prop-name">grouped</span> | <span class="prop-name">MuiButtonGroup-grouped</span> | Styles applied to the children.
-| <span class="prop-name">groupedText</span> | <span class="prop-name">MuiButtonGroup-groupedText</span> | Styles applied to the children if `variant="text"`.
-| <span class="prop-name">groupedTextPrimary</span> | <span class="prop-name">MuiButtonGroup-groupedTextPrimary</span> | Styles applied to the children if `variant="text"` and `color="primary"`.
-| <span class="prop-name">groupedTextSecondary</span> | <span class="prop-name">MuiButtonGroup-groupedTextSecondary</span> | Styles applied to the children if `variant="text"` and `color="secondary"`.
-| <span class="prop-name">groupedOutlined</span> | <span class="prop-name">MuiButtonGroup-groupedOutlined</span> | Styles applied to the children if `variant="outlined"`.
-| <span class="prop-name">groupedOutlinedPrimary</span> | <span class="prop-name">MuiButtonGroup-groupedOutlinedPrimary</span> | Styles applied to the children if `variant="outlined"` and `color="primary"`.
-| <span class="prop-name">groupedOutlinedSecondary</span> | <span class="prop-name">MuiButtonGroup-groupedOutlinedSecondary</span> | Styles applied to the children if `variant="outlined"` and `color="secondary"`.
-| <span class="prop-name">groupedContained</span> | <span class="prop-name">MuiButtonGroup-groupedContained</span> | Styles applied to the children if `variant="contained"`.
-| <span class="prop-name">groupedContainedPrimary</span> | <span class="prop-name">MuiButtonGroup-groupedContainedPrimary</span> | Styles applied to the children if `variant="contained"` and `color="primary"`.
-| <span class="prop-name">groupedContainedSecondary</span> | <span class="prop-name">MuiButtonGroup-groupedContainedSecondary</span> | Styles applied to the children if `variant="contained"` and `color="secondary"`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to child elements if `disabled={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiButtonGroup-root</span> | Styles applied to the root element.
+| <span class="prop-name">contained</span> | <span class="prop-name">.MuiButtonGroup-contained</span> | Styles applied to the root element if `variant="contained"`.
+| <span class="prop-name">fullWidth</span> | <span class="prop-name">.MuiButtonGroup-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
+| <span class="prop-name">grouped</span> | <span class="prop-name">.MuiButtonGroup-grouped</span> | Styles applied to the children.
+| <span class="prop-name">groupedText</span> | <span class="prop-name">.MuiButtonGroup-groupedText</span> | Styles applied to the children if `variant="text"`.
+| <span class="prop-name">groupedTextPrimary</span> | <span class="prop-name">.MuiButtonGroup-groupedTextPrimary</span> | Styles applied to the children if `variant="text"` and `color="primary"`.
+| <span class="prop-name">groupedTextSecondary</span> | <span class="prop-name">.MuiButtonGroup-groupedTextSecondary</span> | Styles applied to the children if `variant="text"` and `color="secondary"`.
+| <span class="prop-name">groupedOutlined</span> | <span class="prop-name">.MuiButtonGroup-groupedOutlined</span> | Styles applied to the children if `variant="outlined"`.
+| <span class="prop-name">groupedOutlinedPrimary</span> | <span class="prop-name">.MuiButtonGroup-groupedOutlinedPrimary</span> | Styles applied to the children if `variant="outlined"` and `color="primary"`.
+| <span class="prop-name">groupedOutlinedSecondary</span> | <span class="prop-name">.MuiButtonGroup-groupedOutlinedSecondary</span> | Styles applied to the children if `variant="outlined"` and `color="secondary"`.
+| <span class="prop-name">groupedContained</span> | <span class="prop-name">.MuiButtonGroup-groupedContained</span> | Styles applied to the children if `variant="contained"`.
+| <span class="prop-name">groupedContainedPrimary</span> | <span class="prop-name">.MuiButtonGroup-groupedContainedPrimary</span> | Styles applied to the children if `variant="contained"` and `color="primary"`.
+| <span class="prop-name">groupedContainedSecondary</span> | <span class="prop-name">.MuiButtonGroup-groupedContainedSecondary</span> | Styles applied to the children if `variant="contained"` and `color="secondary"`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to child elements if `disabled={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/button.md b/docs/pages/api/button.md
index f1150483bc0bc8..0e30db73b63aa0 100644
--- a/docs/pages/api/button.md
+++ b/docs/pages/api/button.md
@@ -49,34 +49,34 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiButton-root</span> | Styles applied to the root element.
-| <span class="prop-name">label</span> | <span class="prop-name">MuiButton-label</span> | Styles applied to the span element that wraps the children.
-| <span class="prop-name">text</span> | <span class="prop-name">MuiButton-text</span> | Styles applied to the root element if `variant="text"`.
-| <span class="prop-name">textPrimary</span> | <span class="prop-name">MuiButton-textPrimary</span> | Styles applied to the root element if `variant="text"` and `color="primary"`.
-| <span class="prop-name">textSecondary</span> | <span class="prop-name">MuiButton-textSecondary</span> | Styles applied to the root element if `variant="text"` and `color="secondary"`.
-| <span class="prop-name">outlined</span> | <span class="prop-name">MuiButton-outlined</span> | Styles applied to the root element if `variant="outlined"`.
-| <span class="prop-name">outlinedPrimary</span> | <span class="prop-name">MuiButton-outlinedPrimary</span> | Styles applied to the root element if `variant="outlined"` and `color="primary"`.
-| <span class="prop-name">outlinedSecondary</span> | <span class="prop-name">MuiButton-outlinedSecondary</span> | Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
-| <span class="prop-name">contained</span> | <span class="prop-name">MuiButton-contained</span> | Styles applied to the root element if `variant="contained"`.
-| <span class="prop-name">containedPrimary</span> | <span class="prop-name">MuiButton-containedPrimary</span> | Styles applied to the root element if `variant="contained"` and `color="primary"`.
-| <span class="prop-name">containedSecondary</span> | <span class="prop-name">MuiButton-containedSecondary</span> | Styles applied to the root element if `variant="contained"` and `color="secondary"`.
-| <span class="prop-name">focusVisible</span> | <span class="prop-name">Mui-focusVisible</span> | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">colorInherit</span> | <span class="prop-name">MuiButton-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
-| <span class="prop-name">textSizeSmall</span> | <span class="prop-name">MuiButton-textSizeSmall</span> | Styles applied to the root element if `size="small"` and `variant="text"`.
-| <span class="prop-name">textSizeLarge</span> | <span class="prop-name">MuiButton-textSizeLarge</span> | Styles applied to the root element if `size="large"` and `variant="text"`.
-| <span class="prop-name">outlinedSizeSmall</span> | <span class="prop-name">MuiButton-outlinedSizeSmall</span> | Styles applied to the root element if `size="small"` and `variant="outlined"`.
-| <span class="prop-name">outlinedSizeLarge</span> | <span class="prop-name">MuiButton-outlinedSizeLarge</span> | Styles applied to the root element if `size="large"` and `variant="outlined"`.
-| <span class="prop-name">containedSizeSmall</span> | <span class="prop-name">MuiButton-containedSizeSmall</span> | Styles applied to the root element if `size="small"` and `variant="contained"`.
-| <span class="prop-name">containedSizeLarge</span> | <span class="prop-name">MuiButton-containedSizeLarge</span> | Styles applied to the root element if `size="large"` and `variant="contained"`.
-| <span class="prop-name">sizeSmall</span> | <span class="prop-name">MuiButton-sizeSmall</span> | Styles applied to the root element if `size="small"`.
-| <span class="prop-name">sizeLarge</span> | <span class="prop-name">MuiButton-sizeLarge</span> | Styles applied to the root element if `size="large"`.
-| <span class="prop-name">fullWidth</span> | <span class="prop-name">MuiButton-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
-| <span class="prop-name">startIcon</span> | <span class="prop-name">MuiButton-startIcon</span> | Styles applied to the startIcon element if supplied.
-| <span class="prop-name">endIcon</span> | <span class="prop-name">MuiButton-endIcon</span> | Styles applied to the endIcon element if supplied.
-| <span class="prop-name">iconSizeSmall</span> | <span class="prop-name">MuiButton-iconSizeSmall</span> | Styles applied to the icon element if supplied and `size="small"`.
-| <span class="prop-name">iconSizeMedium</span> | <span class="prop-name">MuiButton-iconSizeMedium</span> | Styles applied to the icon element if supplied and `size="medium"`.
-| <span class="prop-name">iconSizeLarge</span> | <span class="prop-name">MuiButton-iconSizeLarge</span> | Styles applied to the icon element if supplied and `size="large"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiButton-root</span> | Styles applied to the root element.
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiButton-label</span> | Styles applied to the span element that wraps the children.
+| <span class="prop-name">text</span> | <span class="prop-name">.MuiButton-text</span> | Styles applied to the root element if `variant="text"`.
+| <span class="prop-name">textPrimary</span> | <span class="prop-name">.MuiButton-textPrimary</span> | Styles applied to the root element if `variant="text"` and `color="primary"`.
+| <span class="prop-name">textSecondary</span> | <span class="prop-name">.MuiButton-textSecondary</span> | Styles applied to the root element if `variant="text"` and `color="secondary"`.
+| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiButton-outlined</span> | Styles applied to the root element if `variant="outlined"`.
+| <span class="prop-name">outlinedPrimary</span> | <span class="prop-name">.MuiButton-outlinedPrimary</span> | Styles applied to the root element if `variant="outlined"` and `color="primary"`.
+| <span class="prop-name">outlinedSecondary</span> | <span class="prop-name">.MuiButton-outlinedSecondary</span> | Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
+| <span class="prop-name">contained</span> | <span class="prop-name">.MuiButton-contained</span> | Styles applied to the root element if `variant="contained"`.
+| <span class="prop-name">containedPrimary</span> | <span class="prop-name">.MuiButton-containedPrimary</span> | Styles applied to the root element if `variant="contained"` and `color="primary"`.
+| <span class="prop-name">containedSecondary</span> | <span class="prop-name">.MuiButton-containedSecondary</span> | Styles applied to the root element if `variant="contained"` and `color="secondary"`.
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">colorInherit</span> | <span class="prop-name">.MuiButton-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
+| <span class="prop-name">textSizeSmall</span> | <span class="prop-name">.MuiButton-textSizeSmall</span> | Styles applied to the root element if `size="small"` and `variant="text"`.
+| <span class="prop-name">textSizeLarge</span> | <span class="prop-name">.MuiButton-textSizeLarge</span> | Styles applied to the root element if `size="large"` and `variant="text"`.
+| <span class="prop-name">outlinedSizeSmall</span> | <span class="prop-name">.MuiButton-outlinedSizeSmall</span> | Styles applied to the root element if `size="small"` and `variant="outlined"`.
+| <span class="prop-name">outlinedSizeLarge</span> | <span class="prop-name">.MuiButton-outlinedSizeLarge</span> | Styles applied to the root element if `size="large"` and `variant="outlined"`.
+| <span class="prop-name">containedSizeSmall</span> | <span class="prop-name">.MuiButton-containedSizeSmall</span> | Styles applied to the root element if `size="small"` and `variant="contained"`.
+| <span class="prop-name">containedSizeLarge</span> | <span class="prop-name">.MuiButton-containedSizeLarge</span> | Styles applied to the root element if `size="large"` and `variant="contained"`.
+| <span class="prop-name">sizeSmall</span> | <span class="prop-name">.MuiButton-sizeSmall</span> | Styles applied to the root element if `size="small"`.
+| <span class="prop-name">sizeLarge</span> | <span class="prop-name">.MuiButton-sizeLarge</span> | Styles applied to the root element if `size="large"`.
+| <span class="prop-name">fullWidth</span> | <span class="prop-name">.MuiButton-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
+| <span class="prop-name">startIcon</span> | <span class="prop-name">.MuiButton-startIcon</span> | Styles applied to the startIcon element if supplied.
+| <span class="prop-name">endIcon</span> | <span class="prop-name">.MuiButton-endIcon</span> | Styles applied to the endIcon element if supplied.
+| <span class="prop-name">iconSizeSmall</span> | <span class="prop-name">.MuiButton-iconSizeSmall</span> | Styles applied to the icon element if supplied and `size="small"`.
+| <span class="prop-name">iconSizeMedium</span> | <span class="prop-name">.MuiButton-iconSizeMedium</span> | Styles applied to the icon element if supplied and `size="medium"`.
+| <span class="prop-name">iconSizeLarge</span> | <span class="prop-name">.MuiButton-iconSizeLarge</span> | Styles applied to the icon element if supplied and `size="large"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/card-action-area.md b/docs/pages/api/card-action-area.md
index 34b25e44aa6696..bc405600d91df6 100644
--- a/docs/pages/api/card-action-area.md
+++ b/docs/pages/api/card-action-area.md
@@ -38,9 +38,9 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiCardActionArea-root</span> | Styles applied to the root element.
-| <span class="prop-name">focusVisible</span> | <span class="prop-name">Mui-focusVisible</span> | Pseudo-class applied to the ButtonBase root element if the action area is keyboard focused.
-| <span class="prop-name">focusHighlight</span> | <span class="prop-name">MuiCardActionArea-focusHighlight</span> | Styles applied to the overlay that covers the action area when it is keyboard focused.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiCardActionArea-root</span> | Styles applied to the root element.
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the ButtonBase root element if the action area is keyboard focused.
+| <span class="prop-name">focusHighlight</span> | <span class="prop-name">.MuiCardActionArea-focusHighlight</span> | Styles applied to the overlay that covers the action area when it is keyboard focused.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/card-actions.md b/docs/pages/api/card-actions.md
index 94dab488401fce..b67e6dfa880c45 100644
--- a/docs/pages/api/card-actions.md
+++ b/docs/pages/api/card-actions.md
@@ -39,8 +39,8 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiCardActions-root</span> | Styles applied to the root element.
-| <span class="prop-name">spacing</span> | <span class="prop-name">MuiCardActions-spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiCardActions-root</span> | Styles applied to the root element.
+| <span class="prop-name">spacing</span> | <span class="prop-name">.MuiCardActions-spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/card-content.md b/docs/pages/api/card-content.md
index e25e60ea205528..3e00fb68315ccd 100644
--- a/docs/pages/api/card-content.md
+++ b/docs/pages/api/card-content.md
@@ -38,7 +38,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiCardContent-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiCardContent-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/card-header.md b/docs/pages/api/card-header.md
index e7c16391409439..7db14b657c5805 100644
--- a/docs/pages/api/card-header.md
+++ b/docs/pages/api/card-header.md
@@ -45,12 +45,12 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiCardHeader-root</span> | Styles applied to the root element.
-| <span class="prop-name">avatar</span> | <span class="prop-name">MuiCardHeader-avatar</span> | Styles applied to the avatar element.
-| <span class="prop-name">action</span> | <span class="prop-name">MuiCardHeader-action</span> | Styles applied to the action element.
-| <span class="prop-name">content</span> | <span class="prop-name">MuiCardHeader-content</span> | Styles applied to the content wrapper element.
-| <span class="prop-name">title</span> | <span class="prop-name">MuiCardHeader-title</span> | Styles applied to the title Typography element.
-| <span class="prop-name">subheader</span> | <span class="prop-name">MuiCardHeader-subheader</span> | Styles applied to the subheader Typography element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiCardHeader-root</span> | Styles applied to the root element.
+| <span class="prop-name">avatar</span> | <span class="prop-name">.MuiCardHeader-avatar</span> | Styles applied to the avatar element.
+| <span class="prop-name">action</span> | <span class="prop-name">.MuiCardHeader-action</span> | Styles applied to the action element.
+| <span class="prop-name">content</span> | <span class="prop-name">.MuiCardHeader-content</span> | Styles applied to the content wrapper element.
+| <span class="prop-name">title</span> | <span class="prop-name">.MuiCardHeader-title</span> | Styles applied to the title Typography element.
+| <span class="prop-name">subheader</span> | <span class="prop-name">.MuiCardHeader-subheader</span> | Styles applied to the subheader Typography element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/card-media.md b/docs/pages/api/card-media.md
index b50e940417a41c..0015207671ed91 100644
--- a/docs/pages/api/card-media.md
+++ b/docs/pages/api/card-media.md
@@ -41,9 +41,9 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiCardMedia-root</span> | Styles applied to the root element.
-| <span class="prop-name">media</span> | <span class="prop-name">MuiCardMedia-media</span> | Styles applied to the root element if `component="video, audio, picture, iframe, or img"`.
-| <span class="prop-name">img</span> | <span class="prop-name">MuiCardMedia-img</span> | Styles applied to the root element if `component="picture or img"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiCardMedia-root</span> | Styles applied to the root element.
+| <span class="prop-name">media</span> | <span class="prop-name">.MuiCardMedia-media</span> | Styles applied to the root element if `component="video, audio, picture, iframe, or img"`.
+| <span class="prop-name">img</span> | <span class="prop-name">.MuiCardMedia-img</span> | Styles applied to the root element if `component="picture or img"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/card.md b/docs/pages/api/card.md
index 52a2e22e2ac0b8..7d9173eff239b3 100644
--- a/docs/pages/api/card.md
+++ b/docs/pages/api/card.md
@@ -38,7 +38,7 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiCard-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiCard-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/checkbox.md b/docs/pages/api/checkbox.md
index 2eeaa1bb9d1523..ec526b761536b5 100644
--- a/docs/pages/api/checkbox.md
+++ b/docs/pages/api/checkbox.md
@@ -52,12 +52,12 @@ Any other props supplied will be provided to the root element ([IconButton](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiCheckbox-root</span> | Styles applied to the root element.
-| <span class="prop-name">checked</span> | <span class="prop-name">Mui-checked</span> | Pseudo-class applied to the root element if `checked={true}`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">indeterminate</span> | <span class="prop-name">MuiCheckbox-indeterminate</span> | Pseudo-class applied to the root element if `indeterminate={true}`.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiCheckbox-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiCheckbox-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiCheckbox-root</span> | Styles applied to the root element.
+| <span class="prop-name">checked</span> | <span class="prop-name">.Mui-checked</span> | Pseudo-class applied to the root element if `checked={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">indeterminate</span> | <span class="prop-name">.MuiCheckbox-indeterminate</span> | Pseudo-class applied to the root element if `indeterminate={true}`.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiCheckbox-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiCheckbox-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/chip.md b/docs/pages/api/chip.md
index 665a07ae8dd48d..93d7b6c8a5c044 100644
--- a/docs/pages/api/chip.md
+++ b/docs/pages/api/chip.md
@@ -49,36 +49,36 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiChip-root</span> | Styles applied to the root element.
-| <span class="prop-name">sizeSmall</span> | <span class="prop-name">MuiChip-sizeSmall</span> | Styles applied to the root element if `size="small"`.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiChip-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiChip-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">clickable</span> | <span class="prop-name">MuiChip-clickable</span> | Styles applied to the root element if `onClick` is defined or `clickable={true}`.
-| <span class="prop-name">clickableColorPrimary</span> | <span class="prop-name">MuiChip-clickableColorPrimary</span> | Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`.
-| <span class="prop-name">clickableColorSecondary</span> | <span class="prop-name">MuiChip-clickableColorSecondary</span> | Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`.
-| <span class="prop-name">deletable</span> | <span class="prop-name">MuiChip-deletable</span> | Styles applied to the root element if `onDelete` is defined.
-| <span class="prop-name">deletableColorPrimary</span> | <span class="prop-name">MuiChip-deletableColorPrimary</span> | Styles applied to the root element if `onDelete` and `color="primary"` is defined.
-| <span class="prop-name">deletableColorSecondary</span> | <span class="prop-name">MuiChip-deletableColorSecondary</span> | Styles applied to the root element if `onDelete` and `color="secondary"` is defined.
-| <span class="prop-name">outlined</span> | <span class="prop-name">MuiChip-outlined</span> | Styles applied to the root element if `variant="outlined"`.
-| <span class="prop-name">outlinedPrimary</span> | <span class="prop-name">MuiChip-outlinedPrimary</span> | Styles applied to the root element if `variant="outlined"` and `color="primary"`.
-| <span class="prop-name">outlinedSecondary</span> | <span class="prop-name">MuiChip-outlinedSecondary</span> | Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
-| <span class="prop-name">avatar</span> | <span class="prop-name">MuiChip-avatar</span> | Styles applied to the `avatar` element.
-| <span class="prop-name">avatarSmall</span> | <span class="prop-name">MuiChip-avatarSmall</span> | 
-| <span class="prop-name">avatarColorPrimary</span> | <span class="prop-name">MuiChip-avatarColorPrimary</span> | Styles applied to the `avatar` element if `color="primary"`.
-| <span class="prop-name">avatarColorSecondary</span> | <span class="prop-name">MuiChip-avatarColorSecondary</span> | Styles applied to the `avatar` element if `color="secondary"`.
-| <span class="prop-name">icon</span> | <span class="prop-name">MuiChip-icon</span> | Styles applied to the `icon` element.
-| <span class="prop-name">iconSmall</span> | <span class="prop-name">MuiChip-iconSmall</span> | Styles applied to the `icon` element if `size="small"`.
-| <span class="prop-name">iconColorPrimary</span> | <span class="prop-name">MuiChip-iconColorPrimary</span> | Styles applied to the `icon` element if `color="primary"`.
-| <span class="prop-name">iconColorSecondary</span> | <span class="prop-name">MuiChip-iconColorSecondary</span> | Styles applied to the `icon` element if `color="secondary"`.
-| <span class="prop-name">label</span> | <span class="prop-name">MuiChip-label</span> | Styles applied to the label `span` element`.
-| <span class="prop-name">labelSmall</span> | <span class="prop-name">MuiChip-labelSmall</span> | 
-| <span class="prop-name">deleteIcon</span> | <span class="prop-name">MuiChip-deleteIcon</span> | Styles applied to the `deleteIcon` element.
-| <span class="prop-name">deleteIconSmall</span> | <span class="prop-name">MuiChip-deleteIconSmall</span> | Styles applied to the `deleteIcon` element if `size="small"`.
-| <span class="prop-name">deleteIconColorPrimary</span> | <span class="prop-name">MuiChip-deleteIconColorPrimary</span> | Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`.
-| <span class="prop-name">deleteIconColorSecondary</span> | <span class="prop-name">MuiChip-deleteIconColorSecondary</span> | Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`.
-| <span class="prop-name">deleteIconOutlinedColorPrimary</span> | <span class="prop-name">MuiChip-deleteIconOutlinedColorPrimary</span> | Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`.
-| <span class="prop-name">deleteIconOutlinedColorSecondary</span> | <span class="prop-name">MuiChip-deleteIconOutlinedColorSecondary</span> | Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiChip-root</span> | Styles applied to the root element.
+| <span class="prop-name">sizeSmall</span> | <span class="prop-name">.MuiChip-sizeSmall</span> | Styles applied to the root element if `size="small"`.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiChip-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiChip-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">clickable</span> | <span class="prop-name">.MuiChip-clickable</span> | Styles applied to the root element if `onClick` is defined or `clickable={true}`.
+| <span class="prop-name">clickableColorPrimary</span> | <span class="prop-name">.MuiChip-clickableColorPrimary</span> | Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`.
+| <span class="prop-name">clickableColorSecondary</span> | <span class="prop-name">.MuiChip-clickableColorSecondary</span> | Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`.
+| <span class="prop-name">deletable</span> | <span class="prop-name">.MuiChip-deletable</span> | Styles applied to the root element if `onDelete` is defined.
+| <span class="prop-name">deletableColorPrimary</span> | <span class="prop-name">.MuiChip-deletableColorPrimary</span> | Styles applied to the root element if `onDelete` and `color="primary"` is defined.
+| <span class="prop-name">deletableColorSecondary</span> | <span class="prop-name">.MuiChip-deletableColorSecondary</span> | Styles applied to the root element if `onDelete` and `color="secondary"` is defined.
+| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiChip-outlined</span> | Styles applied to the root element if `variant="outlined"`.
+| <span class="prop-name">outlinedPrimary</span> | <span class="prop-name">.MuiChip-outlinedPrimary</span> | Styles applied to the root element if `variant="outlined"` and `color="primary"`.
+| <span class="prop-name">outlinedSecondary</span> | <span class="prop-name">.MuiChip-outlinedSecondary</span> | Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
+| <span class="prop-name">avatar</span> | <span class="prop-name">.MuiChip-avatar</span> | Styles applied to the `avatar` element.
+| <span class="prop-name">avatarSmall</span> | <span class="prop-name">.MuiChip-avatarSmall</span> | 
+| <span class="prop-name">avatarColorPrimary</span> | <span class="prop-name">.MuiChip-avatarColorPrimary</span> | Styles applied to the `avatar` element if `color="primary"`.
+| <span class="prop-name">avatarColorSecondary</span> | <span class="prop-name">.MuiChip-avatarColorSecondary</span> | Styles applied to the `avatar` element if `color="secondary"`.
+| <span class="prop-name">icon</span> | <span class="prop-name">.MuiChip-icon</span> | Styles applied to the `icon` element.
+| <span class="prop-name">iconSmall</span> | <span class="prop-name">.MuiChip-iconSmall</span> | Styles applied to the `icon` element if `size="small"`.
+| <span class="prop-name">iconColorPrimary</span> | <span class="prop-name">.MuiChip-iconColorPrimary</span> | Styles applied to the `icon` element if `color="primary"`.
+| <span class="prop-name">iconColorSecondary</span> | <span class="prop-name">.MuiChip-iconColorSecondary</span> | Styles applied to the `icon` element if `color="secondary"`.
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiChip-label</span> | Styles applied to the label `span` element`.
+| <span class="prop-name">labelSmall</span> | <span class="prop-name">.MuiChip-labelSmall</span> | 
+| <span class="prop-name">deleteIcon</span> | <span class="prop-name">.MuiChip-deleteIcon</span> | Styles applied to the `deleteIcon` element.
+| <span class="prop-name">deleteIconSmall</span> | <span class="prop-name">.MuiChip-deleteIconSmall</span> | Styles applied to the `deleteIcon` element if `size="small"`.
+| <span class="prop-name">deleteIconColorPrimary</span> | <span class="prop-name">.MuiChip-deleteIconColorPrimary</span> | Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`.
+| <span class="prop-name">deleteIconColorSecondary</span> | <span class="prop-name">.MuiChip-deleteIconColorSecondary</span> | Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`.
+| <span class="prop-name">deleteIconOutlinedColorPrimary</span> | <span class="prop-name">.MuiChip-deleteIconOutlinedColorPrimary</span> | Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`.
+| <span class="prop-name">deleteIconOutlinedColorSecondary</span> | <span class="prop-name">.MuiChip-deleteIconOutlinedColorSecondary</span> | Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/circular-progress.md b/docs/pages/api/circular-progress.md
index 3e29c438c425ce..f9e7b511c2f577 100644
--- a/docs/pages/api/circular-progress.md
+++ b/docs/pages/api/circular-progress.md
@@ -47,16 +47,16 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiCircularProgress-root</span> | Styles applied to the root element.
-| <span class="prop-name">static</span> | <span class="prop-name">MuiCircularProgress-static</span> | Styles applied to the root element if `variant="static"`.
-| <span class="prop-name">indeterminate</span> | <span class="prop-name">MuiCircularProgress-indeterminate</span> | Styles applied to the root element if `variant="indeterminate"`.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiCircularProgress-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiCircularProgress-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
-| <span class="prop-name">svg</span> | <span class="prop-name">MuiCircularProgress-svg</span> | Styles applied to the `svg` element.
-| <span class="prop-name">circle</span> | <span class="prop-name">MuiCircularProgress-circle</span> | Styles applied to the `circle` svg path.
-| <span class="prop-name">circleStatic</span> | <span class="prop-name">MuiCircularProgress-circleStatic</span> | Styles applied to the `circle` svg path if `variant="static"`.
-| <span class="prop-name">circleIndeterminate</span> | <span class="prop-name">MuiCircularProgress-circleIndeterminate</span> | Styles applied to the `circle` svg path if `variant="indeterminate"`.
-| <span class="prop-name">circleDisableShrink</span> | <span class="prop-name">MuiCircularProgress-circleDisableShrink</span> | Styles applied to the `circle` svg path if `disableShrink={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiCircularProgress-root</span> | Styles applied to the root element.
+| <span class="prop-name">static</span> | <span class="prop-name">.MuiCircularProgress-static</span> | Styles applied to the root element if `variant="static"`.
+| <span class="prop-name">indeterminate</span> | <span class="prop-name">.MuiCircularProgress-indeterminate</span> | Styles applied to the root element if `variant="indeterminate"`.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiCircularProgress-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiCircularProgress-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">svg</span> | <span class="prop-name">.MuiCircularProgress-svg</span> | Styles applied to the `svg` element.
+| <span class="prop-name">circle</span> | <span class="prop-name">.MuiCircularProgress-circle</span> | Styles applied to the `circle` svg path.
+| <span class="prop-name">circleStatic</span> | <span class="prop-name">.MuiCircularProgress-circleStatic</span> | Styles applied to the `circle` svg path if `variant="static"`.
+| <span class="prop-name">circleIndeterminate</span> | <span class="prop-name">.MuiCircularProgress-circleIndeterminate</span> | Styles applied to the `circle` svg path if `variant="indeterminate"`.
+| <span class="prop-name">circleDisableShrink</span> | <span class="prop-name">.MuiCircularProgress-circleDisableShrink</span> | Styles applied to the `circle` svg path if `disableShrink={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/collapse.md b/docs/pages/api/collapse.md
index 0c40c97296754a..3ccd8fd20b5fb9 100644
--- a/docs/pages/api/collapse.md
+++ b/docs/pages/api/collapse.md
@@ -44,11 +44,11 @@ Any other props supplied will be provided to the root element ([Transition](http
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">container</span> | <span class="prop-name">MuiCollapse-container</span> | Styles applied to the container element.
-| <span class="prop-name">entered</span> | <span class="prop-name">MuiCollapse-entered</span> | Styles applied to the container element when the transition has entered.
-| <span class="prop-name">hidden</span> | <span class="prop-name">MuiCollapse-hidden</span> | Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px.
-| <span class="prop-name">wrapper</span> | <span class="prop-name">MuiCollapse-wrapper</span> | Styles applied to the outer wrapper element.
-| <span class="prop-name">wrapperInner</span> | <span class="prop-name">MuiCollapse-wrapperInner</span> | Styles applied to the inner wrapper element.
+| <span class="prop-name">container</span> | <span class="prop-name">.MuiCollapse-container</span> | Styles applied to the container element.
+| <span class="prop-name">entered</span> | <span class="prop-name">.MuiCollapse-entered</span> | Styles applied to the container element when the transition has entered.
+| <span class="prop-name">hidden</span> | <span class="prop-name">.MuiCollapse-hidden</span> | Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px.
+| <span class="prop-name">wrapper</span> | <span class="prop-name">.MuiCollapse-wrapper</span> | Styles applied to the outer wrapper element.
+| <span class="prop-name">wrapperInner</span> | <span class="prop-name">.MuiCollapse-wrapperInner</span> | Styles applied to the inner wrapper element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/container.md b/docs/pages/api/container.md
index 6e24eafbbfb937..834925a324b8b7 100644
--- a/docs/pages/api/container.md
+++ b/docs/pages/api/container.md
@@ -41,13 +41,13 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiContainer-root</span> | Styles applied to the root element.
-| <span class="prop-name">fixed</span> | <span class="prop-name">MuiContainer-fixed</span> | Styles applied to the root element if `fixed={true}`.
-| <span class="prop-name">maxWidthXs</span> | <span class="prop-name">MuiContainer-maxWidthXs</span> | Styles applied to the root element if `maxWidth="xs"`.
-| <span class="prop-name">maxWidthSm</span> | <span class="prop-name">MuiContainer-maxWidthSm</span> | Styles applied to the root element if `maxWidth="sm"`.
-| <span class="prop-name">maxWidthMd</span> | <span class="prop-name">MuiContainer-maxWidthMd</span> | Styles applied to the root element if `maxWidth="md"`.
-| <span class="prop-name">maxWidthLg</span> | <span class="prop-name">MuiContainer-maxWidthLg</span> | Styles applied to the root element if `maxWidth="lg"`.
-| <span class="prop-name">maxWidthXl</span> | <span class="prop-name">MuiContainer-maxWidthXl</span> | Styles applied to the root element if `maxWidth="xl"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiContainer-root</span> | Styles applied to the root element.
+| <span class="prop-name">fixed</span> | <span class="prop-name">.MuiContainer-fixed</span> | Styles applied to the root element if `fixed={true}`.
+| <span class="prop-name">maxWidthXs</span> | <span class="prop-name">.MuiContainer-maxWidthXs</span> | Styles applied to the root element if `maxWidth="xs"`.
+| <span class="prop-name">maxWidthSm</span> | <span class="prop-name">.MuiContainer-maxWidthSm</span> | Styles applied to the root element if `maxWidth="sm"`.
+| <span class="prop-name">maxWidthMd</span> | <span class="prop-name">.MuiContainer-maxWidthMd</span> | Styles applied to the root element if `maxWidth="md"`.
+| <span class="prop-name">maxWidthLg</span> | <span class="prop-name">.MuiContainer-maxWidthLg</span> | Styles applied to the root element if `maxWidth="lg"`.
+| <span class="prop-name">maxWidthXl</span> | <span class="prop-name">.MuiContainer-maxWidthXl</span> | Styles applied to the root element if `maxWidth="xl"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/dialog-actions.md b/docs/pages/api/dialog-actions.md
index 784eb5cc520df3..8ffcf34273df2d 100644
--- a/docs/pages/api/dialog-actions.md
+++ b/docs/pages/api/dialog-actions.md
@@ -39,8 +39,8 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiDialogActions-root</span> | Styles applied to the root element.
-| <span class="prop-name">spacing</span> | <span class="prop-name">MuiDialogActions-spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiDialogActions-root</span> | Styles applied to the root element.
+| <span class="prop-name">spacing</span> | <span class="prop-name">.MuiDialogActions-spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/dialog-content-text.md b/docs/pages/api/dialog-content-text.md
index 49ad2460cb39b3..3a5d704ad13b68 100644
--- a/docs/pages/api/dialog-content-text.md
+++ b/docs/pages/api/dialog-content-text.md
@@ -38,7 +38,7 @@ Any other props supplied will be provided to the root element ([Typography](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiDialogContentText-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiDialogContentText-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/dialog-content.md b/docs/pages/api/dialog-content.md
index 51535e5f43ee6c..9a8c20607262f4 100644
--- a/docs/pages/api/dialog-content.md
+++ b/docs/pages/api/dialog-content.md
@@ -39,8 +39,8 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiDialogContent-root</span> | Styles applied to the root element.
-| <span class="prop-name">dividers</span> | <span class="prop-name">MuiDialogContent-dividers</span> | Styles applied to the root element if `dividers={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiDialogContent-root</span> | Styles applied to the root element.
+| <span class="prop-name">dividers</span> | <span class="prop-name">.MuiDialogContent-dividers</span> | Styles applied to the root element if `dividers={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/dialog-title.md b/docs/pages/api/dialog-title.md
index ae7aabcce44e8a..d539bf04e51d22 100644
--- a/docs/pages/api/dialog-title.md
+++ b/docs/pages/api/dialog-title.md
@@ -39,7 +39,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiDialogTitle-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiDialogTitle-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/dialog.md b/docs/pages/api/dialog.md
index 031c9b62cd65dd..d7611d4dcf3d10 100644
--- a/docs/pages/api/dialog.md
+++ b/docs/pages/api/dialog.md
@@ -59,21 +59,21 @@ Any other props supplied will be provided to the root element ([Modal](/api/moda
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiDialog-root</span> | Styles applied to the root element.
-| <span class="prop-name">scrollPaper</span> | <span class="prop-name">MuiDialog-scrollPaper</span> | Styles applied to the container element if `scroll="paper"`.
-| <span class="prop-name">scrollBody</span> | <span class="prop-name">MuiDialog-scrollBody</span> | Styles applied to the container element if `scroll="body"`.
-| <span class="prop-name">container</span> | <span class="prop-name">MuiDialog-container</span> | Styles applied to the container element.
-| <span class="prop-name">paper</span> | <span class="prop-name">MuiDialog-paper</span> | Styles applied to the `Paper` component.
-| <span class="prop-name">paperScrollPaper</span> | <span class="prop-name">MuiDialog-paperScrollPaper</span> | Styles applied to the `Paper` component if `scroll="paper"`.
-| <span class="prop-name">paperScrollBody</span> | <span class="prop-name">MuiDialog-paperScrollBody</span> | Styles applied to the `Paper` component if `scroll="body"`.
-| <span class="prop-name">paperWidthFalse</span> | <span class="prop-name">MuiDialog-paperWidthFalse</span> | Styles applied to the `Paper` component if `maxWidth=false`.
-| <span class="prop-name">paperWidthXs</span> | <span class="prop-name">MuiDialog-paperWidthXs</span> | Styles applied to the `Paper` component if `maxWidth="xs"`.
-| <span class="prop-name">paperWidthSm</span> | <span class="prop-name">MuiDialog-paperWidthSm</span> | Styles applied to the `Paper` component if `maxWidth="sm"`.
-| <span class="prop-name">paperWidthMd</span> | <span class="prop-name">MuiDialog-paperWidthMd</span> | Styles applied to the `Paper` component if `maxWidth="md"`.
-| <span class="prop-name">paperWidthLg</span> | <span class="prop-name">MuiDialog-paperWidthLg</span> | Styles applied to the `Paper` component if `maxWidth="lg"`.
-| <span class="prop-name">paperWidthXl</span> | <span class="prop-name">MuiDialog-paperWidthXl</span> | Styles applied to the `Paper` component if `maxWidth="xl"`.
-| <span class="prop-name">paperFullWidth</span> | <span class="prop-name">MuiDialog-paperFullWidth</span> | Styles applied to the `Paper` component if `fullWidth={true}`.
-| <span class="prop-name">paperFullScreen</span> | <span class="prop-name">MuiDialog-paperFullScreen</span> | Styles applied to the `Paper` component if `fullScreen={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiDialog-root</span> | Styles applied to the root element.
+| <span class="prop-name">scrollPaper</span> | <span class="prop-name">.MuiDialog-scrollPaper</span> | Styles applied to the container element if `scroll="paper"`.
+| <span class="prop-name">scrollBody</span> | <span class="prop-name">.MuiDialog-scrollBody</span> | Styles applied to the container element if `scroll="body"`.
+| <span class="prop-name">container</span> | <span class="prop-name">.MuiDialog-container</span> | Styles applied to the container element.
+| <span class="prop-name">paper</span> | <span class="prop-name">.MuiDialog-paper</span> | Styles applied to the `Paper` component.
+| <span class="prop-name">paperScrollPaper</span> | <span class="prop-name">.MuiDialog-paperScrollPaper</span> | Styles applied to the `Paper` component if `scroll="paper"`.
+| <span class="prop-name">paperScrollBody</span> | <span class="prop-name">.MuiDialog-paperScrollBody</span> | Styles applied to the `Paper` component if `scroll="body"`.
+| <span class="prop-name">paperWidthFalse</span> | <span class="prop-name">.MuiDialog-paperWidthFalse</span> | Styles applied to the `Paper` component if `maxWidth=false`.
+| <span class="prop-name">paperWidthXs</span> | <span class="prop-name">.MuiDialog-paperWidthXs</span> | Styles applied to the `Paper` component if `maxWidth="xs"`.
+| <span class="prop-name">paperWidthSm</span> | <span class="prop-name">.MuiDialog-paperWidthSm</span> | Styles applied to the `Paper` component if `maxWidth="sm"`.
+| <span class="prop-name">paperWidthMd</span> | <span class="prop-name">.MuiDialog-paperWidthMd</span> | Styles applied to the `Paper` component if `maxWidth="md"`.
+| <span class="prop-name">paperWidthLg</span> | <span class="prop-name">.MuiDialog-paperWidthLg</span> | Styles applied to the `Paper` component if `maxWidth="lg"`.
+| <span class="prop-name">paperWidthXl</span> | <span class="prop-name">.MuiDialog-paperWidthXl</span> | Styles applied to the `Paper` component if `maxWidth="xl"`.
+| <span class="prop-name">paperFullWidth</span> | <span class="prop-name">.MuiDialog-paperFullWidth</span> | Styles applied to the `Paper` component if `fullWidth={true}`.
+| <span class="prop-name">paperFullScreen</span> | <span class="prop-name">.MuiDialog-paperFullScreen</span> | Styles applied to the `Paper` component if `fullScreen={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/divider.md b/docs/pages/api/divider.md
index a92305395e528a..056aae3f7af56b 100644
--- a/docs/pages/api/divider.md
+++ b/docs/pages/api/divider.md
@@ -42,12 +42,12 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiDivider-root</span> | Styles applied to the root element.
-| <span class="prop-name">absolute</span> | <span class="prop-name">MuiDivider-absolute</span> | Styles applied to the root element if `absolute={true}`.
-| <span class="prop-name">inset</span> | <span class="prop-name">MuiDivider-inset</span> | Styles applied to the root element if `variant="inset"`.
-| <span class="prop-name">light</span> | <span class="prop-name">MuiDivider-light</span> | Styles applied to the root element if `light={true}`.
-| <span class="prop-name">middle</span> | <span class="prop-name">MuiDivider-middle</span> | Styles applied to the root element if `variant="middle"`.
-| <span class="prop-name">vertical</span> | <span class="prop-name">MuiDivider-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiDivider-root</span> | Styles applied to the root element.
+| <span class="prop-name">absolute</span> | <span class="prop-name">.MuiDivider-absolute</span> | Styles applied to the root element if `absolute={true}`.
+| <span class="prop-name">inset</span> | <span class="prop-name">.MuiDivider-inset</span> | Styles applied to the root element if `variant="inset"`.
+| <span class="prop-name">light</span> | <span class="prop-name">.MuiDivider-light</span> | Styles applied to the root element if `light={true}`.
+| <span class="prop-name">middle</span> | <span class="prop-name">.MuiDivider-middle</span> | Styles applied to the root element if `variant="middle"`.
+| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiDivider-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/drawer.md b/docs/pages/api/drawer.md
index b8f4cc7831e323..a6c375371062fb 100644
--- a/docs/pages/api/drawer.md
+++ b/docs/pages/api/drawer.md
@@ -48,18 +48,18 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiDrawer-root</span> | Styles applied to the root element.
-| <span class="prop-name">docked</span> | <span class="prop-name">MuiDrawer-docked</span> | Styles applied to the root element if `variant="permanent or persistent"`.
-| <span class="prop-name">paper</span> | <span class="prop-name">MuiDrawer-paper</span> | Styles applied to the `Paper` component.
-| <span class="prop-name">paperAnchorLeft</span> | <span class="prop-name">MuiDrawer-paperAnchorLeft</span> | Styles applied to the `Paper` component if `anchor="left"`.
-| <span class="prop-name">paperAnchorRight</span> | <span class="prop-name">MuiDrawer-paperAnchorRight</span> | Styles applied to the `Paper` component if `anchor="right"`.
-| <span class="prop-name">paperAnchorTop</span> | <span class="prop-name">MuiDrawer-paperAnchorTop</span> | Styles applied to the `Paper` component if `anchor="top"`.
-| <span class="prop-name">paperAnchorBottom</span> | <span class="prop-name">MuiDrawer-paperAnchorBottom</span> | Styles applied to the `Paper` component if `anchor="bottom"`.
-| <span class="prop-name">paperAnchorDockedLeft</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedLeft</span> | Styles applied to the `Paper` component if `anchor="left"` and `variant` is not "temporary".
-| <span class="prop-name">paperAnchorDockedTop</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedTop</span> | Styles applied to the `Paper` component if `anchor="top"` and `variant` is not "temporary".
-| <span class="prop-name">paperAnchorDockedRight</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedRight</span> | Styles applied to the `Paper` component if `anchor="right"` and `variant` is not "temporary".
-| <span class="prop-name">paperAnchorDockedBottom</span> | <span class="prop-name">MuiDrawer-paperAnchorDockedBottom</span> | Styles applied to the `Paper` component if `anchor="bottom"` and `variant` is not "temporary".
-| <span class="prop-name">modal</span> | <span class="prop-name">MuiDrawer-modal</span> | Styles applied to the `Modal` component.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiDrawer-root</span> | Styles applied to the root element.
+| <span class="prop-name">docked</span> | <span class="prop-name">.MuiDrawer-docked</span> | Styles applied to the root element if `variant="permanent or persistent"`.
+| <span class="prop-name">paper</span> | <span class="prop-name">.MuiDrawer-paper</span> | Styles applied to the `Paper` component.
+| <span class="prop-name">paperAnchorLeft</span> | <span class="prop-name">.MuiDrawer-paperAnchorLeft</span> | Styles applied to the `Paper` component if `anchor="left"`.
+| <span class="prop-name">paperAnchorRight</span> | <span class="prop-name">.MuiDrawer-paperAnchorRight</span> | Styles applied to the `Paper` component if `anchor="right"`.
+| <span class="prop-name">paperAnchorTop</span> | <span class="prop-name">.MuiDrawer-paperAnchorTop</span> | Styles applied to the `Paper` component if `anchor="top"`.
+| <span class="prop-name">paperAnchorBottom</span> | <span class="prop-name">.MuiDrawer-paperAnchorBottom</span> | Styles applied to the `Paper` component if `anchor="bottom"`.
+| <span class="prop-name">paperAnchorDockedLeft</span> | <span class="prop-name">.MuiDrawer-paperAnchorDockedLeft</span> | Styles applied to the `Paper` component if `anchor="left"` and `variant` is not "temporary".
+| <span class="prop-name">paperAnchorDockedTop</span> | <span class="prop-name">.MuiDrawer-paperAnchorDockedTop</span> | Styles applied to the `Paper` component if `anchor="top"` and `variant` is not "temporary".
+| <span class="prop-name">paperAnchorDockedRight</span> | <span class="prop-name">.MuiDrawer-paperAnchorDockedRight</span> | Styles applied to the `Paper` component if `anchor="right"` and `variant` is not "temporary".
+| <span class="prop-name">paperAnchorDockedBottom</span> | <span class="prop-name">.MuiDrawer-paperAnchorDockedBottom</span> | Styles applied to the `Paper` component if `anchor="bottom"` and `variant` is not "temporary".
+| <span class="prop-name">modal</span> | <span class="prop-name">.MuiDrawer-modal</span> | Styles applied to the `Modal` component.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/expansion-panel-actions.md b/docs/pages/api/expansion-panel-actions.md
index 96370b5ec7661b..98332c1600d962 100644
--- a/docs/pages/api/expansion-panel-actions.md
+++ b/docs/pages/api/expansion-panel-actions.md
@@ -39,8 +39,8 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiExpansionPanelActions-root</span> | Styles applied to the root element.
-| <span class="prop-name">spacing</span> | <span class="prop-name">MuiExpansionPanelActions-spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiExpansionPanelActions-root</span> | Styles applied to the root element.
+| <span class="prop-name">spacing</span> | <span class="prop-name">.MuiExpansionPanelActions-spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/expansion-panel-details.md b/docs/pages/api/expansion-panel-details.md
index dd51b66e5297af..d5fd6c28a6dc01 100644
--- a/docs/pages/api/expansion-panel-details.md
+++ b/docs/pages/api/expansion-panel-details.md
@@ -38,7 +38,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiExpansionPanelDetails-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiExpansionPanelDetails-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/expansion-panel-summary.md b/docs/pages/api/expansion-panel-summary.md
index 6a88a8ef8cc8f9..0a25853f55f8da 100644
--- a/docs/pages/api/expansion-panel-summary.md
+++ b/docs/pages/api/expansion-panel-summary.md
@@ -40,12 +40,12 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiExpansionPanelSummary-root</span> | Styles applied to the root element.
-| <span class="prop-name">expanded</span> | <span class="prop-name">Mui-expanded</span> | Styles applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`.
-| <span class="prop-name">focused</span> | <span class="prop-name">Mui-focused</span> | Styles applied to the root and children wrapper elements when focused.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
-| <span class="prop-name">content</span> | <span class="prop-name">MuiExpansionPanelSummary-content</span> | Styles applied to the children wrapper element.
-| <span class="prop-name">expandIcon</span> | <span class="prop-name">MuiExpansionPanelSummary-expandIcon</span> | Styles applied to the `IconButton` component when `expandIcon` is supplied.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiExpansionPanelSummary-root</span> | Styles applied to the root element.
+| <span class="prop-name">expanded</span> | <span class="prop-name">.Mui-expanded</span> | Styles applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`.
+| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root and children wrapper elements when focused.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
+| <span class="prop-name">content</span> | <span class="prop-name">.MuiExpansionPanelSummary-content</span> | Styles applied to the children wrapper element.
+| <span class="prop-name">expandIcon</span> | <span class="prop-name">.MuiExpansionPanelSummary-expandIcon</span> | Styles applied to the `IconButton` component when `expandIcon` is supplied.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/expansion-panel.md b/docs/pages/api/expansion-panel.md
index d8e2322ffe5323..babde76e6d9ab8 100644
--- a/docs/pages/api/expansion-panel.md
+++ b/docs/pages/api/expansion-panel.md
@@ -44,10 +44,10 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiExpansionPanel-root</span> | Styles applied to the root element.
-| <span class="prop-name">rounded</span> | <span class="prop-name">MuiExpansionPanel-rounded</span> | Styles applied to the root element if `square={false}`.
-| <span class="prop-name">expanded</span> | <span class="prop-name">Mui-expanded</span> | Styles applied to the root element if `expanded={true}`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiExpansionPanel-root</span> | Styles applied to the root element.
+| <span class="prop-name">rounded</span> | <span class="prop-name">.MuiExpansionPanel-rounded</span> | Styles applied to the root element if `square={false}`.
+| <span class="prop-name">expanded</span> | <span class="prop-name">.Mui-expanded</span> | Styles applied to the root element if `expanded={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/fab.md b/docs/pages/api/fab.md
index 7612809691134b..c002f4e8d06870 100644
--- a/docs/pages/api/fab.md
+++ b/docs/pages/api/fab.md
@@ -46,16 +46,16 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiFab-root</span> | Styles applied to the root element.
-| <span class="prop-name">label</span> | <span class="prop-name">MuiFab-label</span> | Styles applied to the span element that wraps the children.
-| <span class="prop-name">primary</span> | <span class="prop-name">MuiFab-primary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">secondary</span> | <span class="prop-name">MuiFab-secondary</span> | Styles applied to the root element if `color="secondary"`.
-| <span class="prop-name">extended</span> | <span class="prop-name">MuiFab-extended</span> | Styles applied to the root element if `variant="extended"`.
-| <span class="prop-name">focusVisible</span> | <span class="prop-name">Mui-focusVisible</span> | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">colorInherit</span> | <span class="prop-name">MuiFab-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
-| <span class="prop-name">sizeSmall</span> | <span class="prop-name">MuiFab-sizeSmall</span> | Styles applied to the root element if `size="small"``.
-| <span class="prop-name">sizeMedium</span> | <span class="prop-name">MuiFab-sizeMedium</span> | Styles applied to the root element if `size="medium"``.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiFab-root</span> | Styles applied to the root element.
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiFab-label</span> | Styles applied to the span element that wraps the children.
+| <span class="prop-name">primary</span> | <span class="prop-name">.MuiFab-primary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">secondary</span> | <span class="prop-name">.MuiFab-secondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">extended</span> | <span class="prop-name">.MuiFab-extended</span> | Styles applied to the root element if `variant="extended"`.
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">colorInherit</span> | <span class="prop-name">.MuiFab-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
+| <span class="prop-name">sizeSmall</span> | <span class="prop-name">.MuiFab-sizeSmall</span> | Styles applied to the root element if `size="small"``.
+| <span class="prop-name">sizeMedium</span> | <span class="prop-name">.MuiFab-sizeMedium</span> | Styles applied to the root element if `size="medium"``.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/filled-input.md b/docs/pages/api/filled-input.md
index 597726cc1c11d3..4654efb43f4f0f 100644
--- a/docs/pages/api/filled-input.md
+++ b/docs/pages/api/filled-input.md
@@ -62,22 +62,22 @@ Any other props supplied will be provided to the root element ([InputBase](/api/
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiFilledInput-root</span> | Styles applied to the root element.
-| <span class="prop-name">underline</span> | <span class="prop-name">MuiFilledInput-underline</span> | Styles applied to the root element if `disableUnderline={false}`.
-| <span class="prop-name">focused</span> | <span class="prop-name">Mui-focused</span> | Styles applied to the root element if the component is focused.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
-| <span class="prop-name">adornedStart</span> | <span class="prop-name">MuiFilledInput-adornedStart</span> | Styles applied to the root element if `startAdornment` is provided.
-| <span class="prop-name">adornedEnd</span> | <span class="prop-name">MuiFilledInput-adornedEnd</span> | Styles applied to the root element if `endAdornment` is provided.
-| <span class="prop-name">error</span> | <span class="prop-name">Mui-error</span> | Styles applied to the root element if `error={true}`.
-| <span class="prop-name">marginDense</span> | <span class="prop-name">MuiFilledInput-marginDense</span> | Styles applied to the `input` element if `margin="dense"`.
-| <span class="prop-name">multiline</span> | <span class="prop-name">MuiFilledInput-multiline</span> | Styles applied to the root element if `multiline={true}`.
-| <span class="prop-name">input</span> | <span class="prop-name">MuiFilledInput-input</span> | Styles applied to the `input` element.
-| <span class="prop-name">inputMarginDense</span> | <span class="prop-name">MuiFilledInput-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
-| <span class="prop-name">inputHiddenLabel</span> | <span class="prop-name">MuiFilledInput-inputHiddenLabel</span> | Styles applied to the `input` if in `<FormControl hiddenLabel />`.
-| <span class="prop-name">inputSelect</span> | <span class="prop-name">MuiFilledInput-inputSelect</span> | Styles applied to the `input` element if `select={true}`.
-| <span class="prop-name">inputMultiline</span> | <span class="prop-name">MuiFilledInput-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
-| <span class="prop-name">inputAdornedStart</span> | <span class="prop-name">MuiFilledInput-inputAdornedStart</span> | Styles applied to the `input` element if `startAdornment` is provided.
-| <span class="prop-name">inputAdornedEnd</span> | <span class="prop-name">MuiFilledInput-inputAdornedEnd</span> | Styles applied to the `input` element if `endAdornment` is provided.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiFilledInput-root</span> | Styles applied to the root element.
+| <span class="prop-name">underline</span> | <span class="prop-name">.MuiFilledInput-underline</span> | Styles applied to the root element if `disableUnderline={false}`.
+| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root element if the component is focused.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
+| <span class="prop-name">adornedStart</span> | <span class="prop-name">.MuiFilledInput-adornedStart</span> | Styles applied to the root element if `startAdornment` is provided.
+| <span class="prop-name">adornedEnd</span> | <span class="prop-name">.MuiFilledInput-adornedEnd</span> | Styles applied to the root element if `endAdornment` is provided.
+| <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Styles applied to the root element if `error={true}`.
+| <span class="prop-name">marginDense</span> | <span class="prop-name">.MuiFilledInput-marginDense</span> | Styles applied to the `input` element if `margin="dense"`.
+| <span class="prop-name">multiline</span> | <span class="prop-name">.MuiFilledInput-multiline</span> | Styles applied to the root element if `multiline={true}`.
+| <span class="prop-name">input</span> | <span class="prop-name">.MuiFilledInput-input</span> | Styles applied to the `input` element.
+| <span class="prop-name">inputMarginDense</span> | <span class="prop-name">.MuiFilledInput-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
+| <span class="prop-name">inputHiddenLabel</span> | <span class="prop-name">.MuiFilledInput-inputHiddenLabel</span> | Styles applied to the `input` if in `<FormControl hiddenLabel />`.
+| <span class="prop-name">inputSelect</span> | <span class="prop-name">.MuiFilledInput-inputSelect</span> | Styles applied to the `input` element if `select={true}`.
+| <span class="prop-name">inputMultiline</span> | <span class="prop-name">.MuiFilledInput-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
+| <span class="prop-name">inputAdornedStart</span> | <span class="prop-name">.MuiFilledInput-inputAdornedStart</span> | Styles applied to the `input` element if `startAdornment` is provided.
+| <span class="prop-name">inputAdornedEnd</span> | <span class="prop-name">.MuiFilledInput-inputAdornedEnd</span> | Styles applied to the `input` element if `endAdornment` is provided.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/form-control-label.md b/docs/pages/api/form-control-label.md
index 56174e182d4c21..6bec64f48b66fb 100644
--- a/docs/pages/api/form-control-label.md
+++ b/docs/pages/api/form-control-label.md
@@ -47,12 +47,12 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiFormControlLabel-root</span> | Styles applied to the root element.
-| <span class="prop-name">labelPlacementStart</span> | <span class="prop-name">MuiFormControlLabel-labelPlacementStart</span> | Styles applied to the root element if `labelPlacement="start"`.
-| <span class="prop-name">labelPlacementTop</span> | <span class="prop-name">MuiFormControlLabel-labelPlacementTop</span> | Styles applied to the root element if `labelPlacement="top"`.
-| <span class="prop-name">labelPlacementBottom</span> | <span class="prop-name">MuiFormControlLabel-labelPlacementBottom</span> | Styles applied to the root element if `labelPlacement="bottom"`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">label</span> | <span class="prop-name">MuiFormControlLabel-label</span> | Styles applied to the label's Typography component.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiFormControlLabel-root</span> | Styles applied to the root element.
+| <span class="prop-name">labelPlacementStart</span> | <span class="prop-name">.MuiFormControlLabel-labelPlacementStart</span> | Styles applied to the root element if `labelPlacement="start"`.
+| <span class="prop-name">labelPlacementTop</span> | <span class="prop-name">.MuiFormControlLabel-labelPlacementTop</span> | Styles applied to the root element if `labelPlacement="top"`.
+| <span class="prop-name">labelPlacementBottom</span> | <span class="prop-name">.MuiFormControlLabel-labelPlacementBottom</span> | Styles applied to the root element if `labelPlacement="bottom"`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiFormControlLabel-label</span> | Styles applied to the label's Typography component.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/form-control.md b/docs/pages/api/form-control.md
index 0ae0894fe4af91..31a838ff5bcb96 100644
--- a/docs/pages/api/form-control.md
+++ b/docs/pages/api/form-control.md
@@ -66,10 +66,10 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiFormControl-root</span> | Styles applied to the root element.
-| <span class="prop-name">marginNormal</span> | <span class="prop-name">MuiFormControl-marginNormal</span> | Styles applied to the root element if `margin="normal"`.
-| <span class="prop-name">marginDense</span> | <span class="prop-name">MuiFormControl-marginDense</span> | Styles applied to the root element if `margin="dense"`.
-| <span class="prop-name">fullWidth</span> | <span class="prop-name">MuiFormControl-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiFormControl-root</span> | Styles applied to the root element.
+| <span class="prop-name">marginNormal</span> | <span class="prop-name">.MuiFormControl-marginNormal</span> | Styles applied to the root element if `margin="normal"`.
+| <span class="prop-name">marginDense</span> | <span class="prop-name">.MuiFormControl-marginDense</span> | Styles applied to the root element if `margin="dense"`.
+| <span class="prop-name">fullWidth</span> | <span class="prop-name">.MuiFormControl-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/form-group.md b/docs/pages/api/form-group.md
index f21e3407dcc20e..c3aa3e34adfbb4 100644
--- a/docs/pages/api/form-group.md
+++ b/docs/pages/api/form-group.md
@@ -41,8 +41,8 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiFormGroup-root</span> | Styles applied to the root element.
-| <span class="prop-name">row</span> | <span class="prop-name">MuiFormGroup-row</span> | Styles applied to the root element if `row={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiFormGroup-root</span> | Styles applied to the root element.
+| <span class="prop-name">row</span> | <span class="prop-name">.MuiFormGroup-row</span> | Styles applied to the root element if `row={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/form-helper-text.md b/docs/pages/api/form-helper-text.md
index 6417f7957eec21..ea4eff79c5b5bf 100644
--- a/docs/pages/api/form-helper-text.md
+++ b/docs/pages/api/form-helper-text.md
@@ -46,14 +46,14 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiFormHelperText-root</span> | Styles applied to the root element.
-| <span class="prop-name">error</span> | <span class="prop-name">Mui-error</span> | Pseudo-class applied to the root element if `error={true}`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">marginDense</span> | <span class="prop-name">MuiFormHelperText-marginDense</span> | Styles applied to the root element if `margin="dense"`.
-| <span class="prop-name">contained</span> | <span class="prop-name">MuiFormHelperText-contained</span> | Styles applied to the root element if `variant="filled"` or `variant="outlined"`.
-| <span class="prop-name">focused</span> | <span class="prop-name">Mui-focused</span> | Pseudo-class applied to the root element if `focused={true}`.
-| <span class="prop-name">filled</span> | <span class="prop-name">MuiFormHelperText-filled</span> | Pseudo-class applied to the root element if `filled={true}`.
-| <span class="prop-name">required</span> | <span class="prop-name">Mui-required</span> | Pseudo-class applied to the root element if `required={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiFormHelperText-root</span> | Styles applied to the root element.
+| <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Pseudo-class applied to the root element if `error={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">marginDense</span> | <span class="prop-name">.MuiFormHelperText-marginDense</span> | Styles applied to the root element if `margin="dense"`.
+| <span class="prop-name">contained</span> | <span class="prop-name">.MuiFormHelperText-contained</span> | Styles applied to the root element if `variant="filled"` or `variant="outlined"`.
+| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Pseudo-class applied to the root element if `focused={true}`.
+| <span class="prop-name">filled</span> | <span class="prop-name">.MuiFormHelperText-filled</span> | Pseudo-class applied to the root element if `filled={true}`.
+| <span class="prop-name">required</span> | <span class="prop-name">.Mui-required</span> | Pseudo-class applied to the root element if `required={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/form-label.md b/docs/pages/api/form-label.md
index af69bd0f7631a5..c34dbd980294cb 100644
--- a/docs/pages/api/form-label.md
+++ b/docs/pages/api/form-label.md
@@ -44,13 +44,13 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiFormLabel-root</span> | Styles applied to the root element.
-| <span class="prop-name">focused</span> | <span class="prop-name">Mui-focused</span> | Pseudo-class applied to the root element if `focused={true}`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">error</span> | <span class="prop-name">Mui-error</span> | Pseudo-class applied to the root element if `error={true}`.
-| <span class="prop-name">filled</span> | <span class="prop-name">MuiFormLabel-filled</span> | Pseudo-class applied to the root element if `filled={true}`.
-| <span class="prop-name">required</span> | <span class="prop-name">Mui-required</span> | Pseudo-class applied to the root element if `required={true}`.
-| <span class="prop-name">asterisk</span> | <span class="prop-name">MuiFormLabel-asterisk</span> | Styles applied to the asterisk element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiFormLabel-root</span> | Styles applied to the root element.
+| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Pseudo-class applied to the root element if `focused={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Pseudo-class applied to the root element if `error={true}`.
+| <span class="prop-name">filled</span> | <span class="prop-name">.MuiFormLabel-filled</span> | Pseudo-class applied to the root element if `filled={true}`.
+| <span class="prop-name">required</span> | <span class="prop-name">.Mui-required</span> | Pseudo-class applied to the root element if `required={true}`.
+| <span class="prop-name">asterisk</span> | <span class="prop-name">.MuiFormLabel-asterisk</span> | Styles applied to the asterisk element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/grid-list-tile-bar.md b/docs/pages/api/grid-list-tile-bar.md
index eb5573ae70eda8..8b8c24395e9334 100644
--- a/docs/pages/api/grid-list-tile-bar.md
+++ b/docs/pages/api/grid-list-tile-bar.md
@@ -42,17 +42,17 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiGridListTileBar-root</span> | Styles applied to the root element.
-| <span class="prop-name">titlePositionBottom</span> | <span class="prop-name">MuiGridListTileBar-titlePositionBottom</span> | Styles applied to the root element if `titlePosition="bottom"`.
-| <span class="prop-name">titlePositionTop</span> | <span class="prop-name">MuiGridListTileBar-titlePositionTop</span> | Styles applied to the root element if `titlePosition="top"`.
-| <span class="prop-name">rootSubtitle</span> | <span class="prop-name">MuiGridListTileBar-rootSubtitle</span> | Styles applied to the root element if a `subtitle` is provided.
-| <span class="prop-name">titleWrap</span> | <span class="prop-name">MuiGridListTileBar-titleWrap</span> | Styles applied to the title and subtitle container element.
-| <span class="prop-name">titleWrapActionPosLeft</span> | <span class="prop-name">MuiGridListTileBar-titleWrapActionPosLeft</span> | Styles applied to the container element if `actionPosition="left"`.
-| <span class="prop-name">titleWrapActionPosRight</span> | <span class="prop-name">MuiGridListTileBar-titleWrapActionPosRight</span> | Styles applied to the container element if `actionPosition="right"`.
-| <span class="prop-name">title</span> | <span class="prop-name">MuiGridListTileBar-title</span> | Styles applied to the title container element.
-| <span class="prop-name">subtitle</span> | <span class="prop-name">MuiGridListTileBar-subtitle</span> | Styles applied to the subtitle container element.
-| <span class="prop-name">actionIcon</span> | <span class="prop-name">MuiGridListTileBar-actionIcon</span> | Styles applied to the actionIcon if supplied.
-| <span class="prop-name">actionIconActionPosLeft</span> | <span class="prop-name">MuiGridListTileBar-actionIconActionPosLeft</span> | Styles applied to the actionIcon if `actionPosition="left"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiGridListTileBar-root</span> | Styles applied to the root element.
+| <span class="prop-name">titlePositionBottom</span> | <span class="prop-name">.MuiGridListTileBar-titlePositionBottom</span> | Styles applied to the root element if `titlePosition="bottom"`.
+| <span class="prop-name">titlePositionTop</span> | <span class="prop-name">.MuiGridListTileBar-titlePositionTop</span> | Styles applied to the root element if `titlePosition="top"`.
+| <span class="prop-name">rootSubtitle</span> | <span class="prop-name">.MuiGridListTileBar-rootSubtitle</span> | Styles applied to the root element if a `subtitle` is provided.
+| <span class="prop-name">titleWrap</span> | <span class="prop-name">.MuiGridListTileBar-titleWrap</span> | Styles applied to the title and subtitle container element.
+| <span class="prop-name">titleWrapActionPosLeft</span> | <span class="prop-name">.MuiGridListTileBar-titleWrapActionPosLeft</span> | Styles applied to the container element if `actionPosition="left"`.
+| <span class="prop-name">titleWrapActionPosRight</span> | <span class="prop-name">.MuiGridListTileBar-titleWrapActionPosRight</span> | Styles applied to the container element if `actionPosition="right"`.
+| <span class="prop-name">title</span> | <span class="prop-name">.MuiGridListTileBar-title</span> | Styles applied to the title container element.
+| <span class="prop-name">subtitle</span> | <span class="prop-name">.MuiGridListTileBar-subtitle</span> | Styles applied to the subtitle container element.
+| <span class="prop-name">actionIcon</span> | <span class="prop-name">.MuiGridListTileBar-actionIcon</span> | Styles applied to the actionIcon if supplied.
+| <span class="prop-name">actionIconActionPosLeft</span> | <span class="prop-name">.MuiGridListTileBar-actionIconActionPosLeft</span> | Styles applied to the actionIcon if `actionPosition="left"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/grid-list-tile.md b/docs/pages/api/grid-list-tile.md
index 7cc4fd83aab141..2ca4c5a1074a86 100644
--- a/docs/pages/api/grid-list-tile.md
+++ b/docs/pages/api/grid-list-tile.md
@@ -41,10 +41,10 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiGridListTile-root</span> | Styles applied to the root element.
-| <span class="prop-name">tile</span> | <span class="prop-name">MuiGridListTile-tile</span> | Styles applied to the `div` element that wraps the children.
-| <span class="prop-name">imgFullHeight</span> | <span class="prop-name">MuiGridListTile-imgFullHeight</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
-| <span class="prop-name">imgFullWidth</span> | <span class="prop-name">MuiGridListTile-imgFullWidth</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiGridListTile-root</span> | Styles applied to the root element.
+| <span class="prop-name">tile</span> | <span class="prop-name">.MuiGridListTile-tile</span> | Styles applied to the `div` element that wraps the children.
+| <span class="prop-name">imgFullHeight</span> | <span class="prop-name">.MuiGridListTile-imgFullHeight</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
+| <span class="prop-name">imgFullWidth</span> | <span class="prop-name">.MuiGridListTile-imgFullWidth</span> | Styles applied to an `img` element child, if needed to ensure it covers the tile.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/grid-list.md b/docs/pages/api/grid-list.md
index 39eb9dcca36ec6..3c63251128d77a 100644
--- a/docs/pages/api/grid-list.md
+++ b/docs/pages/api/grid-list.md
@@ -42,7 +42,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiGridList-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiGridList-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/grid.md b/docs/pages/api/grid.md
index 3f73c106df9483..60e3ddaa10144b 100644
--- a/docs/pages/api/grid.md
+++ b/docs/pages/api/grid.md
@@ -53,53 +53,53 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiGrid-root</span> | Styles applied to the root element
-| <span class="prop-name">container</span> | <span class="prop-name">MuiGrid-container</span> | Styles applied to the root element if `container={true}`.
-| <span class="prop-name">item</span> | <span class="prop-name">MuiGrid-item</span> | Styles applied to the root element if `item={true}`.
-| <span class="prop-name">zeroMinWidth</span> | <span class="prop-name">MuiGrid-zeroMinWidth</span> | Styles applied to the root element if `zeroMinWidth={true}`.
-| <span class="prop-name">direction-xs-column</span> | <span class="prop-name">MuiGrid-direction-xs-column</span> | 
-| <span class="prop-name">direction-xs-column-reverse</span> | <span class="prop-name">MuiGrid-direction-xs-column-reverse</span> | 
-| <span class="prop-name">direction-xs-row-reverse</span> | <span class="prop-name">MuiGrid-direction-xs-row-reverse</span> | 
-| <span class="prop-name">wrap-xs-nowrap</span> | <span class="prop-name">MuiGrid-wrap-xs-nowrap</span> | 
-| <span class="prop-name">wrap-xs-wrap-reverse</span> | <span class="prop-name">MuiGrid-wrap-xs-wrap-reverse</span> | 
-| <span class="prop-name">align-items-xs-center</span> | <span class="prop-name">MuiGrid-align-items-xs-center</span> | 
-| <span class="prop-name">align-items-xs-flex-start</span> | <span class="prop-name">MuiGrid-align-items-xs-flex-start</span> | 
-| <span class="prop-name">align-items-xs-flex-end</span> | <span class="prop-name">MuiGrid-align-items-xs-flex-end</span> | 
-| <span class="prop-name">align-items-xs-baseline</span> | <span class="prop-name">MuiGrid-align-items-xs-baseline</span> | 
-| <span class="prop-name">align-content-xs-center</span> | <span class="prop-name">MuiGrid-align-content-xs-center</span> | 
-| <span class="prop-name">align-content-xs-flex-start</span> | <span class="prop-name">MuiGrid-align-content-xs-flex-start</span> | 
-| <span class="prop-name">align-content-xs-flex-end</span> | <span class="prop-name">MuiGrid-align-content-xs-flex-end</span> | 
-| <span class="prop-name">align-content-xs-space-between</span> | <span class="prop-name">MuiGrid-align-content-xs-space-between</span> | 
-| <span class="prop-name">align-content-xs-space-around</span> | <span class="prop-name">MuiGrid-align-content-xs-space-around</span> | 
-| <span class="prop-name">justify-xs-center</span> | <span class="prop-name">MuiGrid-justify-xs-center</span> | 
-| <span class="prop-name">justify-xs-flex-end</span> | <span class="prop-name">MuiGrid-justify-xs-flex-end</span> | 
-| <span class="prop-name">justify-xs-space-between</span> | <span class="prop-name">MuiGrid-justify-xs-space-between</span> | 
-| <span class="prop-name">justify-xs-space-around</span> | <span class="prop-name">MuiGrid-justify-xs-space-around</span> | 
-| <span class="prop-name">justify-xs-space-evenly</span> | <span class="prop-name">MuiGrid-justify-xs-space-evenly</span> | 
-| <span class="prop-name">spacing-xs-1</span> | <span class="prop-name">MuiGrid-spacing-xs-1</span> | 
-| <span class="prop-name">spacing-xs-2</span> | <span class="prop-name">MuiGrid-spacing-xs-2</span> | 
-| <span class="prop-name">spacing-xs-3</span> | <span class="prop-name">MuiGrid-spacing-xs-3</span> | 
-| <span class="prop-name">spacing-xs-4</span> | <span class="prop-name">MuiGrid-spacing-xs-4</span> | 
-| <span class="prop-name">spacing-xs-5</span> | <span class="prop-name">MuiGrid-spacing-xs-5</span> | 
-| <span class="prop-name">spacing-xs-6</span> | <span class="prop-name">MuiGrid-spacing-xs-6</span> | 
-| <span class="prop-name">spacing-xs-7</span> | <span class="prop-name">MuiGrid-spacing-xs-7</span> | 
-| <span class="prop-name">spacing-xs-8</span> | <span class="prop-name">MuiGrid-spacing-xs-8</span> | 
-| <span class="prop-name">spacing-xs-9</span> | <span class="prop-name">MuiGrid-spacing-xs-9</span> | 
-| <span class="prop-name">spacing-xs-10</span> | <span class="prop-name">MuiGrid-spacing-xs-10</span> | 
-| <span class="prop-name">grid-xs-auto</span> | <span class="prop-name">MuiGrid-grid-xs-auto</span> | 
-| <span class="prop-name">grid-xs-true</span> | <span class="prop-name">MuiGrid-grid-xs-true</span> | 
-| <span class="prop-name">grid-xs-1</span> | <span class="prop-name">MuiGrid-grid-xs-1</span> | 
-| <span class="prop-name">grid-xs-2</span> | <span class="prop-name">MuiGrid-grid-xs-2</span> | 
-| <span class="prop-name">grid-xs-3</span> | <span class="prop-name">MuiGrid-grid-xs-3</span> | 
-| <span class="prop-name">grid-xs-4</span> | <span class="prop-name">MuiGrid-grid-xs-4</span> | 
-| <span class="prop-name">grid-xs-5</span> | <span class="prop-name">MuiGrid-grid-xs-5</span> | 
-| <span class="prop-name">grid-xs-6</span> | <span class="prop-name">MuiGrid-grid-xs-6</span> | 
-| <span class="prop-name">grid-xs-7</span> | <span class="prop-name">MuiGrid-grid-xs-7</span> | 
-| <span class="prop-name">grid-xs-8</span> | <span class="prop-name">MuiGrid-grid-xs-8</span> | 
-| <span class="prop-name">grid-xs-9</span> | <span class="prop-name">MuiGrid-grid-xs-9</span> | 
-| <span class="prop-name">grid-xs-10</span> | <span class="prop-name">MuiGrid-grid-xs-10</span> | 
-| <span class="prop-name">grid-xs-11</span> | <span class="prop-name">MuiGrid-grid-xs-11</span> | 
-| <span class="prop-name">grid-xs-12</span> | <span class="prop-name">MuiGrid-grid-xs-12</span> | 
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiGrid-root</span> | Styles applied to the root element
+| <span class="prop-name">container</span> | <span class="prop-name">.MuiGrid-container</span> | Styles applied to the root element if `container={true}`.
+| <span class="prop-name">item</span> | <span class="prop-name">.MuiGrid-item</span> | Styles applied to the root element if `item={true}`.
+| <span class="prop-name">zeroMinWidth</span> | <span class="prop-name">.MuiGrid-zeroMinWidth</span> | Styles applied to the root element if `zeroMinWidth={true}`.
+| <span class="prop-name">direction-xs-column</span> | <span class="prop-name">.MuiGrid-direction-xs-column</span> | 
+| <span class="prop-name">direction-xs-column-reverse</span> | <span class="prop-name">.MuiGrid-direction-xs-column-reverse</span> | 
+| <span class="prop-name">direction-xs-row-reverse</span> | <span class="prop-name">.MuiGrid-direction-xs-row-reverse</span> | 
+| <span class="prop-name">wrap-xs-nowrap</span> | <span class="prop-name">.MuiGrid-wrap-xs-nowrap</span> | 
+| <span class="prop-name">wrap-xs-wrap-reverse</span> | <span class="prop-name">.MuiGrid-wrap-xs-wrap-reverse</span> | 
+| <span class="prop-name">align-items-xs-center</span> | <span class="prop-name">.MuiGrid-align-items-xs-center</span> | 
+| <span class="prop-name">align-items-xs-flex-start</span> | <span class="prop-name">.MuiGrid-align-items-xs-flex-start</span> | 
+| <span class="prop-name">align-items-xs-flex-end</span> | <span class="prop-name">.MuiGrid-align-items-xs-flex-end</span> | 
+| <span class="prop-name">align-items-xs-baseline</span> | <span class="prop-name">.MuiGrid-align-items-xs-baseline</span> | 
+| <span class="prop-name">align-content-xs-center</span> | <span class="prop-name">.MuiGrid-align-content-xs-center</span> | 
+| <span class="prop-name">align-content-xs-flex-start</span> | <span class="prop-name">.MuiGrid-align-content-xs-flex-start</span> | 
+| <span class="prop-name">align-content-xs-flex-end</span> | <span class="prop-name">.MuiGrid-align-content-xs-flex-end</span> | 
+| <span class="prop-name">align-content-xs-space-between</span> | <span class="prop-name">.MuiGrid-align-content-xs-space-between</span> | 
+| <span class="prop-name">align-content-xs-space-around</span> | <span class="prop-name">.MuiGrid-align-content-xs-space-around</span> | 
+| <span class="prop-name">justify-xs-center</span> | <span class="prop-name">.MuiGrid-justify-xs-center</span> | 
+| <span class="prop-name">justify-xs-flex-end</span> | <span class="prop-name">.MuiGrid-justify-xs-flex-end</span> | 
+| <span class="prop-name">justify-xs-space-between</span> | <span class="prop-name">.MuiGrid-justify-xs-space-between</span> | 
+| <span class="prop-name">justify-xs-space-around</span> | <span class="prop-name">.MuiGrid-justify-xs-space-around</span> | 
+| <span class="prop-name">justify-xs-space-evenly</span> | <span class="prop-name">.MuiGrid-justify-xs-space-evenly</span> | 
+| <span class="prop-name">spacing-xs-1</span> | <span class="prop-name">.MuiGrid-spacing-xs-1</span> | 
+| <span class="prop-name">spacing-xs-2</span> | <span class="prop-name">.MuiGrid-spacing-xs-2</span> | 
+| <span class="prop-name">spacing-xs-3</span> | <span class="prop-name">.MuiGrid-spacing-xs-3</span> | 
+| <span class="prop-name">spacing-xs-4</span> | <span class="prop-name">.MuiGrid-spacing-xs-4</span> | 
+| <span class="prop-name">spacing-xs-5</span> | <span class="prop-name">.MuiGrid-spacing-xs-5</span> | 
+| <span class="prop-name">spacing-xs-6</span> | <span class="prop-name">.MuiGrid-spacing-xs-6</span> | 
+| <span class="prop-name">spacing-xs-7</span> | <span class="prop-name">.MuiGrid-spacing-xs-7</span> | 
+| <span class="prop-name">spacing-xs-8</span> | <span class="prop-name">.MuiGrid-spacing-xs-8</span> | 
+| <span class="prop-name">spacing-xs-9</span> | <span class="prop-name">.MuiGrid-spacing-xs-9</span> | 
+| <span class="prop-name">spacing-xs-10</span> | <span class="prop-name">.MuiGrid-spacing-xs-10</span> | 
+| <span class="prop-name">grid-xs-auto</span> | <span class="prop-name">.MuiGrid-grid-xs-auto</span> | 
+| <span class="prop-name">grid-xs-true</span> | <span class="prop-name">.MuiGrid-grid-xs-true</span> | 
+| <span class="prop-name">grid-xs-1</span> | <span class="prop-name">.MuiGrid-grid-xs-1</span> | 
+| <span class="prop-name">grid-xs-2</span> | <span class="prop-name">.MuiGrid-grid-xs-2</span> | 
+| <span class="prop-name">grid-xs-3</span> | <span class="prop-name">.MuiGrid-grid-xs-3</span> | 
+| <span class="prop-name">grid-xs-4</span> | <span class="prop-name">.MuiGrid-grid-xs-4</span> | 
+| <span class="prop-name">grid-xs-5</span> | <span class="prop-name">.MuiGrid-grid-xs-5</span> | 
+| <span class="prop-name">grid-xs-6</span> | <span class="prop-name">.MuiGrid-grid-xs-6</span> | 
+| <span class="prop-name">grid-xs-7</span> | <span class="prop-name">.MuiGrid-grid-xs-7</span> | 
+| <span class="prop-name">grid-xs-8</span> | <span class="prop-name">.MuiGrid-grid-xs-8</span> | 
+| <span class="prop-name">grid-xs-9</span> | <span class="prop-name">.MuiGrid-grid-xs-9</span> | 
+| <span class="prop-name">grid-xs-10</span> | <span class="prop-name">.MuiGrid-grid-xs-10</span> | 
+| <span class="prop-name">grid-xs-11</span> | <span class="prop-name">.MuiGrid-grid-xs-11</span> | 
+| <span class="prop-name">grid-xs-12</span> | <span class="prop-name">.MuiGrid-grid-xs-12</span> | 
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/icon-button.md b/docs/pages/api/icon-button.md
index a1a7a5b11ae731..f04f839f50d703 100644
--- a/docs/pages/api/icon-button.md
+++ b/docs/pages/api/icon-button.md
@@ -45,15 +45,15 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiIconButton-root</span> | Styles applied to the root element.
-| <span class="prop-name">edgeStart</span> | <span class="prop-name">MuiIconButton-edgeStart</span> | Styles applied to the root element if `edge="start"`.
-| <span class="prop-name">edgeEnd</span> | <span class="prop-name">MuiIconButton-edgeEnd</span> | Styles applied to the root element if `edge="end"`.
-| <span class="prop-name">colorInherit</span> | <span class="prop-name">MuiIconButton-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiIconButton-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiIconButton-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">sizeSmall</span> | <span class="prop-name">MuiIconButton-sizeSmall</span> | Styles applied to the root element if `size="small"`.
-| <span class="prop-name">label</span> | <span class="prop-name">MuiIconButton-label</span> | Styles applied to the children container element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiIconButton-root</span> | Styles applied to the root element.
+| <span class="prop-name">edgeStart</span> | <span class="prop-name">.MuiIconButton-edgeStart</span> | Styles applied to the root element if `edge="start"`.
+| <span class="prop-name">edgeEnd</span> | <span class="prop-name">.MuiIconButton-edgeEnd</span> | Styles applied to the root element if `edge="end"`.
+| <span class="prop-name">colorInherit</span> | <span class="prop-name">.MuiIconButton-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiIconButton-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiIconButton-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">sizeSmall</span> | <span class="prop-name">.MuiIconButton-sizeSmall</span> | Styles applied to the root element if `size="small"`.
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiIconButton-label</span> | Styles applied to the children container element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/icon.md b/docs/pages/api/icon.md
index 24ae1b8f1d1cbb..42030b668c433f 100644
--- a/docs/pages/api/icon.md
+++ b/docs/pages/api/icon.md
@@ -41,15 +41,15 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiIcon-root</span> | Styles applied to the root element.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiIcon-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiIcon-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
-| <span class="prop-name">colorAction</span> | <span class="prop-name">MuiIcon-colorAction</span> | Styles applied to the root element if `color="action"`.
-| <span class="prop-name">colorError</span> | <span class="prop-name">MuiIcon-colorError</span> | Styles applied to the root element if `color="error"`.
-| <span class="prop-name">colorDisabled</span> | <span class="prop-name">MuiIcon-colorDisabled</span> | Styles applied to the root element if `color="disabled"`.
-| <span class="prop-name">fontSizeInherit</span> | <span class="prop-name">MuiIcon-fontSizeInherit</span> | 
-| <span class="prop-name">fontSizeSmall</span> | <span class="prop-name">MuiIcon-fontSizeSmall</span> | Styles applied to the root element if `fontSize="small"`.
-| <span class="prop-name">fontSizeLarge</span> | <span class="prop-name">MuiIcon-fontSizeLarge</span> | Styles applied to the root element if `fontSize="large"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiIcon-root</span> | Styles applied to the root element.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiIcon-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiIcon-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">colorAction</span> | <span class="prop-name">.MuiIcon-colorAction</span> | Styles applied to the root element if `color="action"`.
+| <span class="prop-name">colorError</span> | <span class="prop-name">.MuiIcon-colorError</span> | Styles applied to the root element if `color="error"`.
+| <span class="prop-name">colorDisabled</span> | <span class="prop-name">.MuiIcon-colorDisabled</span> | Styles applied to the root element if `color="disabled"`.
+| <span class="prop-name">fontSizeInherit</span> | <span class="prop-name">.MuiIcon-fontSizeInherit</span> | 
+| <span class="prop-name">fontSizeSmall</span> | <span class="prop-name">.MuiIcon-fontSizeSmall</span> | Styles applied to the root element if `fontSize="small"`.
+| <span class="prop-name">fontSizeLarge</span> | <span class="prop-name">.MuiIcon-fontSizeLarge</span> | Styles applied to the root element if `fontSize="large"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/input-adornment.md b/docs/pages/api/input-adornment.md
index 8a7331b20ea1eb..de9e6cc5fa2a62 100644
--- a/docs/pages/api/input-adornment.md
+++ b/docs/pages/api/input-adornment.md
@@ -43,13 +43,13 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiInputAdornment-root</span> | Styles applied to the root element.
-| <span class="prop-name">filled</span> | <span class="prop-name">MuiInputAdornment-filled</span> | Styles applied to the root element if `variant="filled"`.
-| <span class="prop-name">positionStart</span> | <span class="prop-name">MuiInputAdornment-positionStart</span> | Styles applied to the root element if `position="start"`.
-| <span class="prop-name">positionEnd</span> | <span class="prop-name">MuiInputAdornment-positionEnd</span> | Styles applied to the root element if `position="end"`.
-| <span class="prop-name">disablePointerEvents</span> | <span class="prop-name">MuiInputAdornment-disablePointerEvents</span> | Styles applied to the root element if `disablePointerEvents=true`.
-| <span class="prop-name">hiddenLabel</span> | <span class="prop-name">MuiInputAdornment-hiddenLabel</span> | Styles applied if the adornment is used inside &lt;FormControl hiddenLabel />.
-| <span class="prop-name">marginDense</span> | <span class="prop-name">MuiInputAdornment-marginDense</span> | Styles applied if the adornment is used inside &lt;FormControl margin="dense" />.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiInputAdornment-root</span> | Styles applied to the root element.
+| <span class="prop-name">filled</span> | <span class="prop-name">.MuiInputAdornment-filled</span> | Styles applied to the root element if `variant="filled"`.
+| <span class="prop-name">positionStart</span> | <span class="prop-name">.MuiInputAdornment-positionStart</span> | Styles applied to the root element if `position="start"`.
+| <span class="prop-name">positionEnd</span> | <span class="prop-name">.MuiInputAdornment-positionEnd</span> | Styles applied to the root element if `position="end"`.
+| <span class="prop-name">disablePointerEvents</span> | <span class="prop-name">.MuiInputAdornment-disablePointerEvents</span> | Styles applied to the root element if `disablePointerEvents=true`.
+| <span class="prop-name">hiddenLabel</span> | <span class="prop-name">.MuiInputAdornment-hiddenLabel</span> | Styles applied if the adornment is used inside &lt;FormControl hiddenLabel />.
+| <span class="prop-name">marginDense</span> | <span class="prop-name">.MuiInputAdornment-marginDense</span> | Styles applied if the adornment is used inside &lt;FormControl margin="dense" />.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/input-base.md b/docs/pages/api/input-base.md
index 576afdada96df7..0989a03eade364 100644
--- a/docs/pages/api/input-base.md
+++ b/docs/pages/api/input-base.md
@@ -64,24 +64,24 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiInputBase-root</span> | Styles applied to the root element.
-| <span class="prop-name">formControl</span> | <span class="prop-name">MuiInputBase-formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
-| <span class="prop-name">focused</span> | <span class="prop-name">Mui-focused</span> | Styles applied to the root element if the component is focused.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
-| <span class="prop-name">adornedStart</span> | <span class="prop-name">MuiInputBase-adornedStart</span> | Styles applied to the root element if `startAdornment` is provided.
-| <span class="prop-name">adornedEnd</span> | <span class="prop-name">MuiInputBase-adornedEnd</span> | Styles applied to the root element if `endAdornment` is provided.
-| <span class="prop-name">error</span> | <span class="prop-name">Mui-error</span> | Styles applied to the root element if `error={true}`.
-| <span class="prop-name">marginDense</span> | <span class="prop-name">MuiInputBase-marginDense</span> | Styles applied to the `input` element if `margin="dense"`.
-| <span class="prop-name">multiline</span> | <span class="prop-name">MuiInputBase-multiline</span> | Styles applied to the root element if `multiline={true}`.
-| <span class="prop-name">fullWidth</span> | <span class="prop-name">MuiInputBase-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
-| <span class="prop-name">input</span> | <span class="prop-name">MuiInputBase-input</span> | Styles applied to the `input` element.
-| <span class="prop-name">inputMarginDense</span> | <span class="prop-name">MuiInputBase-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
-| <span class="prop-name">inputSelect</span> | <span class="prop-name">MuiInputBase-inputSelect</span> | Styles applied to the `input` element if `select={true}`.
-| <span class="prop-name">inputMultiline</span> | <span class="prop-name">MuiInputBase-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
-| <span class="prop-name">inputTypeSearch</span> | <span class="prop-name">MuiInputBase-inputTypeSearch</span> | Styles applied to the `input` element if `type="search"`.
-| <span class="prop-name">inputAdornedStart</span> | <span class="prop-name">MuiInputBase-inputAdornedStart</span> | Styles applied to the `input` element if `startAdornment` is provided.
-| <span class="prop-name">inputAdornedEnd</span> | <span class="prop-name">MuiInputBase-inputAdornedEnd</span> | Styles applied to the `input` element if `endAdornment` is provided.
-| <span class="prop-name">inputHiddenLabel</span> | <span class="prop-name">MuiInputBase-inputHiddenLabel</span> | Styles applied to the `input` element if `hiddenLabel={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiInputBase-root</span> | Styles applied to the root element.
+| <span class="prop-name">formControl</span> | <span class="prop-name">.MuiInputBase-formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
+| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root element if the component is focused.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
+| <span class="prop-name">adornedStart</span> | <span class="prop-name">.MuiInputBase-adornedStart</span> | Styles applied to the root element if `startAdornment` is provided.
+| <span class="prop-name">adornedEnd</span> | <span class="prop-name">.MuiInputBase-adornedEnd</span> | Styles applied to the root element if `endAdornment` is provided.
+| <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Styles applied to the root element if `error={true}`.
+| <span class="prop-name">marginDense</span> | <span class="prop-name">.MuiInputBase-marginDense</span> | Styles applied to the `input` element if `margin="dense"`.
+| <span class="prop-name">multiline</span> | <span class="prop-name">.MuiInputBase-multiline</span> | Styles applied to the root element if `multiline={true}`.
+| <span class="prop-name">fullWidth</span> | <span class="prop-name">.MuiInputBase-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
+| <span class="prop-name">input</span> | <span class="prop-name">.MuiInputBase-input</span> | Styles applied to the `input` element.
+| <span class="prop-name">inputMarginDense</span> | <span class="prop-name">.MuiInputBase-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
+| <span class="prop-name">inputSelect</span> | <span class="prop-name">.MuiInputBase-inputSelect</span> | Styles applied to the `input` element if `select={true}`.
+| <span class="prop-name">inputMultiline</span> | <span class="prop-name">.MuiInputBase-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
+| <span class="prop-name">inputTypeSearch</span> | <span class="prop-name">.MuiInputBase-inputTypeSearch</span> | Styles applied to the `input` element if `type="search"`.
+| <span class="prop-name">inputAdornedStart</span> | <span class="prop-name">.MuiInputBase-inputAdornedStart</span> | Styles applied to the `input` element if `startAdornment` is provided.
+| <span class="prop-name">inputAdornedEnd</span> | <span class="prop-name">.MuiInputBase-inputAdornedEnd</span> | Styles applied to the `input` element if `endAdornment` is provided.
+| <span class="prop-name">inputHiddenLabel</span> | <span class="prop-name">.MuiInputBase-inputHiddenLabel</span> | Styles applied to the `input` element if `hiddenLabel={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/input-label.md b/docs/pages/api/input-label.md
index de9d6bfc423cc5..d94f05d85f9faf 100644
--- a/docs/pages/api/input-label.md
+++ b/docs/pages/api/input-label.md
@@ -46,18 +46,18 @@ Any other props supplied will be provided to the root element ([FormLabel](/api/
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiInputLabel-root</span> | Styles applied to the root element.
-| <span class="prop-name">focused</span> | <span class="prop-name">Mui-focused</span> | Pseudo-class applied to the root element if `focused={true}`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">error</span> | <span class="prop-name">Mui-error</span> | Pseudo-class applied to the root element if `error={true}`.
-| <span class="prop-name">required</span> | <span class="prop-name">Mui-required</span> | Pseudo-class applied to the root element if `required={true}`.
-| <span class="prop-name">asterisk</span> | <span class="prop-name">MuiInputLabel-asterisk</span> | Pseudo-class applied to the asterisk element.
-| <span class="prop-name">formControl</span> | <span class="prop-name">MuiInputLabel-formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
-| <span class="prop-name">marginDense</span> | <span class="prop-name">MuiInputLabel-marginDense</span> | Styles applied to the root element if `margin="dense"`.
-| <span class="prop-name">shrink</span> | <span class="prop-name">MuiInputLabel-shrink</span> | Styles applied to the `input` element if `shrink={true}`.
-| <span class="prop-name">animated</span> | <span class="prop-name">MuiInputLabel-animated</span> | Styles applied to the `input` element if `disableAnimation={false}`.
-| <span class="prop-name">filled</span> | <span class="prop-name">MuiInputLabel-filled</span> | Styles applied to the root element if `variant="filled"`.
-| <span class="prop-name">outlined</span> | <span class="prop-name">MuiInputLabel-outlined</span> | Styles applied to the root element if `variant="outlined"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiInputLabel-root</span> | Styles applied to the root element.
+| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Pseudo-class applied to the root element if `focused={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Pseudo-class applied to the root element if `error={true}`.
+| <span class="prop-name">required</span> | <span class="prop-name">.Mui-required</span> | Pseudo-class applied to the root element if `required={true}`.
+| <span class="prop-name">asterisk</span> | <span class="prop-name">.MuiInputLabel-asterisk</span> | Pseudo-class applied to the asterisk element.
+| <span class="prop-name">formControl</span> | <span class="prop-name">.MuiInputLabel-formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
+| <span class="prop-name">marginDense</span> | <span class="prop-name">.MuiInputLabel-marginDense</span> | Styles applied to the root element if `margin="dense"`.
+| <span class="prop-name">shrink</span> | <span class="prop-name">.MuiInputLabel-shrink</span> | Styles applied to the `input` element if `shrink={true}`.
+| <span class="prop-name">animated</span> | <span class="prop-name">.MuiInputLabel-animated</span> | Styles applied to the `input` element if `disableAnimation={false}`.
+| <span class="prop-name">filled</span> | <span class="prop-name">.MuiInputLabel-filled</span> | Styles applied to the root element if `variant="filled"`.
+| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiInputLabel-outlined</span> | Styles applied to the root element if `variant="outlined"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/input.md b/docs/pages/api/input.md
index c080acab4881fc..83bb85ebb37d1c 100644
--- a/docs/pages/api/input.md
+++ b/docs/pages/api/input.md
@@ -62,18 +62,18 @@ Any other props supplied will be provided to the root element ([InputBase](/api/
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiInput-root</span> | Styles applied to the root element.
-| <span class="prop-name">formControl</span> | <span class="prop-name">MuiInput-formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
-| <span class="prop-name">focused</span> | <span class="prop-name">Mui-focused</span> | Styles applied to the root element if the component is focused.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
-| <span class="prop-name">underline</span> | <span class="prop-name">MuiInput-underline</span> | Styles applied to the root element if `disableUnderline={false}`.
-| <span class="prop-name">error</span> | <span class="prop-name">Mui-error</span> | Styles applied to the root element if `error={true}`.
-| <span class="prop-name">multiline</span> | <span class="prop-name">MuiInput-multiline</span> | Styles applied to the root element if `multiline={true}`.
-| <span class="prop-name">fullWidth</span> | <span class="prop-name">MuiInput-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
-| <span class="prop-name">input</span> | <span class="prop-name">MuiInput-input</span> | Styles applied to the `input` element.
-| <span class="prop-name">inputMarginDense</span> | <span class="prop-name">MuiInput-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
-| <span class="prop-name">inputMultiline</span> | <span class="prop-name">MuiInput-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
-| <span class="prop-name">inputTypeSearch</span> | <span class="prop-name">MuiInput-inputTypeSearch</span> | Styles applied to the `input` element if `type="search"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiInput-root</span> | Styles applied to the root element.
+| <span class="prop-name">formControl</span> | <span class="prop-name">.MuiInput-formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
+| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root element if the component is focused.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
+| <span class="prop-name">underline</span> | <span class="prop-name">.MuiInput-underline</span> | Styles applied to the root element if `disableUnderline={false}`.
+| <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Styles applied to the root element if `error={true}`.
+| <span class="prop-name">multiline</span> | <span class="prop-name">.MuiInput-multiline</span> | Styles applied to the root element if `multiline={true}`.
+| <span class="prop-name">fullWidth</span> | <span class="prop-name">.MuiInput-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
+| <span class="prop-name">input</span> | <span class="prop-name">.MuiInput-input</span> | Styles applied to the `input` element.
+| <span class="prop-name">inputMarginDense</span> | <span class="prop-name">.MuiInput-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
+| <span class="prop-name">inputMultiline</span> | <span class="prop-name">.MuiInput-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
+| <span class="prop-name">inputTypeSearch</span> | <span class="prop-name">.MuiInput-inputTypeSearch</span> | Styles applied to the `input` element if `type="search"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/linear-progress.md b/docs/pages/api/linear-progress.md
index 7d1ea2c797a839..ea1408506f0d14 100644
--- a/docs/pages/api/linear-progress.md
+++ b/docs/pages/api/linear-progress.md
@@ -45,24 +45,24 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiLinearProgress-root</span> | Styles applied to the root element.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiLinearProgress-colorPrimary</span> | Styles applied to the root and bar2 element if `color="primary"`; bar2 if `variant-"buffer"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiLinearProgress-colorSecondary</span> | Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`.
-| <span class="prop-name">determinate</span> | <span class="prop-name">MuiLinearProgress-determinate</span> | Styles applied to the root element if `variant="determinate"`.
-| <span class="prop-name">indeterminate</span> | <span class="prop-name">MuiLinearProgress-indeterminate</span> | Styles applied to the root element if `variant="indeterminate"`.
-| <span class="prop-name">buffer</span> | <span class="prop-name">MuiLinearProgress-buffer</span> | Styles applied to the root element if `variant="buffer"`.
-| <span class="prop-name">query</span> | <span class="prop-name">MuiLinearProgress-query</span> | Styles applied to the root element if `variant="query"`.
-| <span class="prop-name">dashed</span> | <span class="prop-name">MuiLinearProgress-dashed</span> | Styles applied to the additional bar element if `variant="buffer"`.
-| <span class="prop-name">dashedColorPrimary</span> | <span class="prop-name">MuiLinearProgress-dashedColorPrimary</span> | Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`.
-| <span class="prop-name">dashedColorSecondary</span> | <span class="prop-name">MuiLinearProgress-dashedColorSecondary</span> | Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`.
-| <span class="prop-name">bar</span> | <span class="prop-name">MuiLinearProgress-bar</span> | Styles applied to the layered bar1 and bar2 elements.
-| <span class="prop-name">barColorPrimary</span> | <span class="prop-name">MuiLinearProgress-barColorPrimary</span> | Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer".
-| <span class="prop-name">barColorSecondary</span> | <span class="prop-name">MuiLinearProgress-barColorSecondary</span> | Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer".
-| <span class="prop-name">bar1Indeterminate</span> | <span class="prop-name">MuiLinearProgress-bar1Indeterminate</span> | Styles applied to the bar1 element if `variant="indeterminate or query"`.
-| <span class="prop-name">bar1Determinate</span> | <span class="prop-name">MuiLinearProgress-bar1Determinate</span> | Styles applied to the bar1 element if `variant="determinate"`.
-| <span class="prop-name">bar1Buffer</span> | <span class="prop-name">MuiLinearProgress-bar1Buffer</span> | Styles applied to the bar1 element if `variant="buffer"`.
-| <span class="prop-name">bar2Indeterminate</span> | <span class="prop-name">MuiLinearProgress-bar2Indeterminate</span> | Styles applied to the bar2 element if `variant="indeterminate or query"`.
-| <span class="prop-name">bar2Buffer</span> | <span class="prop-name">MuiLinearProgress-bar2Buffer</span> | Styles applied to the bar2 element if `variant="buffer"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiLinearProgress-root</span> | Styles applied to the root element.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiLinearProgress-colorPrimary</span> | Styles applied to the root and bar2 element if `color="primary"`; bar2 if `variant-"buffer"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiLinearProgress-colorSecondary</span> | Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`.
+| <span class="prop-name">determinate</span> | <span class="prop-name">.MuiLinearProgress-determinate</span> | Styles applied to the root element if `variant="determinate"`.
+| <span class="prop-name">indeterminate</span> | <span class="prop-name">.MuiLinearProgress-indeterminate</span> | Styles applied to the root element if `variant="indeterminate"`.
+| <span class="prop-name">buffer</span> | <span class="prop-name">.MuiLinearProgress-buffer</span> | Styles applied to the root element if `variant="buffer"`.
+| <span class="prop-name">query</span> | <span class="prop-name">.MuiLinearProgress-query</span> | Styles applied to the root element if `variant="query"`.
+| <span class="prop-name">dashed</span> | <span class="prop-name">.MuiLinearProgress-dashed</span> | Styles applied to the additional bar element if `variant="buffer"`.
+| <span class="prop-name">dashedColorPrimary</span> | <span class="prop-name">.MuiLinearProgress-dashedColorPrimary</span> | Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`.
+| <span class="prop-name">dashedColorSecondary</span> | <span class="prop-name">.MuiLinearProgress-dashedColorSecondary</span> | Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`.
+| <span class="prop-name">bar</span> | <span class="prop-name">.MuiLinearProgress-bar</span> | Styles applied to the layered bar1 and bar2 elements.
+| <span class="prop-name">barColorPrimary</span> | <span class="prop-name">.MuiLinearProgress-barColorPrimary</span> | Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer".
+| <span class="prop-name">barColorSecondary</span> | <span class="prop-name">.MuiLinearProgress-barColorSecondary</span> | Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer".
+| <span class="prop-name">bar1Indeterminate</span> | <span class="prop-name">.MuiLinearProgress-bar1Indeterminate</span> | Styles applied to the bar1 element if `variant="indeterminate or query"`.
+| <span class="prop-name">bar1Determinate</span> | <span class="prop-name">.MuiLinearProgress-bar1Determinate</span> | Styles applied to the bar1 element if `variant="determinate"`.
+| <span class="prop-name">bar1Buffer</span> | <span class="prop-name">.MuiLinearProgress-bar1Buffer</span> | Styles applied to the bar1 element if `variant="buffer"`.
+| <span class="prop-name">bar2Indeterminate</span> | <span class="prop-name">.MuiLinearProgress-bar2Indeterminate</span> | Styles applied to the bar2 element if `variant="indeterminate or query"`.
+| <span class="prop-name">bar2Buffer</span> | <span class="prop-name">.MuiLinearProgress-bar2Buffer</span> | Styles applied to the bar2 element if `variant="buffer"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/link.md b/docs/pages/api/link.md
index 31fe46beb04efe..9de11a0869bed6 100644
--- a/docs/pages/api/link.md
+++ b/docs/pages/api/link.md
@@ -43,12 +43,12 @@ Any other props supplied will be provided to the root element ([Typography](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiLink-root</span> | Styles applied to the root element.
-| <span class="prop-name">underlineNone</span> | <span class="prop-name">MuiLink-underlineNone</span> | Styles applied to the root element if `underline="none"`.
-| <span class="prop-name">underlineHover</span> | <span class="prop-name">MuiLink-underlineHover</span> | Styles applied to the root element if `underline="hover"`.
-| <span class="prop-name">underlineAlways</span> | <span class="prop-name">MuiLink-underlineAlways</span> | Styles applied to the root element if `underline="always"`.
-| <span class="prop-name">button</span> | <span class="prop-name">MuiLink-button</span> | Styles applied to the root element if `component="button"`.
-| <span class="prop-name">focusVisible</span> | <span class="prop-name">Mui-focusVisible</span> | Pseudo-class applied to the root element if the link is keyboard focused.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiLink-root</span> | Styles applied to the root element.
+| <span class="prop-name">underlineNone</span> | <span class="prop-name">.MuiLink-underlineNone</span> | Styles applied to the root element if `underline="none"`.
+| <span class="prop-name">underlineHover</span> | <span class="prop-name">.MuiLink-underlineHover</span> | Styles applied to the root element if `underline="hover"`.
+| <span class="prop-name">underlineAlways</span> | <span class="prop-name">.MuiLink-underlineAlways</span> | Styles applied to the root element if `underline="always"`.
+| <span class="prop-name">button</span> | <span class="prop-name">.MuiLink-button</span> | Styles applied to the root element if `component="button"`.
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the root element if the link is keyboard focused.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/list-item-avatar.md b/docs/pages/api/list-item-avatar.md
index 26e3f78a635bc7..bd84db2dbfc36f 100644
--- a/docs/pages/api/list-item-avatar.md
+++ b/docs/pages/api/list-item-avatar.md
@@ -38,8 +38,8 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiListItemAvatar-root</span> | Styles applied to the root element.
-| <span class="prop-name">alignItemsFlexStart</span> | <span class="prop-name">MuiListItemAvatar-alignItemsFlexStart</span> | Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiListItemAvatar-root</span> | Styles applied to the root element.
+| <span class="prop-name">alignItemsFlexStart</span> | <span class="prop-name">.MuiListItemAvatar-alignItemsFlexStart</span> | Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/list-item-icon.md b/docs/pages/api/list-item-icon.md
index ae8db4b00eb158..2cd85ac62c0c1f 100644
--- a/docs/pages/api/list-item-icon.md
+++ b/docs/pages/api/list-item-icon.md
@@ -38,8 +38,8 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiListItemIcon-root</span> | Styles applied to the root element.
-| <span class="prop-name">alignItemsFlexStart</span> | <span class="prop-name">MuiListItemIcon-alignItemsFlexStart</span> | Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiListItemIcon-root</span> | Styles applied to the root element.
+| <span class="prop-name">alignItemsFlexStart</span> | <span class="prop-name">.MuiListItemIcon-alignItemsFlexStart</span> | Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/list-item-secondary-action.md b/docs/pages/api/list-item-secondary-action.md
index 7c579f0e48ca56..aaaabcfadba289 100644
--- a/docs/pages/api/list-item-secondary-action.md
+++ b/docs/pages/api/list-item-secondary-action.md
@@ -38,7 +38,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiListItemSecondaryAction-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiListItemSecondaryAction-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/list-item-text.md b/docs/pages/api/list-item-text.md
index fd7d25413dec28..298c339e098fd2 100644
--- a/docs/pages/api/list-item-text.md
+++ b/docs/pages/api/list-item-text.md
@@ -44,12 +44,12 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiListItemText-root</span> | Styles applied to the root element.
-| <span class="prop-name">multiline</span> | <span class="prop-name">MuiListItemText-multiline</span> | Styles applied to the `Typography` components if primary and secondary are set.
-| <span class="prop-name">dense</span> | <span class="prop-name">MuiListItemText-dense</span> | Styles applied to the `Typography` components if dense.
-| <span class="prop-name">inset</span> | <span class="prop-name">MuiListItemText-inset</span> | Styles applied to the root element if `inset={true}`.
-| <span class="prop-name">primary</span> | <span class="prop-name">MuiListItemText-primary</span> | Styles applied to the primary `Typography` component.
-| <span class="prop-name">secondary</span> | <span class="prop-name">MuiListItemText-secondary</span> | Styles applied to the secondary `Typography` component.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiListItemText-root</span> | Styles applied to the root element.
+| <span class="prop-name">multiline</span> | <span class="prop-name">.MuiListItemText-multiline</span> | Styles applied to the `Typography` components if primary and secondary are set.
+| <span class="prop-name">dense</span> | <span class="prop-name">.MuiListItemText-dense</span> | Styles applied to the `Typography` components if dense.
+| <span class="prop-name">inset</span> | <span class="prop-name">.MuiListItemText-inset</span> | Styles applied to the root element if `inset={true}`.
+| <span class="prop-name">primary</span> | <span class="prop-name">.MuiListItemText-primary</span> | Styles applied to the primary `Typography` component.
+| <span class="prop-name">secondary</span> | <span class="prop-name">.MuiListItemText-secondary</span> | Styles applied to the secondary `Typography` component.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/list-item.md b/docs/pages/api/list-item.md
index 3d616920d2d213..0a3e6cbdfc51d3 100644
--- a/docs/pages/api/list-item.md
+++ b/docs/pages/api/list-item.md
@@ -49,17 +49,17 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiListItem-root</span> | Styles applied to the (normally root) `component` element. May be wrapped by a `container`.
-| <span class="prop-name">container</span> | <span class="prop-name">MuiListItem-container</span> | Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`.
-| <span class="prop-name">focusVisible</span> | <span class="prop-name">Mui-focusVisible</span> | Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`.
-| <span class="prop-name">dense</span> | <span class="prop-name">MuiListItem-dense</span> | Styles applied to the `component` element if dense.
-| <span class="prop-name">alignItemsFlexStart</span> | <span class="prop-name">MuiListItem-alignItemsFlexStart</span> | Styles applied to the `component` element if `alignItems="flex-start"`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the inner `component` element if `disabled={true}`.
-| <span class="prop-name">divider</span> | <span class="prop-name">MuiListItem-divider</span> | Styles applied to the inner `component` element if `divider={true}`.
-| <span class="prop-name">gutters</span> | <span class="prop-name">MuiListItem-gutters</span> | Styles applied to the inner `component` element if `disableGutters={false}`.
-| <span class="prop-name">button</span> | <span class="prop-name">MuiListItem-button</span> | Styles applied to the inner `component` element if `button={true}`.
-| <span class="prop-name">secondaryAction</span> | <span class="prop-name">MuiListItem-secondaryAction</span> | Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`.
-| <span class="prop-name">selected</span> | <span class="prop-name">Mui-selected</span> | Pseudo-class applied to the root element if `selected={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiListItem-root</span> | Styles applied to the (normally root) `component` element. May be wrapped by a `container`.
+| <span class="prop-name">container</span> | <span class="prop-name">.MuiListItem-container</span> | Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`.
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`.
+| <span class="prop-name">dense</span> | <span class="prop-name">.MuiListItem-dense</span> | Styles applied to the `component` element if dense.
+| <span class="prop-name">alignItemsFlexStart</span> | <span class="prop-name">.MuiListItem-alignItemsFlexStart</span> | Styles applied to the `component` element if `alignItems="flex-start"`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the inner `component` element if `disabled={true}`.
+| <span class="prop-name">divider</span> | <span class="prop-name">.MuiListItem-divider</span> | Styles applied to the inner `component` element if `divider={true}`.
+| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiListItem-gutters</span> | Styles applied to the inner `component` element if `disableGutters={false}`.
+| <span class="prop-name">button</span> | <span class="prop-name">.MuiListItem-button</span> | Styles applied to the inner `component` element if `button={true}`.
+| <span class="prop-name">secondaryAction</span> | <span class="prop-name">.MuiListItem-secondaryAction</span> | Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`.
+| <span class="prop-name">selected</span> | <span class="prop-name">.Mui-selected</span> | Pseudo-class applied to the root element if `selected={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/list-subheader.md b/docs/pages/api/list-subheader.md
index 411f65f274d1d2..28fac70e168eb6 100644
--- a/docs/pages/api/list-subheader.md
+++ b/docs/pages/api/list-subheader.md
@@ -43,12 +43,12 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiListSubheader-root</span> | Styles applied to the root element.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiListSubheader-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorInherit</span> | <span class="prop-name">MuiListSubheader-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
-| <span class="prop-name">gutters</span> | <span class="prop-name">MuiListSubheader-gutters</span> | Styles applied to the inner `component` element if `disableGutters={false}`.
-| <span class="prop-name">inset</span> | <span class="prop-name">MuiListSubheader-inset</span> | Styles applied to the root element if `inset={true}`.
-| <span class="prop-name">sticky</span> | <span class="prop-name">MuiListSubheader-sticky</span> | Styles applied to the root element if `disableSticky={false}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiListSubheader-root</span> | Styles applied to the root element.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiListSubheader-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorInherit</span> | <span class="prop-name">.MuiListSubheader-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
+| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiListSubheader-gutters</span> | Styles applied to the inner `component` element if `disableGutters={false}`.
+| <span class="prop-name">inset</span> | <span class="prop-name">.MuiListSubheader-inset</span> | Styles applied to the root element if `inset={true}`.
+| <span class="prop-name">sticky</span> | <span class="prop-name">.MuiListSubheader-sticky</span> | Styles applied to the root element if `disableSticky={false}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/list.md b/docs/pages/api/list.md
index 7db1adc313b7c2..3c07145d1b8fa0 100644
--- a/docs/pages/api/list.md
+++ b/docs/pages/api/list.md
@@ -42,10 +42,10 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiList-root</span> | Styles applied to the root element.
-| <span class="prop-name">padding</span> | <span class="prop-name">MuiList-padding</span> | Styles applied to the root element if `disablePadding={false}`.
-| <span class="prop-name">dense</span> | <span class="prop-name">MuiList-dense</span> | Styles applied to the root element if dense.
-| <span class="prop-name">subheader</span> | <span class="prop-name">MuiList-subheader</span> | Styles applied to the root element if a `subheader` is provided.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiList-root</span> | Styles applied to the root element.
+| <span class="prop-name">padding</span> | <span class="prop-name">.MuiList-padding</span> | Styles applied to the root element if `disablePadding={false}`.
+| <span class="prop-name">dense</span> | <span class="prop-name">.MuiList-dense</span> | Styles applied to the root element if dense.
+| <span class="prop-name">subheader</span> | <span class="prop-name">.MuiList-subheader</span> | Styles applied to the root element if a `subheader` is provided.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/menu-item.md b/docs/pages/api/menu-item.md
index a4cadf85d3e10c..3af5b58947ebfb 100644
--- a/docs/pages/api/menu-item.md
+++ b/docs/pages/api/menu-item.md
@@ -41,10 +41,10 @@ Any other props supplied will be provided to the root element ([ListItem](/api/l
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiMenuItem-root</span> | Styles applied to the root element.
-| <span class="prop-name">gutters</span> | <span class="prop-name">MuiMenuItem-gutters</span> | Styles applied to the root element if `disableGutters={false}`.
-| <span class="prop-name">selected</span> | <span class="prop-name">Mui-selected</span> | Styles applied to the root element if `selected={true}`.
-| <span class="prop-name">dense</span> | <span class="prop-name">MuiMenuItem-dense</span> | Styles applied to the root element if dense.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiMenuItem-root</span> | Styles applied to the root element.
+| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiMenuItem-gutters</span> | Styles applied to the root element if `disableGutters={false}`.
+| <span class="prop-name">selected</span> | <span class="prop-name">.Mui-selected</span> | Styles applied to the root element if `selected={true}`.
+| <span class="prop-name">dense</span> | <span class="prop-name">.MuiMenuItem-dense</span> | Styles applied to the root element if dense.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/menu.md b/docs/pages/api/menu.md
index a792b9e539b775..ee661c0b2a9105 100644
--- a/docs/pages/api/menu.md
+++ b/docs/pages/api/menu.md
@@ -53,8 +53,8 @@ Any other props supplied will be provided to the root element ([Popover](/api/po
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">paper</span> | <span class="prop-name">MuiMenu-paper</span> | Styles applied to the `Paper` component.
-| <span class="prop-name">list</span> | <span class="prop-name">MuiMenu-list</span> | Styles applied to the `List` component via `MenuList`.
+| <span class="prop-name">paper</span> | <span class="prop-name">.MuiMenu-paper</span> | Styles applied to the `Paper` component.
+| <span class="prop-name">list</span> | <span class="prop-name">.MuiMenu-list</span> | Styles applied to the `List` component via `MenuList`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/mobile-stepper.md b/docs/pages/api/mobile-stepper.md
index 11db765fef2025..20289217e97884 100644
--- a/docs/pages/api/mobile-stepper.md
+++ b/docs/pages/api/mobile-stepper.md
@@ -44,14 +44,14 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiMobileStepper-root</span> | Styles applied to the root element.
-| <span class="prop-name">positionBottom</span> | <span class="prop-name">MuiMobileStepper-positionBottom</span> | Styles applied to the root element if `position="bottom"`.
-| <span class="prop-name">positionTop</span> | <span class="prop-name">MuiMobileStepper-positionTop</span> | Styles applied to the root element if `position="top"`.
-| <span class="prop-name">positionStatic</span> | <span class="prop-name">MuiMobileStepper-positionStatic</span> | Styles applied to the root element if `position="static"`.
-| <span class="prop-name">dots</span> | <span class="prop-name">MuiMobileStepper-dots</span> | Styles applied to the dots container if `variant="dots"`.
-| <span class="prop-name">dot</span> | <span class="prop-name">MuiMobileStepper-dot</span> | Styles applied to each dot if `variant="dots"`.
-| <span class="prop-name">dotActive</span> | <span class="prop-name">MuiMobileStepper-dotActive</span> | Styles applied to a dot if `variant="dots"` and this is the active step.
-| <span class="prop-name">progress</span> | <span class="prop-name">MuiMobileStepper-progress</span> | Styles applied to the Linear Progress component if `variant="progress"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiMobileStepper-root</span> | Styles applied to the root element.
+| <span class="prop-name">positionBottom</span> | <span class="prop-name">.MuiMobileStepper-positionBottom</span> | Styles applied to the root element if `position="bottom"`.
+| <span class="prop-name">positionTop</span> | <span class="prop-name">.MuiMobileStepper-positionTop</span> | Styles applied to the root element if `position="top"`.
+| <span class="prop-name">positionStatic</span> | <span class="prop-name">.MuiMobileStepper-positionStatic</span> | Styles applied to the root element if `position="static"`.
+| <span class="prop-name">dots</span> | <span class="prop-name">.MuiMobileStepper-dots</span> | Styles applied to the dots container if `variant="dots"`.
+| <span class="prop-name">dot</span> | <span class="prop-name">.MuiMobileStepper-dot</span> | Styles applied to each dot if `variant="dots"`.
+| <span class="prop-name">dotActive</span> | <span class="prop-name">.MuiMobileStepper-dotActive</span> | Styles applied to a dot if `variant="dots"` and this is the active step.
+| <span class="prop-name">progress</span> | <span class="prop-name">.MuiMobileStepper-progress</span> | Styles applied to the Linear Progress component if `variant="progress"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/native-select.md b/docs/pages/api/native-select.md
index 46b724cb596ad2..e3156345d79cdc 100644
--- a/docs/pages/api/native-select.md
+++ b/docs/pages/api/native-select.md
@@ -44,15 +44,15 @@ Any other props supplied will be provided to the root element ([Input](/api/inpu
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiNativeSelect-root</span> | Styles applied to the select component `root` class.
-| <span class="prop-name">select</span> | <span class="prop-name">MuiNativeSelect-select</span> | Styles applied to the select component `select` class.
-| <span class="prop-name">filled</span> | <span class="prop-name">MuiNativeSelect-filled</span> | Styles applied to the select component if `variant="filled"`.
-| <span class="prop-name">outlined</span> | <span class="prop-name">MuiNativeSelect-outlined</span> | Styles applied to the select component if `variant="outlined"`.
-| <span class="prop-name">selectMenu</span> | <span class="prop-name">MuiNativeSelect-selectMenu</span> | Styles applied to the select component `selectMenu` class.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the select component `disabled` class.
-| <span class="prop-name">icon</span> | <span class="prop-name">MuiNativeSelect-icon</span> | Styles applied to the icon component.
-| <span class="prop-name">iconFilled</span> | <span class="prop-name">MuiNativeSelect-iconFilled</span> | Styles applied to the icon component if `variant="filled"`.
-| <span class="prop-name">iconOutlined</span> | <span class="prop-name">MuiNativeSelect-iconOutlined</span> | Styles applied to the icon component if `variant="outlined"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiNativeSelect-root</span> | Styles applied to the select component `root` class.
+| <span class="prop-name">select</span> | <span class="prop-name">.MuiNativeSelect-select</span> | Styles applied to the select component `select` class.
+| <span class="prop-name">filled</span> | <span class="prop-name">.MuiNativeSelect-filled</span> | Styles applied to the select component if `variant="filled"`.
+| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiNativeSelect-outlined</span> | Styles applied to the select component if `variant="outlined"`.
+| <span class="prop-name">selectMenu</span> | <span class="prop-name">.MuiNativeSelect-selectMenu</span> | Styles applied to the select component `selectMenu` class.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the select component `disabled` class.
+| <span class="prop-name">icon</span> | <span class="prop-name">.MuiNativeSelect-icon</span> | Styles applied to the icon component.
+| <span class="prop-name">iconFilled</span> | <span class="prop-name">.MuiNativeSelect-iconFilled</span> | Styles applied to the icon component if `variant="filled"`.
+| <span class="prop-name">iconOutlined</span> | <span class="prop-name">.MuiNativeSelect-iconOutlined</span> | Styles applied to the icon component if `variant="outlined"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/outlined-input.md b/docs/pages/api/outlined-input.md
index 308fe67a9e8181..effe5f9ac6012e 100644
--- a/docs/pages/api/outlined-input.md
+++ b/docs/pages/api/outlined-input.md
@@ -63,21 +63,21 @@ Any other props supplied will be provided to the root element ([InputBase](/api/
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiOutlinedInput-root</span> | Styles applied to the root element.
-| <span class="prop-name">focused</span> | <span class="prop-name">Mui-focused</span> | Styles applied to the root element if the component is focused.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
-| <span class="prop-name">adornedStart</span> | <span class="prop-name">MuiOutlinedInput-adornedStart</span> | Styles applied to the root element if `startAdornment` is provided.
-| <span class="prop-name">adornedEnd</span> | <span class="prop-name">MuiOutlinedInput-adornedEnd</span> | Styles applied to the root element if `endAdornment` is provided.
-| <span class="prop-name">error</span> | <span class="prop-name">Mui-error</span> | Styles applied to the root element if `error={true}`.
-| <span class="prop-name">marginDense</span> | <span class="prop-name">MuiOutlinedInput-marginDense</span> | Styles applied to the `input` element if `margin="dense"`.
-| <span class="prop-name">multiline</span> | <span class="prop-name">MuiOutlinedInput-multiline</span> | Styles applied to the root element if `multiline={true}`.
-| <span class="prop-name">notchedOutline</span> | <span class="prop-name">MuiOutlinedInput-notchedOutline</span> | Styles applied to the `NotchedOutline` element.
-| <span class="prop-name">input</span> | <span class="prop-name">MuiOutlinedInput-input</span> | Styles applied to the `input` element.
-| <span class="prop-name">inputMarginDense</span> | <span class="prop-name">MuiOutlinedInput-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
-| <span class="prop-name">inputSelect</span> | <span class="prop-name">MuiOutlinedInput-inputSelect</span> | Styles applied to the `input` element if `select={true}`.
-| <span class="prop-name">inputMultiline</span> | <span class="prop-name">MuiOutlinedInput-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
-| <span class="prop-name">inputAdornedStart</span> | <span class="prop-name">MuiOutlinedInput-inputAdornedStart</span> | Styles applied to the `input` element if `startAdornment` is provided.
-| <span class="prop-name">inputAdornedEnd</span> | <span class="prop-name">MuiOutlinedInput-inputAdornedEnd</span> | Styles applied to the `input` element if `endAdornment` is provided.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiOutlinedInput-root</span> | Styles applied to the root element.
+| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root element if the component is focused.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
+| <span class="prop-name">adornedStart</span> | <span class="prop-name">.MuiOutlinedInput-adornedStart</span> | Styles applied to the root element if `startAdornment` is provided.
+| <span class="prop-name">adornedEnd</span> | <span class="prop-name">.MuiOutlinedInput-adornedEnd</span> | Styles applied to the root element if `endAdornment` is provided.
+| <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Styles applied to the root element if `error={true}`.
+| <span class="prop-name">marginDense</span> | <span class="prop-name">.MuiOutlinedInput-marginDense</span> | Styles applied to the `input` element if `margin="dense"`.
+| <span class="prop-name">multiline</span> | <span class="prop-name">.MuiOutlinedInput-multiline</span> | Styles applied to the root element if `multiline={true}`.
+| <span class="prop-name">notchedOutline</span> | <span class="prop-name">.MuiOutlinedInput-notchedOutline</span> | Styles applied to the `NotchedOutline` element.
+| <span class="prop-name">input</span> | <span class="prop-name">.MuiOutlinedInput-input</span> | Styles applied to the `input` element.
+| <span class="prop-name">inputMarginDense</span> | <span class="prop-name">.MuiOutlinedInput-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
+| <span class="prop-name">inputSelect</span> | <span class="prop-name">.MuiOutlinedInput-inputSelect</span> | Styles applied to the `input` element if `select={true}`.
+| <span class="prop-name">inputMultiline</span> | <span class="prop-name">.MuiOutlinedInput-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
+| <span class="prop-name">inputAdornedStart</span> | <span class="prop-name">.MuiOutlinedInput-inputAdornedStart</span> | Styles applied to the `input` element if `startAdornment` is provided.
+| <span class="prop-name">inputAdornedEnd</span> | <span class="prop-name">.MuiOutlinedInput-inputAdornedEnd</span> | Styles applied to the `input` element if `endAdornment` is provided.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/paper.md b/docs/pages/api/paper.md
index d72706c1536bb5..d1b83e950b2bb2 100644
--- a/docs/pages/api/paper.md
+++ b/docs/pages/api/paper.md
@@ -41,33 +41,33 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiPaper-root</span> | Styles applied to the root element.
-| <span class="prop-name">rounded</span> | <span class="prop-name">MuiPaper-rounded</span> | Styles applied to the root element if `square={false}`.
-| <span class="prop-name">elevation0</span> | <span class="prop-name">MuiPaper-elevation0</span> | 
-| <span class="prop-name">elevation1</span> | <span class="prop-name">MuiPaper-elevation1</span> | 
-| <span class="prop-name">elevation2</span> | <span class="prop-name">MuiPaper-elevation2</span> | 
-| <span class="prop-name">elevation3</span> | <span class="prop-name">MuiPaper-elevation3</span> | 
-| <span class="prop-name">elevation4</span> | <span class="prop-name">MuiPaper-elevation4</span> | 
-| <span class="prop-name">elevation5</span> | <span class="prop-name">MuiPaper-elevation5</span> | 
-| <span class="prop-name">elevation6</span> | <span class="prop-name">MuiPaper-elevation6</span> | 
-| <span class="prop-name">elevation7</span> | <span class="prop-name">MuiPaper-elevation7</span> | 
-| <span class="prop-name">elevation8</span> | <span class="prop-name">MuiPaper-elevation8</span> | 
-| <span class="prop-name">elevation9</span> | <span class="prop-name">MuiPaper-elevation9</span> | 
-| <span class="prop-name">elevation10</span> | <span class="prop-name">MuiPaper-elevation10</span> | 
-| <span class="prop-name">elevation11</span> | <span class="prop-name">MuiPaper-elevation11</span> | 
-| <span class="prop-name">elevation12</span> | <span class="prop-name">MuiPaper-elevation12</span> | 
-| <span class="prop-name">elevation13</span> | <span class="prop-name">MuiPaper-elevation13</span> | 
-| <span class="prop-name">elevation14</span> | <span class="prop-name">MuiPaper-elevation14</span> | 
-| <span class="prop-name">elevation15</span> | <span class="prop-name">MuiPaper-elevation15</span> | 
-| <span class="prop-name">elevation16</span> | <span class="prop-name">MuiPaper-elevation16</span> | 
-| <span class="prop-name">elevation17</span> | <span class="prop-name">MuiPaper-elevation17</span> | 
-| <span class="prop-name">elevation18</span> | <span class="prop-name">MuiPaper-elevation18</span> | 
-| <span class="prop-name">elevation19</span> | <span class="prop-name">MuiPaper-elevation19</span> | 
-| <span class="prop-name">elevation20</span> | <span class="prop-name">MuiPaper-elevation20</span> | 
-| <span class="prop-name">elevation21</span> | <span class="prop-name">MuiPaper-elevation21</span> | 
-| <span class="prop-name">elevation22</span> | <span class="prop-name">MuiPaper-elevation22</span> | 
-| <span class="prop-name">elevation23</span> | <span class="prop-name">MuiPaper-elevation23</span> | 
-| <span class="prop-name">elevation24</span> | <span class="prop-name">MuiPaper-elevation24</span> | 
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiPaper-root</span> | Styles applied to the root element.
+| <span class="prop-name">rounded</span> | <span class="prop-name">.MuiPaper-rounded</span> | Styles applied to the root element if `square={false}`.
+| <span class="prop-name">elevation0</span> | <span class="prop-name">.MuiPaper-elevation0</span> | 
+| <span class="prop-name">elevation1</span> | <span class="prop-name">.MuiPaper-elevation1</span> | 
+| <span class="prop-name">elevation2</span> | <span class="prop-name">.MuiPaper-elevation2</span> | 
+| <span class="prop-name">elevation3</span> | <span class="prop-name">.MuiPaper-elevation3</span> | 
+| <span class="prop-name">elevation4</span> | <span class="prop-name">.MuiPaper-elevation4</span> | 
+| <span class="prop-name">elevation5</span> | <span class="prop-name">.MuiPaper-elevation5</span> | 
+| <span class="prop-name">elevation6</span> | <span class="prop-name">.MuiPaper-elevation6</span> | 
+| <span class="prop-name">elevation7</span> | <span class="prop-name">.MuiPaper-elevation7</span> | 
+| <span class="prop-name">elevation8</span> | <span class="prop-name">.MuiPaper-elevation8</span> | 
+| <span class="prop-name">elevation9</span> | <span class="prop-name">.MuiPaper-elevation9</span> | 
+| <span class="prop-name">elevation10</span> | <span class="prop-name">.MuiPaper-elevation10</span> | 
+| <span class="prop-name">elevation11</span> | <span class="prop-name">.MuiPaper-elevation11</span> | 
+| <span class="prop-name">elevation12</span> | <span class="prop-name">.MuiPaper-elevation12</span> | 
+| <span class="prop-name">elevation13</span> | <span class="prop-name">.MuiPaper-elevation13</span> | 
+| <span class="prop-name">elevation14</span> | <span class="prop-name">.MuiPaper-elevation14</span> | 
+| <span class="prop-name">elevation15</span> | <span class="prop-name">.MuiPaper-elevation15</span> | 
+| <span class="prop-name">elevation16</span> | <span class="prop-name">.MuiPaper-elevation16</span> | 
+| <span class="prop-name">elevation17</span> | <span class="prop-name">.MuiPaper-elevation17</span> | 
+| <span class="prop-name">elevation18</span> | <span class="prop-name">.MuiPaper-elevation18</span> | 
+| <span class="prop-name">elevation19</span> | <span class="prop-name">.MuiPaper-elevation19</span> | 
+| <span class="prop-name">elevation20</span> | <span class="prop-name">.MuiPaper-elevation20</span> | 
+| <span class="prop-name">elevation21</span> | <span class="prop-name">.MuiPaper-elevation21</span> | 
+| <span class="prop-name">elevation22</span> | <span class="prop-name">.MuiPaper-elevation22</span> | 
+| <span class="prop-name">elevation23</span> | <span class="prop-name">.MuiPaper-elevation23</span> | 
+| <span class="prop-name">elevation24</span> | <span class="prop-name">.MuiPaper-elevation24</span> | 
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/popover.md b/docs/pages/api/popover.md
index 4c1ab7194d6980..bcb742822b7c81 100644
--- a/docs/pages/api/popover.md
+++ b/docs/pages/api/popover.md
@@ -60,8 +60,8 @@ Any other props supplied will be provided to the root element ([Modal](/api/moda
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiPopover-root</span> | Styles applied to the root element
-| <span class="prop-name">paper</span> | <span class="prop-name">MuiPopover-paper</span> | Styles applied to the `Paper` component.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiPopover-root</span> | Styles applied to the root element
+| <span class="prop-name">paper</span> | <span class="prop-name">.MuiPopover-paper</span> | Styles applied to the `Paper` component.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/radio.md b/docs/pages/api/radio.md
index 3cbf143f21396e..5c84e35b705a16 100644
--- a/docs/pages/api/radio.md
+++ b/docs/pages/api/radio.md
@@ -51,11 +51,11 @@ Any other props supplied will be provided to the root element ([IconButton](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiRadio-root</span> | Styles applied to the root element.
-| <span class="prop-name">checked</span> | <span class="prop-name">Mui-checked</span> | Pseudo-class applied to the root element if `checked={true}`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiRadio-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiRadio-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiRadio-root</span> | Styles applied to the root element.
+| <span class="prop-name">checked</span> | <span class="prop-name">.Mui-checked</span> | Pseudo-class applied to the root element if `checked={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiRadio-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiRadio-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/rating.md b/docs/pages/api/rating.md
index a17dfafe55fdb9..eef016c6467cd2 100644
--- a/docs/pages/api/rating.md
+++ b/docs/pages/api/rating.md
@@ -50,22 +50,22 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiRating-root</span> | Styles applied to the root element.
-| <span class="prop-name">sizeSmall</span> | <span class="prop-name">MuiRating-sizeSmall</span> | Styles applied to the root element if `size="small"`.
-| <span class="prop-name">sizeLarge</span> | <span class="prop-name">MuiRating-sizeLarge</span> | Styles applied to the root element if `size="large"`.
-| <span class="prop-name">readOnly</span> | <span class="prop-name">MuiRating-readOnly</span> | Styles applied to the root element if `readOnly={true}`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">focusVisible</span> | <span class="prop-name">Mui-focusVisible</span> | Pseudo-class applied to the root element if keyboard focused.
-| <span class="prop-name">visuallyhidden</span> | <span class="prop-name">MuiRating-visuallyhidden</span> | Visually hide an element.
-| <span class="prop-name">pristine</span> | <span class="prop-name">MuiRating-pristine</span> | Styles applied to the pristine label.
-| <span class="prop-name">label</span> | <span class="prop-name">MuiRating-label</span> | Styles applied to the label elements.
-| <span class="prop-name">icon</span> | <span class="prop-name">MuiRating-icon</span> | Styles applied to the icon wrapping elements.
-| <span class="prop-name">iconEmpty</span> | <span class="prop-name">MuiRating-iconEmpty</span> | Styles applied to the icon wrapping elements when empty.
-| <span class="prop-name">iconFilled</span> | <span class="prop-name">MuiRating-iconFilled</span> | Styles applied to the icon wrapping elements when filled.
-| <span class="prop-name">iconHover</span> | <span class="prop-name">MuiRating-iconHover</span> | Styles applied to the icon wrapping elements when hover.
-| <span class="prop-name">iconFocus</span> | <span class="prop-name">MuiRating-iconFocus</span> | Styles applied to the icon wrapping elements when focus.
-| <span class="prop-name">iconActive</span> | <span class="prop-name">MuiRating-iconActive</span> | Styles applied to the icon wrapping elements when active.
-| <span class="prop-name">decimal</span> | <span class="prop-name">MuiRating-decimal</span> | Styles applied to the icon wrapping elements when decimals are necessary.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiRating-root</span> | Styles applied to the root element.
+| <span class="prop-name">sizeSmall</span> | <span class="prop-name">.MuiRating-sizeSmall</span> | Styles applied to the root element if `size="small"`.
+| <span class="prop-name">sizeLarge</span> | <span class="prop-name">.MuiRating-sizeLarge</span> | Styles applied to the root element if `size="large"`.
+| <span class="prop-name">readOnly</span> | <span class="prop-name">.MuiRating-readOnly</span> | Styles applied to the root element if `readOnly={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the root element if keyboard focused.
+| <span class="prop-name">visuallyhidden</span> | <span class="prop-name">.MuiRating-visuallyhidden</span> | Visually hide an element.
+| <span class="prop-name">pristine</span> | <span class="prop-name">.MuiRating-pristine</span> | Styles applied to the pristine label.
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiRating-label</span> | Styles applied to the label elements.
+| <span class="prop-name">icon</span> | <span class="prop-name">.MuiRating-icon</span> | Styles applied to the icon wrapping elements.
+| <span class="prop-name">iconEmpty</span> | <span class="prop-name">.MuiRating-iconEmpty</span> | Styles applied to the icon wrapping elements when empty.
+| <span class="prop-name">iconFilled</span> | <span class="prop-name">.MuiRating-iconFilled</span> | Styles applied to the icon wrapping elements when filled.
+| <span class="prop-name">iconHover</span> | <span class="prop-name">.MuiRating-iconHover</span> | Styles applied to the icon wrapping elements when hover.
+| <span class="prop-name">iconFocus</span> | <span class="prop-name">.MuiRating-iconFocus</span> | Styles applied to the icon wrapping elements when focus.
+| <span class="prop-name">iconActive</span> | <span class="prop-name">.MuiRating-iconActive</span> | Styles applied to the icon wrapping elements when active.
+| <span class="prop-name">decimal</span> | <span class="prop-name">.MuiRating-decimal</span> | Styles applied to the icon wrapping elements when decimals are necessary.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/select.md b/docs/pages/api/select.md
index 93a9e13d43bda7..47b50d99977bbe 100644
--- a/docs/pages/api/select.md
+++ b/docs/pages/api/select.md
@@ -55,15 +55,15 @@ Any other props supplied will be provided to the root element ([Input](/api/inpu
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiSelect-root</span> | Styles applied to the select component `root` class.
-| <span class="prop-name">select</span> | <span class="prop-name">MuiSelect-select</span> | Styles applied to the select component `select` class.
-| <span class="prop-name">filled</span> | <span class="prop-name">MuiSelect-filled</span> | Styles applied to the select component if `variant="filled"`.
-| <span class="prop-name">outlined</span> | <span class="prop-name">MuiSelect-outlined</span> | Styles applied to the select component if `variant="outlined"`.
-| <span class="prop-name">selectMenu</span> | <span class="prop-name">MuiSelect-selectMenu</span> | Styles applied to the select component `selectMenu` class.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the select component `disabled` class.
-| <span class="prop-name">icon</span> | <span class="prop-name">MuiSelect-icon</span> | Styles applied to the icon component.
-| <span class="prop-name">iconFilled</span> | <span class="prop-name">MuiSelect-iconFilled</span> | Styles applied to the icon component if `variant="filled"`.
-| <span class="prop-name">iconOutlined</span> | <span class="prop-name">MuiSelect-iconOutlined</span> | Styles applied to the icon component if `variant="outlined"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiSelect-root</span> | Styles applied to the select component `root` class.
+| <span class="prop-name">select</span> | <span class="prop-name">.MuiSelect-select</span> | Styles applied to the select component `select` class.
+| <span class="prop-name">filled</span> | <span class="prop-name">.MuiSelect-filled</span> | Styles applied to the select component if `variant="filled"`.
+| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiSelect-outlined</span> | Styles applied to the select component if `variant="outlined"`.
+| <span class="prop-name">selectMenu</span> | <span class="prop-name">.MuiSelect-selectMenu</span> | Styles applied to the select component `selectMenu` class.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the select component `disabled` class.
+| <span class="prop-name">icon</span> | <span class="prop-name">.MuiSelect-icon</span> | Styles applied to the icon component.
+| <span class="prop-name">iconFilled</span> | <span class="prop-name">.MuiSelect-iconFilled</span> | Styles applied to the icon component if `variant="filled"`.
+| <span class="prop-name">iconOutlined</span> | <span class="prop-name">.MuiSelect-iconOutlined</span> | Styles applied to the icon component if `variant="outlined"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/skeleton.md b/docs/pages/api/skeleton.md
index 3de948fdcae7e0..4a086926ebb507 100644
--- a/docs/pages/api/skeleton.md
+++ b/docs/pages/api/skeleton.md
@@ -42,11 +42,11 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiSkeleton-root</span> | Styles applied to the root element.
-| <span class="prop-name">text</span> | <span class="prop-name">MuiSkeleton-text</span> | Styles applied to the root element if `variant="text"`.
-| <span class="prop-name">rect</span> | <span class="prop-name">MuiSkeleton-rect</span> | Styles applied to the root element if `variant="rect"`.
-| <span class="prop-name">circle</span> | <span class="prop-name">MuiSkeleton-circle</span> | Styles applied to the root element if `variant="circle"`.
-| <span class="prop-name">animate</span> | <span class="prop-name">MuiSkeleton-animate</span> | Styles applied to the root element if `disabledAnimate={false}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiSkeleton-root</span> | Styles applied to the root element.
+| <span class="prop-name">text</span> | <span class="prop-name">.MuiSkeleton-text</span> | Styles applied to the root element if `variant="text"`.
+| <span class="prop-name">rect</span> | <span class="prop-name">.MuiSkeleton-rect</span> | Styles applied to the root element if `variant="rect"`.
+| <span class="prop-name">circle</span> | <span class="prop-name">.MuiSkeleton-circle</span> | Styles applied to the root element if `variant="circle"`.
+| <span class="prop-name">animate</span> | <span class="prop-name">.MuiSkeleton-animate</span> | Styles applied to the root element if `disabledAnimate={false}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/slider.md b/docs/pages/api/slider.md
index d88563553767e5..50e1b02278b984 100644
--- a/docs/pages/api/slider.md
+++ b/docs/pages/api/slider.md
@@ -60,26 +60,26 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiSlider-root</span> | Styles applied to the root element.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiSlider-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiSlider-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
-| <span class="prop-name">marked</span> | <span class="prop-name">MuiSlider-marked</span> | Styles applied to the root element if `marks` is provided with at least one label.
-| <span class="prop-name">vertical</span> | <span class="prop-name">MuiSlider-vertical</span> | Pseudo-class applied to the root element if `orientation="vertical"`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">rail</span> | <span class="prop-name">MuiSlider-rail</span> | Styles applied to the rail element.
-| <span class="prop-name">track</span> | <span class="prop-name">MuiSlider-track</span> | Styles applied to the track element.
-| <span class="prop-name">trackFalse</span> | <span class="prop-name">MuiSlider-trackFalse</span> | Styles applied to the track element if `track={false}`.
-| <span class="prop-name">trackInverted</span> | <span class="prop-name">MuiSlider-trackInverted</span> | Styles applied to the track element if `track="inverted"`.
-| <span class="prop-name">thumb</span> | <span class="prop-name">MuiSlider-thumb</span> | Styles applied to the thumb element.
-| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">MuiSlider-thumbColorPrimary</span> | Styles applied to the thumb element if `color="primary"`.
-| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">MuiSlider-thumbColorSecondary</span> | Styles applied to the thumb element if `color="secondary"`.
-| <span class="prop-name">active</span> | <span class="prop-name">MuiSlider-active</span> | Pseudo-class applied to the thumb element if it's active.
-| <span class="prop-name">focusVisible</span> | <span class="prop-name">Mui-focusVisible</span> | Pseudo-class applied to the thumb element if keyboard focused.
-| <span class="prop-name">valueLabel</span> | <span class="prop-name">MuiSlider-valueLabel</span> | Styles applied to the thumb label element.
-| <span class="prop-name">mark</span> | <span class="prop-name">MuiSlider-mark</span> | Styles applied to the mark element.
-| <span class="prop-name">markActive</span> | <span class="prop-name">MuiSlider-markActive</span> | Styles applied to the mark element if active (depending on the value).
-| <span class="prop-name">markLabel</span> | <span class="prop-name">MuiSlider-markLabel</span> | Styles applied to the mark label element.
-| <span class="prop-name">markLabelActive</span> | <span class="prop-name">MuiSlider-markLabelActive</span> | Styles applied to the mark label element if active (depending on the value).
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiSlider-root</span> | Styles applied to the root element.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiSlider-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiSlider-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">marked</span> | <span class="prop-name">.MuiSlider-marked</span> | Styles applied to the root element if `marks` is provided with at least one label.
+| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiSlider-vertical</span> | Pseudo-class applied to the root element if `orientation="vertical"`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">rail</span> | <span class="prop-name">.MuiSlider-rail</span> | Styles applied to the rail element.
+| <span class="prop-name">track</span> | <span class="prop-name">.MuiSlider-track</span> | Styles applied to the track element.
+| <span class="prop-name">trackFalse</span> | <span class="prop-name">.MuiSlider-trackFalse</span> | Styles applied to the track element if `track={false}`.
+| <span class="prop-name">trackInverted</span> | <span class="prop-name">.MuiSlider-trackInverted</span> | Styles applied to the track element if `track="inverted"`.
+| <span class="prop-name">thumb</span> | <span class="prop-name">.MuiSlider-thumb</span> | Styles applied to the thumb element.
+| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">.MuiSlider-thumbColorPrimary</span> | Styles applied to the thumb element if `color="primary"`.
+| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">.MuiSlider-thumbColorSecondary</span> | Styles applied to the thumb element if `color="secondary"`.
+| <span class="prop-name">active</span> | <span class="prop-name">.MuiSlider-active</span> | Pseudo-class applied to the thumb element if it's active.
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the thumb element if keyboard focused.
+| <span class="prop-name">valueLabel</span> | <span class="prop-name">.MuiSlider-valueLabel</span> | Styles applied to the thumb label element.
+| <span class="prop-name">mark</span> | <span class="prop-name">.MuiSlider-mark</span> | Styles applied to the mark element.
+| <span class="prop-name">markActive</span> | <span class="prop-name">.MuiSlider-markActive</span> | Styles applied to the mark element if active (depending on the value).
+| <span class="prop-name">markLabel</span> | <span class="prop-name">.MuiSlider-markLabel</span> | Styles applied to the mark label element.
+| <span class="prop-name">markLabelActive</span> | <span class="prop-name">.MuiSlider-markLabelActive</span> | Styles applied to the mark label element if active (depending on the value).
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/snackbar-content.md b/docs/pages/api/snackbar-content.md
index 358e9284b661d6..6a8ebc37f2ec29 100644
--- a/docs/pages/api/snackbar-content.md
+++ b/docs/pages/api/snackbar-content.md
@@ -39,9 +39,9 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiSnackbarContent-root</span> | Styles applied to the root element.
-| <span class="prop-name">message</span> | <span class="prop-name">MuiSnackbarContent-message</span> | Styles applied to the message wrapper element.
-| <span class="prop-name">action</span> | <span class="prop-name">MuiSnackbarContent-action</span> | Styles applied to the action wrapper element if `action` is provided.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiSnackbarContent-root</span> | Styles applied to the root element.
+| <span class="prop-name">message</span> | <span class="prop-name">.MuiSnackbarContent-message</span> | Styles applied to the message wrapper element.
+| <span class="prop-name">action</span> | <span class="prop-name">.MuiSnackbarContent-action</span> | Styles applied to the action wrapper element if `action` is provided.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/snackbar.md b/docs/pages/api/snackbar.md
index 8f34d2aa2efc8f..81de9e06a880aa 100644
--- a/docs/pages/api/snackbar.md
+++ b/docs/pages/api/snackbar.md
@@ -58,13 +58,13 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiSnackbar-root</span> | Styles applied to the root element.
-| <span class="prop-name">anchorOriginTopCenter</span> | <span class="prop-name">MuiSnackbar-anchorOriginTopCenter</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`.
-| <span class="prop-name">anchorOriginBottomCenter</span> | <span class="prop-name">MuiSnackbar-anchorOriginBottomCenter</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`.
-| <span class="prop-name">anchorOriginTopRight</span> | <span class="prop-name">MuiSnackbar-anchorOriginTopRight</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`.
-| <span class="prop-name">anchorOriginBottomRight</span> | <span class="prop-name">MuiSnackbar-anchorOriginBottomRight</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`.
-| <span class="prop-name">anchorOriginTopLeft</span> | <span class="prop-name">MuiSnackbar-anchorOriginTopLeft</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`.
-| <span class="prop-name">anchorOriginBottomLeft</span> | <span class="prop-name">MuiSnackbar-anchorOriginBottomLeft</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiSnackbar-root</span> | Styles applied to the root element.
+| <span class="prop-name">anchorOriginTopCenter</span> | <span class="prop-name">.MuiSnackbar-anchorOriginTopCenter</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`.
+| <span class="prop-name">anchorOriginBottomCenter</span> | <span class="prop-name">.MuiSnackbar-anchorOriginBottomCenter</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`.
+| <span class="prop-name">anchorOriginTopRight</span> | <span class="prop-name">.MuiSnackbar-anchorOriginTopRight</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`.
+| <span class="prop-name">anchorOriginBottomRight</span> | <span class="prop-name">.MuiSnackbar-anchorOriginBottomRight</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`.
+| <span class="prop-name">anchorOriginTopLeft</span> | <span class="prop-name">.MuiSnackbar-anchorOriginTopLeft</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`.
+| <span class="prop-name">anchorOriginBottomLeft</span> | <span class="prop-name">.MuiSnackbar-anchorOriginBottomLeft</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/speed-dial-action.md b/docs/pages/api/speed-dial-action.md
index b65b6c589880aa..f9b5ca5ed4254b 100644
--- a/docs/pages/api/speed-dial-action.md
+++ b/docs/pages/api/speed-dial-action.md
@@ -44,13 +44,13 @@ Any other props supplied will be provided to the root element ([Tooltip](/api/to
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">fab</span> | <span class="prop-name">MuiSpeedDialAction-fab</span> | Styles applied to the Fab component.
-| <span class="prop-name">fabClosed</span> | <span class="prop-name">MuiSpeedDialAction-fabClosed</span> | Styles applied to the Fab component if `open={false}`.
-| <span class="prop-name">staticTooltip</span> | <span class="prop-name">MuiSpeedDialAction-staticTooltip</span> | Styles applied to the root element if `tooltipOpen={true}`.
-| <span class="prop-name">staticTooltipClosed</span> | <span class="prop-name">MuiSpeedDialAction-staticTooltipClosed</span> | Styles applied to the root element if `tooltipOpen={true}` and `open={false}`.
-| <span class="prop-name">staticTooltipLabel</span> | <span class="prop-name">MuiSpeedDialAction-staticTooltipLabel</span> | Styles applied to the static tooltip label if `tooltipOpen={true}`.
-| <span class="prop-name">tooltipPlacementLeft</span> | <span class="prop-name">MuiSpeedDialAction-tooltipPlacementLeft</span> | Styles applied to the root if `tooltipOpen={true}` and `tooltipPlacement="left"``
-| <span class="prop-name">tooltipPlacementRight</span> | <span class="prop-name">MuiSpeedDialAction-tooltipPlacementRight</span> | Styles applied to the root if `tooltipOpen={true}` and `tooltipPlacement="right"``
+| <span class="prop-name">fab</span> | <span class="prop-name">.MuiSpeedDialAction-fab</span> | Styles applied to the Fab component.
+| <span class="prop-name">fabClosed</span> | <span class="prop-name">.MuiSpeedDialAction-fabClosed</span> | Styles applied to the Fab component if `open={false}`.
+| <span class="prop-name">staticTooltip</span> | <span class="prop-name">.MuiSpeedDialAction-staticTooltip</span> | Styles applied to the root element if `tooltipOpen={true}`.
+| <span class="prop-name">staticTooltipClosed</span> | <span class="prop-name">.MuiSpeedDialAction-staticTooltipClosed</span> | Styles applied to the root element if `tooltipOpen={true}` and `open={false}`.
+| <span class="prop-name">staticTooltipLabel</span> | <span class="prop-name">.MuiSpeedDialAction-staticTooltipLabel</span> | Styles applied to the static tooltip label if `tooltipOpen={true}`.
+| <span class="prop-name">tooltipPlacementLeft</span> | <span class="prop-name">.MuiSpeedDialAction-tooltipPlacementLeft</span> | Styles applied to the root if `tooltipOpen={true}` and `tooltipPlacement="left"``
+| <span class="prop-name">tooltipPlacementRight</span> | <span class="prop-name">.MuiSpeedDialAction-tooltipPlacementRight</span> | Styles applied to the root if `tooltipOpen={true}` and `tooltipPlacement="right"``
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/speed-dial-icon.md b/docs/pages/api/speed-dial-icon.md
index a0f370f9b154cf..13d83fb6435f64 100644
--- a/docs/pages/api/speed-dial-icon.md
+++ b/docs/pages/api/speed-dial-icon.md
@@ -39,12 +39,12 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiSpeedDialIcon-root</span> | Styles applied to the root element.
-| <span class="prop-name">icon</span> | <span class="prop-name">MuiSpeedDialIcon-icon</span> | Styles applied to the icon component.
-| <span class="prop-name">iconOpen</span> | <span class="prop-name">MuiSpeedDialIcon-iconOpen</span> | Styles applied to the icon component if `open={true}`.
-| <span class="prop-name">iconWithOpenIconOpen</span> | <span class="prop-name">MuiSpeedDialIcon-iconWithOpenIconOpen</span> | Styles applied to the icon when and `openIcon` is provided and if `open={true}`.
-| <span class="prop-name">openIcon</span> | <span class="prop-name">MuiSpeedDialIcon-openIcon</span> | Styles applied to the `openIcon` if provided.
-| <span class="prop-name">openIconOpen</span> | <span class="prop-name">MuiSpeedDialIcon-openIconOpen</span> | Styles applied to the `openIcon` if provided and if `open={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiSpeedDialIcon-root</span> | Styles applied to the root element.
+| <span class="prop-name">icon</span> | <span class="prop-name">.MuiSpeedDialIcon-icon</span> | Styles applied to the icon component.
+| <span class="prop-name">iconOpen</span> | <span class="prop-name">.MuiSpeedDialIcon-iconOpen</span> | Styles applied to the icon component if `open={true}`.
+| <span class="prop-name">iconWithOpenIconOpen</span> | <span class="prop-name">.MuiSpeedDialIcon-iconWithOpenIconOpen</span> | Styles applied to the icon when and `openIcon` is provided and if `open={true}`.
+| <span class="prop-name">openIcon</span> | <span class="prop-name">.MuiSpeedDialIcon-openIcon</span> | Styles applied to the `openIcon` if provided.
+| <span class="prop-name">openIconOpen</span> | <span class="prop-name">.MuiSpeedDialIcon-openIconOpen</span> | Styles applied to the `openIcon` if provided and if `open={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/speed-dial.md b/docs/pages/api/speed-dial.md
index 97f2e129adbc69..8ea77bff16f88f 100644
--- a/docs/pages/api/speed-dial.md
+++ b/docs/pages/api/speed-dial.md
@@ -50,14 +50,14 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiSpeedDial-root</span> | Styles applied to the root element.
-| <span class="prop-name">fab</span> | <span class="prop-name">MuiSpeedDial-fab</span> | Styles applied to the Fab component.
-| <span class="prop-name">directionUp</span> | <span class="prop-name">MuiSpeedDial-directionUp</span> | Styles applied to the root if direction="up"
-| <span class="prop-name">directionDown</span> | <span class="prop-name">MuiSpeedDial-directionDown</span> | Styles applied to the root if direction="down"
-| <span class="prop-name">directionLeft</span> | <span class="prop-name">MuiSpeedDial-directionLeft</span> | Styles applied to the root if direction="left"
-| <span class="prop-name">directionRight</span> | <span class="prop-name">MuiSpeedDial-directionRight</span> | Styles applied to the root if direction="right"
-| <span class="prop-name">actions</span> | <span class="prop-name">MuiSpeedDial-actions</span> | Styles applied to the actions (`children` wrapper) element.
-| <span class="prop-name">actionsClosed</span> | <span class="prop-name">MuiSpeedDial-actionsClosed</span> | Styles applied to the actions (`children` wrapper) element if `open={false}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiSpeedDial-root</span> | Styles applied to the root element.
+| <span class="prop-name">fab</span> | <span class="prop-name">.MuiSpeedDial-fab</span> | Styles applied to the Fab component.
+| <span class="prop-name">directionUp</span> | <span class="prop-name">.MuiSpeedDial-directionUp</span> | Styles applied to the root if direction="up"
+| <span class="prop-name">directionDown</span> | <span class="prop-name">.MuiSpeedDial-directionDown</span> | Styles applied to the root if direction="down"
+| <span class="prop-name">directionLeft</span> | <span class="prop-name">.MuiSpeedDial-directionLeft</span> | Styles applied to the root if direction="left"
+| <span class="prop-name">directionRight</span> | <span class="prop-name">.MuiSpeedDial-directionRight</span> | Styles applied to the root if direction="right"
+| <span class="prop-name">actions</span> | <span class="prop-name">.MuiSpeedDial-actions</span> | Styles applied to the actions (`children` wrapper) element.
+| <span class="prop-name">actionsClosed</span> | <span class="prop-name">.MuiSpeedDial-actionsClosed</span> | Styles applied to the actions (`children` wrapper) element if `open={false}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/step-button.md b/docs/pages/api/step-button.md
index 667c78c62e2e4e..83e6481df53ad7 100644
--- a/docs/pages/api/step-button.md
+++ b/docs/pages/api/step-button.md
@@ -40,10 +40,10 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiStepButton-root</span> | Styles applied to the root element.
-| <span class="prop-name">horizontal</span> | <span class="prop-name">MuiStepButton-horizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
-| <span class="prop-name">vertical</span> | <span class="prop-name">MuiStepButton-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
-| <span class="prop-name">touchRipple</span> | <span class="prop-name">MuiStepButton-touchRipple</span> | Styles applied to the `ButtonBase` touch-ripple.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiStepButton-root</span> | Styles applied to the root element.
+| <span class="prop-name">horizontal</span> | <span class="prop-name">.MuiStepButton-horizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
+| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiStepButton-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
+| <span class="prop-name">touchRipple</span> | <span class="prop-name">.MuiStepButton-touchRipple</span> | Styles applied to the `ButtonBase` touch-ripple.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/step-connector.md b/docs/pages/api/step-connector.md
index bc8aa1c1b37491..62326286fe1069 100644
--- a/docs/pages/api/step-connector.md
+++ b/docs/pages/api/step-connector.md
@@ -37,16 +37,16 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiStepConnector-root</span> | Styles applied to the root element.
-| <span class="prop-name">horizontal</span> | <span class="prop-name">MuiStepConnector-horizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
-| <span class="prop-name">vertical</span> | <span class="prop-name">MuiStepConnector-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
-| <span class="prop-name">alternativeLabel</span> | <span class="prop-name">MuiStepConnector-alternativeLabel</span> | Styles applied to the root element if `alternativeLabel={true}`.
-| <span class="prop-name">active</span> | <span class="prop-name">MuiStepConnector-active</span> | Pseudo-class applied to the root element if `active={true}`.
-| <span class="prop-name">completed</span> | <span class="prop-name">MuiStepConnector-completed</span> | Pseudo-class applied to the root element if `completed={true}`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">line</span> | <span class="prop-name">MuiStepConnector-line</span> | Styles applied to the line element.
-| <span class="prop-name">lineHorizontal</span> | <span class="prop-name">MuiStepConnector-lineHorizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
-| <span class="prop-name">lineVertical</span> | <span class="prop-name">MuiStepConnector-lineVertical</span> | Styles applied to the root element if `orientation="vertical"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiStepConnector-root</span> | Styles applied to the root element.
+| <span class="prop-name">horizontal</span> | <span class="prop-name">.MuiStepConnector-horizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
+| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiStepConnector-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
+| <span class="prop-name">alternativeLabel</span> | <span class="prop-name">.MuiStepConnector-alternativeLabel</span> | Styles applied to the root element if `alternativeLabel={true}`.
+| <span class="prop-name">active</span> | <span class="prop-name">.MuiStepConnector-active</span> | Pseudo-class applied to the root element if `active={true}`.
+| <span class="prop-name">completed</span> | <span class="prop-name">.MuiStepConnector-completed</span> | Pseudo-class applied to the root element if `completed={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">line</span> | <span class="prop-name">.MuiStepConnector-line</span> | Styles applied to the line element.
+| <span class="prop-name">lineHorizontal</span> | <span class="prop-name">.MuiStepConnector-lineHorizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
+| <span class="prop-name">lineVertical</span> | <span class="prop-name">.MuiStepConnector-lineVertical</span> | Styles applied to the root element if `orientation="vertical"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/step-content.md b/docs/pages/api/step-content.md
index f1822cc727e04b..2a745071f30a60 100644
--- a/docs/pages/api/step-content.md
+++ b/docs/pages/api/step-content.md
@@ -41,9 +41,9 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiStepContent-root</span> | Styles applied to the root element.
-| <span class="prop-name">last</span> | <span class="prop-name">MuiStepContent-last</span> | Styles applied to the root element if `last={true}` (controlled by `Step`).
-| <span class="prop-name">transition</span> | <span class="prop-name">MuiStepContent-transition</span> | Styles applied to the Transition component.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiStepContent-root</span> | Styles applied to the root element.
+| <span class="prop-name">last</span> | <span class="prop-name">.MuiStepContent-last</span> | Styles applied to the root element if `last={true}` (controlled by `Step`).
+| <span class="prop-name">transition</span> | <span class="prop-name">.MuiStepContent-transition</span> | Styles applied to the Transition component.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/step-icon.md b/docs/pages/api/step-icon.md
index ee318952895b63..3294b0ea33f5ab 100644
--- a/docs/pages/api/step-icon.md
+++ b/docs/pages/api/step-icon.md
@@ -41,11 +41,11 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiStepIcon-root</span> | Styles applied to the root element.
-| <span class="prop-name">text</span> | <span class="prop-name">MuiStepIcon-text</span> | Styles applied to the SVG text element.
-| <span class="prop-name">active</span> | <span class="prop-name">MuiStepIcon-active</span> | Pseudo-class applied to the root element if `active={true}`.
-| <span class="prop-name">completed</span> | <span class="prop-name">MuiStepIcon-completed</span> | Pseudo-class applied to the root element if `completed={true}`.
-| <span class="prop-name">error</span> | <span class="prop-name">Mui-error</span> | Pseudo-class applied to the root element if `error={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiStepIcon-root</span> | Styles applied to the root element.
+| <span class="prop-name">text</span> | <span class="prop-name">.MuiStepIcon-text</span> | Styles applied to the SVG text element.
+| <span class="prop-name">active</span> | <span class="prop-name">.MuiStepIcon-active</span> | Pseudo-class applied to the root element if `active={true}`.
+| <span class="prop-name">completed</span> | <span class="prop-name">.MuiStepIcon-completed</span> | Pseudo-class applied to the root element if `completed={true}`.
+| <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Pseudo-class applied to the root element if `error={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/step-label.md b/docs/pages/api/step-label.md
index 08187de30cccea..6393faa1eb627c 100644
--- a/docs/pages/api/step-label.md
+++ b/docs/pages/api/step-label.md
@@ -44,17 +44,17 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiStepLabel-root</span> | Styles applied to the root element.
-| <span class="prop-name">horizontal</span> | <span class="prop-name">MuiStepLabel-horizontal</span> | Styles applied to the root element if `orientation="horizontal".
-| <span class="prop-name">vertical</span> | <span class="prop-name">MuiStepLabel-vertical</span> | Styles applied to the root element if `orientation="vertical".
-| <span class="prop-name">label</span> | <span class="prop-name">MuiStepLabel-label</span> | Styles applied to the `Typography` component which wraps `children`.
-| <span class="prop-name">active</span> | <span class="prop-name">MuiStepLabel-active</span> | Pseudo-class applied to the `Typography` component if `active={true}`.
-| <span class="prop-name">completed</span> | <span class="prop-name">MuiStepLabel-completed</span> | Pseudo-class applied to the `Typography` component if `completed={true}`.
-| <span class="prop-name">error</span> | <span class="prop-name">Mui-error</span> | Pseudo-class applied to the root element and `Typography` component if `error={true}`.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element and `Typography` component if `disabled={true}`.
-| <span class="prop-name">iconContainer</span> | <span class="prop-name">MuiStepLabel-iconContainer</span> | Styles applied to the `icon` container element.
-| <span class="prop-name">alternativeLabel</span> | <span class="prop-name">MuiStepLabel-alternativeLabel</span> | Pseudo-class applied to the root and icon container and `Typography` if `alternativeLabel={true}`.
-| <span class="prop-name">labelContainer</span> | <span class="prop-name">MuiStepLabel-labelContainer</span> | Styles applied to the container element which wraps `Typography` and `optional`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiStepLabel-root</span> | Styles applied to the root element.
+| <span class="prop-name">horizontal</span> | <span class="prop-name">.MuiStepLabel-horizontal</span> | Styles applied to the root element if `orientation="horizontal".
+| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiStepLabel-vertical</span> | Styles applied to the root element if `orientation="vertical".
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiStepLabel-label</span> | Styles applied to the `Typography` component which wraps `children`.
+| <span class="prop-name">active</span> | <span class="prop-name">.MuiStepLabel-active</span> | Pseudo-class applied to the `Typography` component if `active={true}`.
+| <span class="prop-name">completed</span> | <span class="prop-name">.MuiStepLabel-completed</span> | Pseudo-class applied to the `Typography` component if `completed={true}`.
+| <span class="prop-name">error</span> | <span class="prop-name">.Mui-error</span> | Pseudo-class applied to the root element and `Typography` component if `error={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element and `Typography` component if `disabled={true}`.
+| <span class="prop-name">iconContainer</span> | <span class="prop-name">.MuiStepLabel-iconContainer</span> | Styles applied to the `icon` container element.
+| <span class="prop-name">alternativeLabel</span> | <span class="prop-name">.MuiStepLabel-alternativeLabel</span> | Pseudo-class applied to the root and icon container and `Typography` if `alternativeLabel={true}`.
+| <span class="prop-name">labelContainer</span> | <span class="prop-name">.MuiStepLabel-labelContainer</span> | Styles applied to the container element which wraps `Typography` and `optional`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/step.md b/docs/pages/api/step.md
index 6918b5aa950afd..00f26e848e4c47 100644
--- a/docs/pages/api/step.md
+++ b/docs/pages/api/step.md
@@ -41,11 +41,11 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiStep-root</span> | Styles applied to the root element.
-| <span class="prop-name">horizontal</span> | <span class="prop-name">MuiStep-horizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
-| <span class="prop-name">vertical</span> | <span class="prop-name">MuiStep-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
-| <span class="prop-name">alternativeLabel</span> | <span class="prop-name">MuiStep-alternativeLabel</span> | Styles applied to the root element if `alternativeLabel={true}`.
-| <span class="prop-name">completed</span> | <span class="prop-name">MuiStep-completed</span> | Pseudo-class applied to the root element if `completed={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiStep-root</span> | Styles applied to the root element.
+| <span class="prop-name">horizontal</span> | <span class="prop-name">.MuiStep-horizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
+| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiStep-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
+| <span class="prop-name">alternativeLabel</span> | <span class="prop-name">.MuiStep-alternativeLabel</span> | Styles applied to the root element if `alternativeLabel={true}`.
+| <span class="prop-name">completed</span> | <span class="prop-name">.MuiStep-completed</span> | Pseudo-class applied to the root element if `completed={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/stepper.md b/docs/pages/api/stepper.md
index 5b6999f75dee5e..b8fcdeadc77170 100644
--- a/docs/pages/api/stepper.md
+++ b/docs/pages/api/stepper.md
@@ -43,10 +43,10 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiStepper-root</span> | Styles applied to the root element.
-| <span class="prop-name">horizontal</span> | <span class="prop-name">MuiStepper-horizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
-| <span class="prop-name">vertical</span> | <span class="prop-name">MuiStepper-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
-| <span class="prop-name">alternativeLabel</span> | <span class="prop-name">MuiStepper-alternativeLabel</span> | Styles applied to the root element if `alternativeLabel={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiStepper-root</span> | Styles applied to the root element.
+| <span class="prop-name">horizontal</span> | <span class="prop-name">.MuiStepper-horizontal</span> | Styles applied to the root element if `orientation="horizontal"`.
+| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiStepper-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
+| <span class="prop-name">alternativeLabel</span> | <span class="prop-name">.MuiStepper-alternativeLabel</span> | Styles applied to the root element if `alternativeLabel={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/svg-icon.md b/docs/pages/api/svg-icon.md
index 98656598c7937b..24b7a4fa339c79 100644
--- a/docs/pages/api/svg-icon.md
+++ b/docs/pages/api/svg-icon.md
@@ -45,15 +45,15 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiSvgIcon-root</span> | Styles applied to the root element.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiSvgIcon-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiSvgIcon-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
-| <span class="prop-name">colorAction</span> | <span class="prop-name">MuiSvgIcon-colorAction</span> | Styles applied to the root element if `color="action"`.
-| <span class="prop-name">colorError</span> | <span class="prop-name">MuiSvgIcon-colorError</span> | Styles applied to the root element if `color="error"`.
-| <span class="prop-name">colorDisabled</span> | <span class="prop-name">MuiSvgIcon-colorDisabled</span> | Styles applied to the root element if `color="disabled"`.
-| <span class="prop-name">fontSizeInherit</span> | <span class="prop-name">MuiSvgIcon-fontSizeInherit</span> | Styles applied to the root element if `fontSize="inherit"`.
-| <span class="prop-name">fontSizeSmall</span> | <span class="prop-name">MuiSvgIcon-fontSizeSmall</span> | Styles applied to the root element if `fontSize="small"`.
-| <span class="prop-name">fontSizeLarge</span> | <span class="prop-name">MuiSvgIcon-fontSizeLarge</span> | Styles applied to the root element if `fontSize="large"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiSvgIcon-root</span> | Styles applied to the root element.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiSvgIcon-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiSvgIcon-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">colorAction</span> | <span class="prop-name">.MuiSvgIcon-colorAction</span> | Styles applied to the root element if `color="action"`.
+| <span class="prop-name">colorError</span> | <span class="prop-name">.MuiSvgIcon-colorError</span> | Styles applied to the root element if `color="error"`.
+| <span class="prop-name">colorDisabled</span> | <span class="prop-name">.MuiSvgIcon-colorDisabled</span> | Styles applied to the root element if `color="disabled"`.
+| <span class="prop-name">fontSizeInherit</span> | <span class="prop-name">.MuiSvgIcon-fontSizeInherit</span> | Styles applied to the root element if `fontSize="inherit"`.
+| <span class="prop-name">fontSizeSmall</span> | <span class="prop-name">.MuiSvgIcon-fontSizeSmall</span> | Styles applied to the root element if `fontSize="small"`.
+| <span class="prop-name">fontSizeLarge</span> | <span class="prop-name">.MuiSvgIcon-fontSizeLarge</span> | Styles applied to the root element if `fontSize="large"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/switch.md b/docs/pages/api/switch.md
index 88c0b49a2b2761..e33b56c704c50c 100644
--- a/docs/pages/api/switch.md
+++ b/docs/pages/api/switch.md
@@ -52,18 +52,18 @@ Any other props supplied will be provided to the root element ([IconButton](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiSwitch-root</span> | Styles applied to the root element.
-| <span class="prop-name">edgeStart</span> | <span class="prop-name">MuiSwitch-edgeStart</span> | Styles applied to the root element if `edge="start"`.
-| <span class="prop-name">edgeEnd</span> | <span class="prop-name">MuiSwitch-edgeEnd</span> | Styles applied to the root element if `edge="end"`.
-| <span class="prop-name">switchBase</span> | <span class="prop-name">MuiSwitch-switchBase</span> | Styles applied to the internal `SwitchBase` component's `root` class.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiSwitch-colorPrimary</span> | Styles applied to the internal SwitchBase component's root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiSwitch-colorSecondary</span> | Styles applied to the internal SwitchBase component's root element if `color="secondary"`.
-| <span class="prop-name">sizeSmall</span> | <span class="prop-name">MuiSwitch-sizeSmall</span> | Styles applied to the root element if `size="small"`.
-| <span class="prop-name">checked</span> | <span class="prop-name">Mui-checked</span> | Pseudo-class applied to the internal `SwitchBase` component's `checked` class.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the internal SwitchBase component's disabled class.
-| <span class="prop-name">input</span> | <span class="prop-name">MuiSwitch-input</span> | Styles applied to the internal SwitchBase component's input element.
-| <span class="prop-name">thumb</span> | <span class="prop-name">MuiSwitch-thumb</span> | Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop.
-| <span class="prop-name">track</span> | <span class="prop-name">MuiSwitch-track</span> | Styles applied to the track element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiSwitch-root</span> | Styles applied to the root element.
+| <span class="prop-name">edgeStart</span> | <span class="prop-name">.MuiSwitch-edgeStart</span> | Styles applied to the root element if `edge="start"`.
+| <span class="prop-name">edgeEnd</span> | <span class="prop-name">.MuiSwitch-edgeEnd</span> | Styles applied to the root element if `edge="end"`.
+| <span class="prop-name">switchBase</span> | <span class="prop-name">.MuiSwitch-switchBase</span> | Styles applied to the internal `SwitchBase` component's `root` class.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiSwitch-colorPrimary</span> | Styles applied to the internal SwitchBase component's root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiSwitch-colorSecondary</span> | Styles applied to the internal SwitchBase component's root element if `color="secondary"`.
+| <span class="prop-name">sizeSmall</span> | <span class="prop-name">.MuiSwitch-sizeSmall</span> | Styles applied to the root element if `size="small"`.
+| <span class="prop-name">checked</span> | <span class="prop-name">.Mui-checked</span> | Pseudo-class applied to the internal `SwitchBase` component's `checked` class.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the internal SwitchBase component's disabled class.
+| <span class="prop-name">input</span> | <span class="prop-name">.MuiSwitch-input</span> | Styles applied to the internal SwitchBase component's input element.
+| <span class="prop-name">thumb</span> | <span class="prop-name">.MuiSwitch-thumb</span> | Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop.
+| <span class="prop-name">track</span> | <span class="prop-name">.MuiSwitch-track</span> | Styles applied to the track element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/tab.md b/docs/pages/api/tab.md
index 84c57f53e8139a..2e60ae892a7daf 100644
--- a/docs/pages/api/tab.md
+++ b/docs/pages/api/tab.md
@@ -45,16 +45,16 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTab-root</span> | Styles applied to the root element.
-| <span class="prop-name">labelIcon</span> | <span class="prop-name">MuiTab-labelIcon</span> | Styles applied to the root element if both `icon` and `label` are provided.
-| <span class="prop-name">textColorInherit</span> | <span class="prop-name">MuiTab-textColorInherit</span> | Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="inherit"`.
-| <span class="prop-name">textColorPrimary</span> | <span class="prop-name">MuiTab-textColorPrimary</span> | Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="primary"`.
-| <span class="prop-name">textColorSecondary</span> | <span class="prop-name">MuiTab-textColorSecondary</span> | Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="secondary"`.
-| <span class="prop-name">selected</span> | <span class="prop-name">Mui-selected</span> | Pseudo-class applied to the root element if `selected={true}` (controlled by the Tabs component).
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}` (controlled by the Tabs component).
-| <span class="prop-name">fullWidth</span> | <span class="prop-name">MuiTab-fullWidth</span> | Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component).
-| <span class="prop-name">wrapped</span> | <span class="prop-name">MuiTab-wrapped</span> | Styles applied to the root element if `wrapped={true}`.
-| <span class="prop-name">wrapper</span> | <span class="prop-name">MuiTab-wrapper</span> | Styles applied to the `icon` and `label`'s wrapper element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTab-root</span> | Styles applied to the root element.
+| <span class="prop-name">labelIcon</span> | <span class="prop-name">.MuiTab-labelIcon</span> | Styles applied to the root element if both `icon` and `label` are provided.
+| <span class="prop-name">textColorInherit</span> | <span class="prop-name">.MuiTab-textColorInherit</span> | Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="inherit"`.
+| <span class="prop-name">textColorPrimary</span> | <span class="prop-name">.MuiTab-textColorPrimary</span> | Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="primary"`.
+| <span class="prop-name">textColorSecondary</span> | <span class="prop-name">.MuiTab-textColorSecondary</span> | Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="secondary"`.
+| <span class="prop-name">selected</span> | <span class="prop-name">.Mui-selected</span> | Pseudo-class applied to the root element if `selected={true}` (controlled by the Tabs component).
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}` (controlled by the Tabs component).
+| <span class="prop-name">fullWidth</span> | <span class="prop-name">.MuiTab-fullWidth</span> | Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component).
+| <span class="prop-name">wrapped</span> | <span class="prop-name">.MuiTab-wrapped</span> | Styles applied to the root element if `wrapped={true}`.
+| <span class="prop-name">wrapper</span> | <span class="prop-name">.MuiTab-wrapper</span> | Styles applied to the `icon` and `label`'s wrapper element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/table-body.md b/docs/pages/api/table-body.md
index aafc8d09b60490..3a26da27b8c4be 100644
--- a/docs/pages/api/table-body.md
+++ b/docs/pages/api/table-body.md
@@ -39,7 +39,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTableBody-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTableBody-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/table-cell.md b/docs/pages/api/table-cell.md
index c60c20a96ba22f..472994af0d3c00 100644
--- a/docs/pages/api/table-cell.md
+++ b/docs/pages/api/table-cell.md
@@ -45,18 +45,18 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTableCell-root</span> | Styles applied to the root element.
-| <span class="prop-name">head</span> | <span class="prop-name">MuiTableCell-head</span> | Styles applied to the root element if `variant="head"` or `context.table.head`.
-| <span class="prop-name">body</span> | <span class="prop-name">MuiTableCell-body</span> | Styles applied to the root element if `variant="body"` or `context.table.body`.
-| <span class="prop-name">footer</span> | <span class="prop-name">MuiTableCell-footer</span> | Styles applied to the root element if `variant="footer"` or `context.table.footer`.
-| <span class="prop-name">sizeSmall</span> | <span class="prop-name">MuiTableCell-sizeSmall</span> | Styles applied to the root element if `size="small"`.
-| <span class="prop-name">paddingCheckbox</span> | <span class="prop-name">MuiTableCell-paddingCheckbox</span> | Styles applied to the root element if `padding="checkbox"`.
-| <span class="prop-name">paddingNone</span> | <span class="prop-name">MuiTableCell-paddingNone</span> | Styles applied to the root element if `padding="none"`.
-| <span class="prop-name">alignLeft</span> | <span class="prop-name">MuiTableCell-alignLeft</span> | Styles applied to the root element if `align="left"`.
-| <span class="prop-name">alignCenter</span> | <span class="prop-name">MuiTableCell-alignCenter</span> | Styles applied to the root element if `align="center"`.
-| <span class="prop-name">alignRight</span> | <span class="prop-name">MuiTableCell-alignRight</span> | Styles applied to the root element if `align="right"`.
-| <span class="prop-name">alignJustify</span> | <span class="prop-name">MuiTableCell-alignJustify</span> | Styles applied to the root element if `align="justify"`.
-| <span class="prop-name">stickyHeader</span> | <span class="prop-name">MuiTableCell-stickyHeader</span> | Styles applied to the root element if `context.table.stickyHeader={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTableCell-root</span> | Styles applied to the root element.
+| <span class="prop-name">head</span> | <span class="prop-name">.MuiTableCell-head</span> | Styles applied to the root element if `variant="head"` or `context.table.head`.
+| <span class="prop-name">body</span> | <span class="prop-name">.MuiTableCell-body</span> | Styles applied to the root element if `variant="body"` or `context.table.body`.
+| <span class="prop-name">footer</span> | <span class="prop-name">.MuiTableCell-footer</span> | Styles applied to the root element if `variant="footer"` or `context.table.footer`.
+| <span class="prop-name">sizeSmall</span> | <span class="prop-name">.MuiTableCell-sizeSmall</span> | Styles applied to the root element if `size="small"`.
+| <span class="prop-name">paddingCheckbox</span> | <span class="prop-name">.MuiTableCell-paddingCheckbox</span> | Styles applied to the root element if `padding="checkbox"`.
+| <span class="prop-name">paddingNone</span> | <span class="prop-name">.MuiTableCell-paddingNone</span> | Styles applied to the root element if `padding="none"`.
+| <span class="prop-name">alignLeft</span> | <span class="prop-name">.MuiTableCell-alignLeft</span> | Styles applied to the root element if `align="left"`.
+| <span class="prop-name">alignCenter</span> | <span class="prop-name">.MuiTableCell-alignCenter</span> | Styles applied to the root element if `align="center"`.
+| <span class="prop-name">alignRight</span> | <span class="prop-name">.MuiTableCell-alignRight</span> | Styles applied to the root element if `align="right"`.
+| <span class="prop-name">alignJustify</span> | <span class="prop-name">.MuiTableCell-alignJustify</span> | Styles applied to the root element if `align="justify"`.
+| <span class="prop-name">stickyHeader</span> | <span class="prop-name">.MuiTableCell-stickyHeader</span> | Styles applied to the root element if `context.table.stickyHeader={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/table-footer.md b/docs/pages/api/table-footer.md
index 7cc549f64ab606..46b30b4f6907e1 100644
--- a/docs/pages/api/table-footer.md
+++ b/docs/pages/api/table-footer.md
@@ -39,7 +39,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTableFooter-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTableFooter-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/table-head.md b/docs/pages/api/table-head.md
index 2ecf6b963e19dc..34f84fe4193916 100644
--- a/docs/pages/api/table-head.md
+++ b/docs/pages/api/table-head.md
@@ -39,7 +39,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTableHead-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTableHead-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/table-pagination.md b/docs/pages/api/table-pagination.md
index e10089deecb54c..b0847b26a9c9d9 100644
--- a/docs/pages/api/table-pagination.md
+++ b/docs/pages/api/table-pagination.md
@@ -50,16 +50,16 @@ Any other props supplied will be provided to the root element ([TableCell](/api/
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTablePagination-root</span> | Styles applied to the root element.
-| <span class="prop-name">toolbar</span> | <span class="prop-name">MuiTablePagination-toolbar</span> | Styles applied to the Toolbar component.
-| <span class="prop-name">spacer</span> | <span class="prop-name">MuiTablePagination-spacer</span> | Styles applied to the spacer element.
-| <span class="prop-name">caption</span> | <span class="prop-name">MuiTablePagination-caption</span> | Styles applied to the caption Typography components if `variant="caption"`.
-| <span class="prop-name">selectRoot</span> | <span class="prop-name">MuiTablePagination-selectRoot</span> | Styles applied to the Select component root element.
-| <span class="prop-name">select</span> | <span class="prop-name">MuiTablePagination-select</span> | Styles applied to the Select component `select` class.
-| <span class="prop-name">selectIcon</span> | <span class="prop-name">MuiTablePagination-selectIcon</span> | Styles applied to the Select component `icon` class.
-| <span class="prop-name">input</span> | <span class="prop-name">MuiTablePagination-input</span> | Styles applied to the `InputBase` component.
-| <span class="prop-name">menuItem</span> | <span class="prop-name">MuiTablePagination-menuItem</span> | Styles applied to the MenuItem component.
-| <span class="prop-name">actions</span> | <span class="prop-name">MuiTablePagination-actions</span> | Styles applied to the internal `TablePaginationActions` component.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTablePagination-root</span> | Styles applied to the root element.
+| <span class="prop-name">toolbar</span> | <span class="prop-name">.MuiTablePagination-toolbar</span> | Styles applied to the Toolbar component.
+| <span class="prop-name">spacer</span> | <span class="prop-name">.MuiTablePagination-spacer</span> | Styles applied to the spacer element.
+| <span class="prop-name">caption</span> | <span class="prop-name">.MuiTablePagination-caption</span> | Styles applied to the caption Typography components if `variant="caption"`.
+| <span class="prop-name">selectRoot</span> | <span class="prop-name">.MuiTablePagination-selectRoot</span> | Styles applied to the Select component root element.
+| <span class="prop-name">select</span> | <span class="prop-name">.MuiTablePagination-select</span> | Styles applied to the Select component `select` class.
+| <span class="prop-name">selectIcon</span> | <span class="prop-name">.MuiTablePagination-selectIcon</span> | Styles applied to the Select component `icon` class.
+| <span class="prop-name">input</span> | <span class="prop-name">.MuiTablePagination-input</span> | Styles applied to the `InputBase` component.
+| <span class="prop-name">menuItem</span> | <span class="prop-name">.MuiTablePagination-menuItem</span> | Styles applied to the MenuItem component.
+| <span class="prop-name">actions</span> | <span class="prop-name">.MuiTablePagination-actions</span> | Styles applied to the internal `TablePaginationActions` component.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/table-row.md b/docs/pages/api/table-row.md
index fa5e7ef3fd8b2b..12dc4d1f1ba3bb 100644
--- a/docs/pages/api/table-row.md
+++ b/docs/pages/api/table-row.md
@@ -42,11 +42,11 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTableRow-root</span> | Styles applied to the root element.
-| <span class="prop-name">selected</span> | <span class="prop-name">Mui-selected</span> | Pseudo-class applied to the root element if `selected={true}`.
-| <span class="prop-name">hover</span> | <span class="prop-name">MuiTableRow-hover</span> | Pseudo-class applied to the root element if `hover={true}`.
-| <span class="prop-name">head</span> | <span class="prop-name">MuiTableRow-head</span> | Styles applied to the root element if table variant="head".
-| <span class="prop-name">footer</span> | <span class="prop-name">MuiTableRow-footer</span> | Styles applied to the root element if table variant="footer".
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTableRow-root</span> | Styles applied to the root element.
+| <span class="prop-name">selected</span> | <span class="prop-name">.Mui-selected</span> | Pseudo-class applied to the root element if `selected={true}`.
+| <span class="prop-name">hover</span> | <span class="prop-name">.MuiTableRow-hover</span> | Pseudo-class applied to the root element if `hover={true}`.
+| <span class="prop-name">head</span> | <span class="prop-name">.MuiTableRow-head</span> | Styles applied to the root element if table variant="head".
+| <span class="prop-name">footer</span> | <span class="prop-name">.MuiTableRow-footer</span> | Styles applied to the root element if table variant="footer".
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/table-sort-label.md b/docs/pages/api/table-sort-label.md
index ae1f369505961e..fcd273d9185150 100644
--- a/docs/pages/api/table-sort-label.md
+++ b/docs/pages/api/table-sort-label.md
@@ -42,11 +42,11 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTableSortLabel-root</span> | Styles applied to the root element.
-| <span class="prop-name">active</span> | <span class="prop-name">MuiTableSortLabel-active</span> | Pseudo-class applied to the root element if `active={true}`.
-| <span class="prop-name">icon</span> | <span class="prop-name">MuiTableSortLabel-icon</span> | Styles applied to the icon component.
-| <span class="prop-name">iconDirectionDesc</span> | <span class="prop-name">MuiTableSortLabel-iconDirectionDesc</span> | Styles applied to the icon component if `direction="desc"`.
-| <span class="prop-name">iconDirectionAsc</span> | <span class="prop-name">MuiTableSortLabel-iconDirectionAsc</span> | Styles applied to the icon component if `direction="asc"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTableSortLabel-root</span> | Styles applied to the root element.
+| <span class="prop-name">active</span> | <span class="prop-name">.MuiTableSortLabel-active</span> | Pseudo-class applied to the root element if `active={true}`.
+| <span class="prop-name">icon</span> | <span class="prop-name">.MuiTableSortLabel-icon</span> | Styles applied to the icon component.
+| <span class="prop-name">iconDirectionDesc</span> | <span class="prop-name">.MuiTableSortLabel-iconDirectionDesc</span> | Styles applied to the icon component if `direction="desc"`.
+| <span class="prop-name">iconDirectionAsc</span> | <span class="prop-name">.MuiTableSortLabel-iconDirectionAsc</span> | Styles applied to the icon component if `direction="asc"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/table.md b/docs/pages/api/table.md
index 71dbc56daf03a7..3af03b309dd7a4 100644
--- a/docs/pages/api/table.md
+++ b/docs/pages/api/table.md
@@ -42,8 +42,8 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTable-root</span> | Styles applied to the root element.
-| <span class="prop-name">stickyHeader</span> | <span class="prop-name">MuiTable-stickyHeader</span> | Styles applied to the root element if `stickyHeader={true}`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTable-root</span> | Styles applied to the root element.
+| <span class="prop-name">stickyHeader</span> | <span class="prop-name">.MuiTable-stickyHeader</span> | Styles applied to the root element if `stickyHeader={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/tabs.md b/docs/pages/api/tabs.md
index da3aff90670488..ec9d30bfc9c083 100644
--- a/docs/pages/api/tabs.md
+++ b/docs/pages/api/tabs.md
@@ -50,17 +50,17 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTabs-root</span> | Styles applied to the root element.
-| <span class="prop-name">vertical</span> | <span class="prop-name">MuiTabs-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
-| <span class="prop-name">flexContainer</span> | <span class="prop-name">MuiTabs-flexContainer</span> | Styles applied to the flex container element.
-| <span class="prop-name">flexContainerVertical</span> | <span class="prop-name">MuiTabs-flexContainerVertical</span> | Styles applied to the flex container element if `orientation="vertical"`.
-| <span class="prop-name">centered</span> | <span class="prop-name">MuiTabs-centered</span> | Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`.
-| <span class="prop-name">scroller</span> | <span class="prop-name">MuiTabs-scroller</span> | Styles applied to the tablist element.
-| <span class="prop-name">fixed</span> | <span class="prop-name">MuiTabs-fixed</span> | Styles applied to the tablist element if `!variant="scrollable"`.
-| <span class="prop-name">scrollable</span> | <span class="prop-name">MuiTabs-scrollable</span> | Styles applied to the tablist element if `variant="scrollable"`.
-| <span class="prop-name">scrollButtons</span> | <span class="prop-name">MuiTabs-scrollButtons</span> | Styles applied to the `ScrollButtonComponent` component.
-| <span class="prop-name">scrollButtonsDesktop</span> | <span class="prop-name">MuiTabs-scrollButtonsDesktop</span> | Styles applied to the `ScrollButtonComponent` component if `scrollButtons="auto"` or scrollButtons="desktop"`.
-| <span class="prop-name">indicator</span> | <span class="prop-name">MuiTabs-indicator</span> | Styles applied to the `TabIndicator` component.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTabs-root</span> | Styles applied to the root element.
+| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiTabs-vertical</span> | Styles applied to the root element if `orientation="vertical"`.
+| <span class="prop-name">flexContainer</span> | <span class="prop-name">.MuiTabs-flexContainer</span> | Styles applied to the flex container element.
+| <span class="prop-name">flexContainerVertical</span> | <span class="prop-name">.MuiTabs-flexContainerVertical</span> | Styles applied to the flex container element if `orientation="vertical"`.
+| <span class="prop-name">centered</span> | <span class="prop-name">.MuiTabs-centered</span> | Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`.
+| <span class="prop-name">scroller</span> | <span class="prop-name">.MuiTabs-scroller</span> | Styles applied to the tablist element.
+| <span class="prop-name">fixed</span> | <span class="prop-name">.MuiTabs-fixed</span> | Styles applied to the tablist element if `!variant="scrollable"`.
+| <span class="prop-name">scrollable</span> | <span class="prop-name">.MuiTabs-scrollable</span> | Styles applied to the tablist element if `variant="scrollable"`.
+| <span class="prop-name">scrollButtons</span> | <span class="prop-name">.MuiTabs-scrollButtons</span> | Styles applied to the `ScrollButtonComponent` component.
+| <span class="prop-name">scrollButtonsDesktop</span> | <span class="prop-name">.MuiTabs-scrollButtonsDesktop</span> | Styles applied to the `ScrollButtonComponent` component if `scrollButtons="auto"` or scrollButtons="desktop"`.
+| <span class="prop-name">indicator</span> | <span class="prop-name">.MuiTabs-indicator</span> | Styles applied to the `TabIndicator` component.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/text-field.md b/docs/pages/api/text-field.md
index d101020b8bfa4d..2260eded3b50f3 100644
--- a/docs/pages/api/text-field.md
+++ b/docs/pages/api/text-field.md
@@ -93,7 +93,7 @@ Any other props supplied will be provided to the root element ([FormControl](/ap
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTextField-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTextField-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/toggle-button-group.md b/docs/pages/api/toggle-button-group.md
index 1ab3a87351b366..40458b5b3dfd75 100644
--- a/docs/pages/api/toggle-button-group.md
+++ b/docs/pages/api/toggle-button-group.md
@@ -42,10 +42,10 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiToggleButtonGroup-root</span> | Styles applied to the root element.
-| <span class="prop-name">grouped</span> | <span class="prop-name">MuiToggleButtonGroup-grouped</span> | Styles applied to the children.
-| <span class="prop-name">groupedSizeSmall</span> | <span class="prop-name">MuiToggleButtonGroup-groupedSizeSmall</span> | Styles applied to the children if `size="small"`.
-| <span class="prop-name">groupedSizeLarge</span> | <span class="prop-name">MuiToggleButtonGroup-groupedSizeLarge</span> | Styles applied to the children if `size="large"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiToggleButtonGroup-root</span> | Styles applied to the root element.
+| <span class="prop-name">grouped</span> | <span class="prop-name">.MuiToggleButtonGroup-grouped</span> | Styles applied to the children.
+| <span class="prop-name">groupedSizeSmall</span> | <span class="prop-name">.MuiToggleButtonGroup-groupedSizeSmall</span> | Styles applied to the children if `size="small"`.
+| <span class="prop-name">groupedSizeLarge</span> | <span class="prop-name">.MuiToggleButtonGroup-groupedSizeLarge</span> | Styles applied to the children if `size="large"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/toggle-button.md b/docs/pages/api/toggle-button.md
index e9bcdf9e607c18..2a30448d218298 100644
--- a/docs/pages/api/toggle-button.md
+++ b/docs/pages/api/toggle-button.md
@@ -43,12 +43,12 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiToggleButton-root</span> | Styles applied to the root element.
-| <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
-| <span class="prop-name">selected</span> | <span class="prop-name">Mui-selected</span> | Pseudo-class applied to the root element if `selected={true}`.
-| <span class="prop-name">label</span> | <span class="prop-name">MuiToggleButton-label</span> | Styles applied to the `label` wrapper element.
-| <span class="prop-name">sizeSmall</span> | <span class="prop-name">MuiToggleButton-sizeSmall</span> | Styles applied to the root element if `size="small"`.
-| <span class="prop-name">sizeLarge</span> | <span class="prop-name">MuiToggleButton-sizeLarge</span> | Styles applied to the root element if `size="large"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiToggleButton-root</span> | Styles applied to the root element.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
+| <span class="prop-name">selected</span> | <span class="prop-name">.Mui-selected</span> | Pseudo-class applied to the root element if `selected={true}`.
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiToggleButton-label</span> | Styles applied to the `label` wrapper element.
+| <span class="prop-name">sizeSmall</span> | <span class="prop-name">.MuiToggleButton-sizeSmall</span> | Styles applied to the root element if `size="small"`.
+| <span class="prop-name">sizeLarge</span> | <span class="prop-name">.MuiToggleButton-sizeLarge</span> | Styles applied to the root element if `size="large"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/toolbar.md b/docs/pages/api/toolbar.md
index 421bd73f27fbdf..249bbd2de9ba71 100644
--- a/docs/pages/api/toolbar.md
+++ b/docs/pages/api/toolbar.md
@@ -41,10 +41,10 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiToolbar-root</span> | Styles applied to the root element.
-| <span class="prop-name">gutters</span> | <span class="prop-name">MuiToolbar-gutters</span> | Styles applied to the root element if `disableGutters={false}`.
-| <span class="prop-name">regular</span> | <span class="prop-name">MuiToolbar-regular</span> | Styles applied to the root element if `variant="regular"`.
-| <span class="prop-name">dense</span> | <span class="prop-name">MuiToolbar-dense</span> | Styles applied to the root element if `variant="dense"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiToolbar-root</span> | Styles applied to the root element.
+| <span class="prop-name">gutters</span> | <span class="prop-name">.MuiToolbar-gutters</span> | Styles applied to the root element if `disableGutters={false}`.
+| <span class="prop-name">regular</span> | <span class="prop-name">.MuiToolbar-regular</span> | Styles applied to the root element if `variant="regular"`.
+| <span class="prop-name">dense</span> | <span class="prop-name">.MuiToolbar-dense</span> | Styles applied to the root element if `variant="dense"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/tooltip.md b/docs/pages/api/tooltip.md
index e22f9bf56bac3a..571c58a2dbe804 100644
--- a/docs/pages/api/tooltip.md
+++ b/docs/pages/api/tooltip.md
@@ -55,14 +55,14 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">popper</span> | <span class="prop-name">MuiTooltip-popper</span> | Styles applied to the Popper component.
-| <span class="prop-name">popperInteractive</span> | <span class="prop-name">MuiTooltip-popperInteractive</span> | Styles applied to the Popper component if `interactive={true}`.
-| <span class="prop-name">tooltip</span> | <span class="prop-name">MuiTooltip-tooltip</span> | Styles applied to the tooltip (label wrapper) element.
-| <span class="prop-name">touch</span> | <span class="prop-name">MuiTooltip-touch</span> | Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch.
-| <span class="prop-name">tooltipPlacementLeft</span> | <span class="prop-name">MuiTooltip-tooltipPlacementLeft</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "left".
-| <span class="prop-name">tooltipPlacementRight</span> | <span class="prop-name">MuiTooltip-tooltipPlacementRight</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "right".
-| <span class="prop-name">tooltipPlacementTop</span> | <span class="prop-name">MuiTooltip-tooltipPlacementTop</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "top".
-| <span class="prop-name">tooltipPlacementBottom</span> | <span class="prop-name">MuiTooltip-tooltipPlacementBottom</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom".
+| <span class="prop-name">popper</span> | <span class="prop-name">.MuiTooltip-popper</span> | Styles applied to the Popper component.
+| <span class="prop-name">popperInteractive</span> | <span class="prop-name">.MuiTooltip-popperInteractive</span> | Styles applied to the Popper component if `interactive={true}`.
+| <span class="prop-name">tooltip</span> | <span class="prop-name">.MuiTooltip-tooltip</span> | Styles applied to the tooltip (label wrapper) element.
+| <span class="prop-name">touch</span> | <span class="prop-name">.MuiTooltip-touch</span> | Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch.
+| <span class="prop-name">tooltipPlacementLeft</span> | <span class="prop-name">.MuiTooltip-tooltipPlacementLeft</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "left".
+| <span class="prop-name">tooltipPlacementRight</span> | <span class="prop-name">.MuiTooltip-tooltipPlacementRight</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "right".
+| <span class="prop-name">tooltipPlacementTop</span> | <span class="prop-name">.MuiTooltip-tooltipPlacementTop</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "top".
+| <span class="prop-name">tooltipPlacementBottom</span> | <span class="prop-name">.MuiTooltip-tooltipPlacementBottom</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom".
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/tree-item.md b/docs/pages/api/tree-item.md
index 6fa019c437bd5a..55d17b667ad763 100644
--- a/docs/pages/api/tree-item.md
+++ b/docs/pages/api/tree-item.md
@@ -45,12 +45,12 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTreeItem-root</span> | Styles applied to the root element.
-| <span class="prop-name">expanded</span> | <span class="prop-name">Mui-expanded</span> | Pseudo-class applied to the root element when expanded.
-| <span class="prop-name">group</span> | <span class="prop-name">MuiTreeItem-group</span> | Styles applied to the `role="group"` element.
-| <span class="prop-name">content</span> | <span class="prop-name">MuiTreeItem-content</span> | Styles applied to the tree node content.
-| <span class="prop-name">iconContainer</span> | <span class="prop-name">MuiTreeItem-iconContainer</span> | Styles applied to the tree node icon and collapse/expand icon.
-| <span class="prop-name">label</span> | <span class="prop-name">MuiTreeItem-label</span> | Styles applied to the label element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTreeItem-root</span> | Styles applied to the root element.
+| <span class="prop-name">expanded</span> | <span class="prop-name">.Mui-expanded</span> | Pseudo-class applied to the root element when expanded.
+| <span class="prop-name">group</span> | <span class="prop-name">.MuiTreeItem-group</span> | Styles applied to the `role="group"` element.
+| <span class="prop-name">content</span> | <span class="prop-name">.MuiTreeItem-content</span> | Styles applied to the tree node content.
+| <span class="prop-name">iconContainer</span> | <span class="prop-name">.MuiTreeItem-iconContainer</span> | Styles applied to the tree node icon and collapse/expand icon.
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiTreeItem-label</span> | Styles applied to the label element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/tree-view.md b/docs/pages/api/tree-view.md
index 7558b743c006ff..9953f3a9867eb6 100644
--- a/docs/pages/api/tree-view.md
+++ b/docs/pages/api/tree-view.md
@@ -44,7 +44,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTreeView-root</span> | Styles applied to the root element.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTreeView-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/pages/api/typography.md b/docs/pages/api/typography.md
index 807c8c6e58832b..8aeb42161ac3a3 100644
--- a/docs/pages/api/typography.md
+++ b/docs/pages/api/typography.md
@@ -47,36 +47,36 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
-| <span class="prop-name">root</span> | <span class="prop-name">MuiTypography-root</span> | Styles applied to the root element.
-| <span class="prop-name">body2</span> | <span class="prop-name">MuiTypography-body2</span> | Styles applied to the root element if `variant="body2"`.
-| <span class="prop-name">body1</span> | <span class="prop-name">MuiTypography-body1</span> | Styles applied to the root element if `variant="body1"`.
-| <span class="prop-name">caption</span> | <span class="prop-name">MuiTypography-caption</span> | Styles applied to the root element if `variant="caption"`.
-| <span class="prop-name">button</span> | <span class="prop-name">MuiTypography-button</span> | Styles applied to the root element if `variant="button"`.
-| <span class="prop-name">h1</span> | <span class="prop-name">MuiTypography-h1</span> | Styles applied to the root element if `variant="h1"`.
-| <span class="prop-name">h2</span> | <span class="prop-name">MuiTypography-h2</span> | Styles applied to the root element if `variant="h2"`.
-| <span class="prop-name">h3</span> | <span class="prop-name">MuiTypography-h3</span> | Styles applied to the root element if `variant="h3"`.
-| <span class="prop-name">h4</span> | <span class="prop-name">MuiTypography-h4</span> | Styles applied to the root element if `variant="h4"`.
-| <span class="prop-name">h5</span> | <span class="prop-name">MuiTypography-h5</span> | Styles applied to the root element if `variant="h5"`.
-| <span class="prop-name">h6</span> | <span class="prop-name">MuiTypography-h6</span> | Styles applied to the root element if `variant="h6"`.
-| <span class="prop-name">subtitle1</span> | <span class="prop-name">MuiTypography-subtitle1</span> | Styles applied to the root element if `variant="subtitle1"`.
-| <span class="prop-name">subtitle2</span> | <span class="prop-name">MuiTypography-subtitle2</span> | Styles applied to the root element if `variant="subtitle2"`.
-| <span class="prop-name">overline</span> | <span class="prop-name">MuiTypography-overline</span> | Styles applied to the root element if `variant="overline"`.
-| <span class="prop-name">srOnly</span> | <span class="prop-name">MuiTypography-srOnly</span> | Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers.
-| <span class="prop-name">alignLeft</span> | <span class="prop-name">MuiTypography-alignLeft</span> | Styles applied to the root element if `align="left"`.
-| <span class="prop-name">alignCenter</span> | <span class="prop-name">MuiTypography-alignCenter</span> | Styles applied to the root element if `align="center"`.
-| <span class="prop-name">alignRight</span> | <span class="prop-name">MuiTypography-alignRight</span> | Styles applied to the root element if `align="right"`.
-| <span class="prop-name">alignJustify</span> | <span class="prop-name">MuiTypography-alignJustify</span> | Styles applied to the root element if `align="justify"`.
-| <span class="prop-name">noWrap</span> | <span class="prop-name">MuiTypography-noWrap</span> | Styles applied to the root element if `nowrap={true}`.
-| <span class="prop-name">gutterBottom</span> | <span class="prop-name">MuiTypography-gutterBottom</span> | Styles applied to the root element if `gutterBottom={true}`.
-| <span class="prop-name">paragraph</span> | <span class="prop-name">MuiTypography-paragraph</span> | Styles applied to the root element if `paragraph={true}`.
-| <span class="prop-name">colorInherit</span> | <span class="prop-name">MuiTypography-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">MuiTypography-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <span class="prop-name">colorSecondary</span> | <span class="prop-name">MuiTypography-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
-| <span class="prop-name">colorTextPrimary</span> | <span class="prop-name">MuiTypography-colorTextPrimary</span> | Styles applied to the root element if `color="textPrimary"`.
-| <span class="prop-name">colorTextSecondary</span> | <span class="prop-name">MuiTypography-colorTextSecondary</span> | Styles applied to the root element if `color="textSecondary"`.
-| <span class="prop-name">colorError</span> | <span class="prop-name">MuiTypography-colorError</span> | Styles applied to the root element if `color="error"`.
-| <span class="prop-name">displayInline</span> | <span class="prop-name">MuiTypography-displayInline</span> | Styles applied to the root element if `display="inline"`.
-| <span class="prop-name">displayBlock</span> | <span class="prop-name">MuiTypography-displayBlock</span> | Styles applied to the root element if `display="block"`.
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTypography-root</span> | Styles applied to the root element.
+| <span class="prop-name">body2</span> | <span class="prop-name">.MuiTypography-body2</span> | Styles applied to the root element if `variant="body2"`.
+| <span class="prop-name">body1</span> | <span class="prop-name">.MuiTypography-body1</span> | Styles applied to the root element if `variant="body1"`.
+| <span class="prop-name">caption</span> | <span class="prop-name">.MuiTypography-caption</span> | Styles applied to the root element if `variant="caption"`.
+| <span class="prop-name">button</span> | <span class="prop-name">.MuiTypography-button</span> | Styles applied to the root element if `variant="button"`.
+| <span class="prop-name">h1</span> | <span class="prop-name">.MuiTypography-h1</span> | Styles applied to the root element if `variant="h1"`.
+| <span class="prop-name">h2</span> | <span class="prop-name">.MuiTypography-h2</span> | Styles applied to the root element if `variant="h2"`.
+| <span class="prop-name">h3</span> | <span class="prop-name">.MuiTypography-h3</span> | Styles applied to the root element if `variant="h3"`.
+| <span class="prop-name">h4</span> | <span class="prop-name">.MuiTypography-h4</span> | Styles applied to the root element if `variant="h4"`.
+| <span class="prop-name">h5</span> | <span class="prop-name">.MuiTypography-h5</span> | Styles applied to the root element if `variant="h5"`.
+| <span class="prop-name">h6</span> | <span class="prop-name">.MuiTypography-h6</span> | Styles applied to the root element if `variant="h6"`.
+| <span class="prop-name">subtitle1</span> | <span class="prop-name">.MuiTypography-subtitle1</span> | Styles applied to the root element if `variant="subtitle1"`.
+| <span class="prop-name">subtitle2</span> | <span class="prop-name">.MuiTypography-subtitle2</span> | Styles applied to the root element if `variant="subtitle2"`.
+| <span class="prop-name">overline</span> | <span class="prop-name">.MuiTypography-overline</span> | Styles applied to the root element if `variant="overline"`.
+| <span class="prop-name">srOnly</span> | <span class="prop-name">.MuiTypography-srOnly</span> | Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers.
+| <span class="prop-name">alignLeft</span> | <span class="prop-name">.MuiTypography-alignLeft</span> | Styles applied to the root element if `align="left"`.
+| <span class="prop-name">alignCenter</span> | <span class="prop-name">.MuiTypography-alignCenter</span> | Styles applied to the root element if `align="center"`.
+| <span class="prop-name">alignRight</span> | <span class="prop-name">.MuiTypography-alignRight</span> | Styles applied to the root element if `align="right"`.
+| <span class="prop-name">alignJustify</span> | <span class="prop-name">.MuiTypography-alignJustify</span> | Styles applied to the root element if `align="justify"`.
+| <span class="prop-name">noWrap</span> | <span class="prop-name">.MuiTypography-noWrap</span> | Styles applied to the root element if `nowrap={true}`.
+| <span class="prop-name">gutterBottom</span> | <span class="prop-name">.MuiTypography-gutterBottom</span> | Styles applied to the root element if `gutterBottom={true}`.
+| <span class="prop-name">paragraph</span> | <span class="prop-name">.MuiTypography-paragraph</span> | Styles applied to the root element if `paragraph={true}`.
+| <span class="prop-name">colorInherit</span> | <span class="prop-name">.MuiTypography-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiTypography-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiTypography-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">colorTextPrimary</span> | <span class="prop-name">.MuiTypography-colorTextPrimary</span> | Styles applied to the root element if `color="textPrimary"`.
+| <span class="prop-name">colorTextSecondary</span> | <span class="prop-name">.MuiTypography-colorTextSecondary</span> | Styles applied to the root element if `color="textSecondary"`.
+| <span class="prop-name">colorError</span> | <span class="prop-name">.MuiTypography-colorError</span> | Styles applied to the root element if `color="error"`.
+| <span class="prop-name">displayInline</span> | <span class="prop-name">.MuiTypography-displayInline</span> | Styles applied to the root element if `display="inline"`.
+| <span class="prop-name">displayBlock</span> | <span class="prop-name">.MuiTypography-displayBlock</span> | Styles applied to the root element if `display="block"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js
index 26d25d0909be0c..b2fe747fd32650 100644
--- a/docs/src/modules/utils/generateMarkdown.js
+++ b/docs/src/modules/utils/generateMarkdown.js
@@ -340,7 +340,7 @@ function generateClasses(reactAPI) {
     text += reactAPI.styles.classes
       .map(
         styleRule =>
-          `| <span class="prop-name">${styleRule}</span> | <span class="prop-name">${
+          `| <span class="prop-name">${styleRule}</span> | <span class="prop-name">.${
             reactAPI.styles.globalClasses[styleRule]
           }</span> | ${
             reactAPI.styles.descriptions[styleRule]

From 16525cd6bb26ddf45726b2abdfa6f1e159092f6d Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 18:48:34 +0200
Subject: [PATCH 06/16] [docs] Fix facebook icon synonyms

---
 docs/src/pages/components/material-icons/synonyms.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/material-icons/synonyms.js b/docs/src/pages/components/material-icons/synonyms.js
index 61e73c5ab470d4..3d1a31b188a472 100644
--- a/docs/src/pages/components/material-icons/synonyms.js
+++ b/docs/src/pages/components/material-icons/synonyms.js
@@ -254,7 +254,7 @@ const synonyms = {
   ExposurePlus2: 'plus',
   Extension: 'extended item jigsaw piece puzzle shape',
   Face: 'avatar eyes human person profile thumbnail user',
-  FaceBook: 'brand logo social',
+  Facebook: 'brand logo social',
   FastFood: 'burger drink',
   FastForward: 'control music speed time video',
   FastRewind: 'control music speed time video',

From 261f901893ef2e55cb7966935c9b9e1ec2a61d13 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 19:10:26 +0200
Subject: [PATCH 07/16] [docs] Improve the Popper demos to be more selling

---
 .../pages/components/popper/MinimalPopper.js  | 24 ------
 .../pages/components/popper/MinimalPopper.tsx | 24 ------
 .../components/popper/NoTransitionPopper.js   | 37 ----------
 .../components/popper/NoTransitionPopper.tsx  | 39 ----------
 .../pages/components/popper/SimplePopper.js   | 24 ++----
 .../pages/components/popper/SimplePopper.tsx  | 24 ++----
 .../pages/components/popper/SpringPopper.js   | 63 ++++++++++++++++
 .../pages/components/popper/SpringPopper.tsx  | 73 +++++++++++++++++++
 .../components/popper/TransitionsPopper.js    | 40 ++++++++++
 .../components/popper/TransitionsPopper.tsx   | 42 +++++++++++
 docs/src/pages/components/popper/popper.md    | 24 ++++--
 11 files changed, 250 insertions(+), 164 deletions(-)
 delete mode 100644 docs/src/pages/components/popper/MinimalPopper.js
 delete mode 100644 docs/src/pages/components/popper/MinimalPopper.tsx
 delete mode 100644 docs/src/pages/components/popper/NoTransitionPopper.js
 delete mode 100644 docs/src/pages/components/popper/NoTransitionPopper.tsx
 create mode 100644 docs/src/pages/components/popper/SpringPopper.js
 create mode 100644 docs/src/pages/components/popper/SpringPopper.tsx
 create mode 100644 docs/src/pages/components/popper/TransitionsPopper.js
 create mode 100644 docs/src/pages/components/popper/TransitionsPopper.tsx

diff --git a/docs/src/pages/components/popper/MinimalPopper.js b/docs/src/pages/components/popper/MinimalPopper.js
deleted file mode 100644
index 3d36a9fb92d1fc..00000000000000
--- a/docs/src/pages/components/popper/MinimalPopper.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import Popper from '@material-ui/core/Popper';
-
-export default function MinimalPopper() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-
-  const handleClick = event => {
-    setAnchorEl(anchorEl ? null : event.currentTarget);
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? 'simple-popper' : undefined;
-
-  return (
-    <div>
-      <button aria-describedby={id} type="button" onClick={handleClick}>
-        Toggle Popper
-      </button>
-      <Popper id={id} open={open} anchorEl={anchorEl}>
-        <div>The content of the Popper.</div>
-      </Popper>
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/popper/MinimalPopper.tsx b/docs/src/pages/components/popper/MinimalPopper.tsx
deleted file mode 100644
index f8d6b1a940d2c6..00000000000000
--- a/docs/src/pages/components/popper/MinimalPopper.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import Popper from '@material-ui/core/Popper';
-
-export default function MinimalPopper() {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    setAnchorEl(anchorEl ? null : event.currentTarget);
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? 'simple-popper' : undefined;
-
-  return (
-    <div>
-      <button aria-describedby={id} type="button" onClick={handleClick}>
-        Toggle Popper
-      </button>
-      <Popper id={id} open={open} anchorEl={anchorEl}>
-        <div>The content of the Popper.</div>
-      </Popper>
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/popper/NoTransitionPopper.js b/docs/src/pages/components/popper/NoTransitionPopper.js
deleted file mode 100644
index cdc6d5aa0e6771..00000000000000
--- a/docs/src/pages/components/popper/NoTransitionPopper.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Popper from '@material-ui/core/Popper';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-
-const useStyles = makeStyles(theme => ({
-  typography: {
-    padding: theme.spacing(2),
-  },
-}));
-
-export default function NoTransitionPopper() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const classes = useStyles();
-
-  const handleClick = event => {
-    setAnchorEl(prev => (prev ? null : event.currentTarget));
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? 'no-transition-popper' : undefined;
-
-  return (
-    <div>
-      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
-        Toggle Popper
-      </Button>
-      <Popper id={id} open={open} anchorEl={anchorEl}>
-        <Paper>
-          <Typography className={classes.typography}>The content of the Popper.</Typography>
-        </Paper>
-      </Popper>
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/popper/NoTransitionPopper.tsx b/docs/src/pages/components/popper/NoTransitionPopper.tsx
deleted file mode 100644
index 3a8a21cc117ab4..00000000000000
--- a/docs/src/pages/components/popper/NoTransitionPopper.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-import Popper from '@material-ui/core/Popper';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    typography: {
-      padding: theme.spacing(2),
-    },
-  }),
-);
-
-export default function NoTransitionPopper() {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const classes = useStyles();
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    setAnchorEl(prev => (prev ? null : event.currentTarget));
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? 'no-transition-popper' : undefined;
-
-  return (
-    <div>
-      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
-        Toggle Popper
-      </Button>
-      <Popper id={id} open={open} anchorEl={anchorEl}>
-        <Paper>
-          <Typography className={classes.typography}>The content of the Popper.</Typography>
-        </Paper>
-      </Popper>
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/popper/SimplePopper.js b/docs/src/pages/components/popper/SimplePopper.js
index 4c6aa2994190da..e4e879b359206c 100644
--- a/docs/src/pages/components/popper/SimplePopper.js
+++ b/docs/src/pages/components/popper/SimplePopper.js
@@ -1,14 +1,12 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import Fade from '@material-ui/core/Fade';
-import Paper from '@material-ui/core/Paper';
 
 const useStyles = makeStyles(theme => ({
-  typography: {
-    padding: theme.spacing(2),
+  paper: {
+    border: '1px solid',
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.paper,
   },
 }));
 
@@ -25,17 +23,11 @@ export default function SimplePopper() {
 
   return (
     <div>
-      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
         Toggle Popper
-      </Button>
-      <Popper id={id} open={open} anchorEl={anchorEl} transition>
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={350}>
-            <Paper>
-              <Typography className={classes.typography}>The content of the Popper.</Typography>
-            </Paper>
-          </Fade>
-        )}
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div className={classes.paper}>The content of the Popper.</div>
       </Popper>
     </div>
   );
diff --git a/docs/src/pages/components/popper/SimplePopper.tsx b/docs/src/pages/components/popper/SimplePopper.tsx
index 5c6a445ea7dce3..b3cb9802472869 100644
--- a/docs/src/pages/components/popper/SimplePopper.tsx
+++ b/docs/src/pages/components/popper/SimplePopper.tsx
@@ -1,15 +1,13 @@
 import React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import Fade from '@material-ui/core/Fade';
-import Paper from '@material-ui/core/Paper';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    typography: {
-      padding: theme.spacing(2),
+    paper: {
+      border: '1px solid',
+      padding: theme.spacing(1),
+      backgroundColor: theme.palette.background.paper,
     },
   }),
 );
@@ -27,17 +25,11 @@ export default function SimplePopper() {
 
   return (
     <div>
-      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
         Toggle Popper
-      </Button>
-      <Popper id={id} open={open} anchorEl={anchorEl} transition>
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={350}>
-            <Paper>
-              <Typography className={classes.typography}>The content of the Popper.</Typography>
-            </Paper>
-          </Fade>
-        )}
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div className={classes.paper}>The content of the Popper.</div>
       </Popper>
     </div>
   );
diff --git a/docs/src/pages/components/popper/SpringPopper.js b/docs/src/pages/components/popper/SpringPopper.js
new file mode 100644
index 00000000000000..48de7b11ffbdf3
--- /dev/null
+++ b/docs/src/pages/components/popper/SpringPopper.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import { useSpring, animated } from 'react-spring';
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    border: '1px solid',
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.paper,
+  },
+}));
+
+const Fade = React.forwardRef(function Fade(props, ref) {
+  const { in: open, children, onEnter, onExited, ...other } = props;
+  const style = useSpring({
+    from: { opacity: 0 },
+    to: { opacity: open ? 1 : 0 },
+    onStart: () => {
+      if (open && onEnter) {
+        onEnter();
+      }
+    },
+    onRest: () => {
+      if (!open && onExited) {
+        onExited();
+      }
+    },
+  });
+
+  return (
+    <animated.div ref={ref} style={style} {...other}>
+      {children}
+    </animated.div>
+  );
+});
+
+export default function SpringPopper() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = event => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'spring-popper' : undefined;
+
+  return (
+    <div>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl} transition>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <div className={classes.paper}>The content of the Popper.</div>
+          </Fade>
+        )}
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/popper/SpringPopper.tsx b/docs/src/pages/components/popper/SpringPopper.tsx
new file mode 100644
index 00000000000000..c27e2efea76fff
--- /dev/null
+++ b/docs/src/pages/components/popper/SpringPopper.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import { useSpring, animated } from 'react-spring';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    paper: {
+      border: '1px solid',
+      padding: theme.spacing(1),
+      backgroundColor: theme.palette.background.paper,
+    },
+  }),
+);
+
+interface FadeProps {
+  children: React.ReactElement;
+  in: boolean;
+  onEnter?: () => {};
+  onExited?: () => {};
+}
+
+const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, ref) {
+  const { in: open, children, onEnter, onExited, ...other } = props;
+  const style = useSpring({
+    from: { opacity: 0 },
+    to: { opacity: open ? 1 : 0 },
+    onStart: () => {
+      if (open && onEnter) {
+        onEnter();
+      }
+    },
+    onRest: () => {
+      if (!open && onExited) {
+        onExited();
+      }
+    },
+  });
+
+  return (
+    <animated.div ref={ref} style={style} {...other}>
+      {children}
+    </animated.div>
+  );
+});
+
+
+export default function SpringPopper() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'spring-popper' : undefined;
+
+  return (
+    <div>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl} transition>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <div className={classes.paper}>The content of the Popper.</div>
+          </Fade>
+        )}
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/popper/TransitionsPopper.js b/docs/src/pages/components/popper/TransitionsPopper.js
new file mode 100644
index 00000000000000..4187a75d940349
--- /dev/null
+++ b/docs/src/pages/components/popper/TransitionsPopper.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+
+import Fade from '@material-ui/core/Fade';
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    border: '1px solid',
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.paper,
+  },
+}));
+
+export default function TransitionsPopper() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = event => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'transitions-popper' : undefined;
+
+  return (
+    <div>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl} transition>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <div className={classes.paper}>The content of the Popper.</div>
+          </Fade>
+        )}
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/popper/TransitionsPopper.tsx b/docs/src/pages/components/popper/TransitionsPopper.tsx
new file mode 100644
index 00000000000000..b7e5eea491899f
--- /dev/null
+++ b/docs/src/pages/components/popper/TransitionsPopper.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import Typography from '@material-ui/core/Typography';
+import Fade from '@material-ui/core/Fade';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    paper: {
+      border: '1px solid',
+      padding: theme.spacing(1),
+      backgroundColor: theme.palette.background.paper,
+    },
+  }),
+);
+
+export default function TransitionsPopper() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'transitions-popper' : undefined;
+
+  return (
+    <div>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl} transition>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <div className={classes.paper}>The content of the Popper.</div>
+          </Fade>
+        )}
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/popper/popper.md b/docs/src/pages/components/popper/popper.md
index 5558e3d15ac776..b1234a8d244181 100644
--- a/docs/src/pages/components/popper/popper.md
+++ b/docs/src/pages/components/popper/popper.md
@@ -11,7 +11,7 @@ Some important features of the `Popper` component:
 
 - 🕷 Popper relies on the 3rd party library ([Popper.js](https://github.com/FezVrasta/popper.js)) for perfect positioning.
 - 💄 It's an alternative API to react-popper. It aims for simplicity.
-- 📦 [10 kB gzipped](/size-snapshot) (7 kB from Popper.js).
+- 📦 [10 kB gzipped](/size-snapshot) ([7 kB](https://bundlephobia.com/result?p=popper.js) from Popper.js).
 - The children is [`Portal`](/components/portal/) to the body of the document to avoid rendering problems.
 You can disable this behavior with `disablePortal`.
 - The scroll isn't blocked like with the [`Popover`](/components/popover/) component.
@@ -24,23 +24,31 @@ The placement of the popper updates with the available area in the viewport.
 
 {{"demo": "pages/components/popper/SimplePopper.js"}}
 
-## Minimalist Popper
+## Transitions
 
-You can use the component with zero extra dependencies.
+The open/close state of the popper can be animated with a render prop child and a transition component.
+This component should respect the following conditions:
 
-{{"demo": "pages/components/popper/MinimalPopper.js"}}
+- Be a direct child descendent of the popper.
+- Call the `onEnter` callback prop when the enter transition starts.
+- Call the `onExited` callback prop when the exit transition is completed.
+These two callbacks allow the popper to unmount the child content when closed and fully transitioned.
 
-## Scroll playground
+Popper has built-in support for [react-transition-group](https://github.com/reactjs/react-transition-group).
 
-{{"demo": "pages/components/popper/ScrollPlayground.js", "hideHeader": true}}
+{{"demo": "pages/components/popper/TransitionsPopper.js"}}
+
+Alternatively, you can use [react-spring](https://github.com/react-spring/react-spring).
+
+{{"demo": "pages/components/popper/SpringPopper.js"}}
 
 ## Positioned Popper
 
 {{"demo": "pages/components/popper/PositionedPopper.js"}}
 
-## Without transition Popper
+## Scroll playground
 
-{{"demo": "pages/components/popper/NoTransitionPopper.js"}}
+{{"demo": "pages/components/popper/ScrollPlayground.js", "hideHeader": true}}
 
 ## Faked reference object
 

From a0a755ebd5c300e2038dcdf0fe416b84a93bfa52 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 19:14:44 +0200
Subject: [PATCH 08/16] [docs] Write down the imperative API benefit

This remembers me: https://dev.to/dmtrkovalenko/the-neatest-way-to-handle-alert-dialogs-in-react-1aoe
---
 docs/src/pages/components/snackbars/IntegrationNotistack.js | 4 ++--
 .../src/pages/components/snackbars/IntegrationNotistack.tsx | 4 ++--
 docs/src/pages/components/snackbars/snackbars.md            | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/src/pages/components/snackbars/IntegrationNotistack.js b/docs/src/pages/components/snackbars/IntegrationNotistack.js
index 10092d4681d30d..8723385bdf3898 100644
--- a/docs/src/pages/components/snackbars/IntegrationNotistack.js
+++ b/docs/src/pages/components/snackbars/IntegrationNotistack.js
@@ -11,13 +11,13 @@ function MyApp() {
 
   const handleClickVariant = variant => () => {
     // variant could be success, error, warning, info, or default
-    enqueueSnackbar('This is a warning message!', { variant });
+    enqueueSnackbar('This is a success message!', { variant });
   };
 
   return (
     <React.Fragment>
       <Button onClick={handleClick}>Show snackbar</Button>
-      <Button onClick={handleClickVariant('warning')}>Show warning snackbar</Button>
+      <Button onClick={handleClickVariant('success')}>Show success snackbar</Button>
     </React.Fragment>
   );
 }
diff --git a/docs/src/pages/components/snackbars/IntegrationNotistack.tsx b/docs/src/pages/components/snackbars/IntegrationNotistack.tsx
index ef2144a81eb7ca..e6f3b61bd62ccb 100644
--- a/docs/src/pages/components/snackbars/IntegrationNotistack.tsx
+++ b/docs/src/pages/components/snackbars/IntegrationNotistack.tsx
@@ -11,13 +11,13 @@ function MyApp() {
 
   const handleClickVariant = (variant: VariantType) => () => {
     // variant could be success, error, warning, info, or default
-    enqueueSnackbar('This is a warning message!', { variant });
+    enqueueSnackbar('This is a success message!', { variant });
   };
 
   return (
     <React.Fragment>
       <Button onClick={handleClick}>Show snackbar</Button>
-      <Button onClick={handleClickVariant('warning')}>Show warning snackbar</Button>
+      <Button onClick={handleClickVariant('success')}>Show success snackbar</Button>
     </React.Fragment>
   );
 }
diff --git a/docs/src/pages/components/snackbars/snackbars.md b/docs/src/pages/components/snackbars/snackbars.md
index 8e466a21551344..815d09496a878f 100644
--- a/docs/src/pages/components/snackbars/snackbars.md
+++ b/docs/src/pages/components/snackbars/snackbars.md
@@ -76,8 +76,8 @@ For more advanced use cases you might be able to take advantage of:
 ![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars)
 ![npm downloads](https://img.shields.io/npm/dm/notistack.svg)
 
-In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack).
-notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them).
-It also enables you to stack them on top of one another (although this is discouraged by the specification).
+We demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack).
+notistack has an **imperative API** that makes it easy to display toasts (so you don't have to deal with open/close state of them).
+It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification).
 
 {{"demo": "pages/components/snackbars/IntegrationNotistack.js"}}

From 081a82ebc7b7846a8afca8fbb5316f481ae2d913 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 19:48:28 +0200
Subject: [PATCH 09/16] [docs] Improve the Style Library Interoperability

---
 .../pages/components/modal/SpringModal.tsx    |   2 +-
 .../pages/components/popper/SpringPopper.js   |   2 +-
 .../pages/components/popper/SpringPopper.tsx  |   7 +-
 .../components/popper/TransitionsPopper.js    |   1 -
 .../components/popper/TransitionsPopper.tsx   |   1 -
 .../guides/interoperability/EmotionCSS.js     |   4 +
 .../guides/interoperability/EmotionCSS.tsx    |   4 +
 .../interoperability/StyledComponentsTheme.js |  24 ++--
 .../StyledComponentsTheme.tsx                 |  57 ++++++++
 .../interoperability/interoperability.md      | 128 +-----------------
 packages/material-ui/src/Popper/Popper.d.ts   |   6 +-
 11 files changed, 93 insertions(+), 143 deletions(-)
 create mode 100644 docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx

diff --git a/docs/src/pages/components/modal/SpringModal.tsx b/docs/src/pages/components/modal/SpringModal.tsx
index 20a83fd57b61c0..368d8f5462046b 100644
--- a/docs/src/pages/components/modal/SpringModal.tsx
+++ b/docs/src/pages/components/modal/SpringModal.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 interface FadeProps {
-  children: React.ReactElement;
+  children?: React.ReactElement;
   in: boolean;
   onEnter?: () => {};
   onExited?: () => {};
diff --git a/docs/src/pages/components/popper/SpringPopper.js b/docs/src/pages/components/popper/SpringPopper.js
index 48de7b11ffbdf3..0687ddad7f3955 100644
--- a/docs/src/pages/components/popper/SpringPopper.js
+++ b/docs/src/pages/components/popper/SpringPopper.js
@@ -53,7 +53,7 @@ export default function SpringPopper() {
       </button>
       <Popper id={id} open={open} anchorEl={anchorEl} transition>
         {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={350}>
+          <Fade {...TransitionProps}>
             <div className={classes.paper}>The content of the Popper.</div>
           </Fade>
         )}
diff --git a/docs/src/pages/components/popper/SpringPopper.tsx b/docs/src/pages/components/popper/SpringPopper.tsx
index c27e2efea76fff..2602b5c2c02ed6 100644
--- a/docs/src/pages/components/popper/SpringPopper.tsx
+++ b/docs/src/pages/components/popper/SpringPopper.tsx
@@ -14,8 +14,8 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 interface FadeProps {
-  children: React.ReactElement;
-  in: boolean;
+  children?: React.ReactElement;
+  in?: boolean;
   onEnter?: () => {};
   onExited?: () => {};
 }
@@ -44,7 +44,6 @@ const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, re
   );
 });
 
-
 export default function SpringPopper() {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -63,7 +62,7 @@ export default function SpringPopper() {
       </button>
       <Popper id={id} open={open} anchorEl={anchorEl} transition>
         {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={350}>
+          <Fade {...TransitionProps}>
             <div className={classes.paper}>The content of the Popper.</div>
           </Fade>
         )}
diff --git a/docs/src/pages/components/popper/TransitionsPopper.js b/docs/src/pages/components/popper/TransitionsPopper.js
index 4187a75d940349..e61a81bfc5c8b5 100644
--- a/docs/src/pages/components/popper/TransitionsPopper.js
+++ b/docs/src/pages/components/popper/TransitionsPopper.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
-
 import Fade from '@material-ui/core/Fade';
 
 const useStyles = makeStyles(theme => ({
diff --git a/docs/src/pages/components/popper/TransitionsPopper.tsx b/docs/src/pages/components/popper/TransitionsPopper.tsx
index b7e5eea491899f..781a313733028a 100644
--- a/docs/src/pages/components/popper/TransitionsPopper.tsx
+++ b/docs/src/pages/components/popper/TransitionsPopper.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
-import Typography from '@material-ui/core/Typography';
 import Fade from '@material-ui/core/Fade';
 
 const useStyles = makeStyles((theme: Theme) =>
diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js
index 569ffa12cac466..ee4cb9dae966db 100644
--- a/docs/src/pages/guides/interoperability/EmotionCSS.js
+++ b/docs/src/pages/guides/interoperability/EmotionCSS.js
@@ -15,6 +15,10 @@ export default function EmotionCSS() {
           height: 48px;
           padding: 0 30px;
           box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
+
+          & .MuiButton-label {
+            color: papayawhip;
+          }
         `}
       >
         Emotion
diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
index 569ffa12cac466..ee4cb9dae966db 100644
--- a/docs/src/pages/guides/interoperability/EmotionCSS.tsx
+++ b/docs/src/pages/guides/interoperability/EmotionCSS.tsx
@@ -15,6 +15,10 @@ export default function EmotionCSS() {
           height: 48px;
           padding: 0 30px;
           box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
+
+          & .MuiButton-label {
+            color: papayawhip;
+          }
         `}
       >
         Emotion
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
index b4a8f9fdf8ef0c..fa82cf57cb7f2b 100644
--- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
+++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js
@@ -6,15 +6,16 @@ import { createMuiTheme, darken, fade } from '@material-ui/core/styles';
 const defaultTheme = createMuiTheme();
 
 const StyledButton = styled.button`
+  ${({ theme }) => `
   padding: 8px 12px;
   border: 1px solid;
   cursor: pointer;
   outline: none;
-  border-radius: ${props => props.theme.shape.borderRadius}px;
-  color: ${props => props.theme.palette.primary.contrastText};
-  background-color: ${props => props.theme.palette.primary.main};
-  border-color: ${props => props.theme.palette.primary.main};
-  transition: ${props => props.theme.transitions.create(['background-color', 'box-shadow'])};
+  border-radius: ${theme.shape.borderRadius}px;
+  color: ${theme.palette.primary.contrastText};
+  background-color: ${theme.palette.primary.main};
+  border-color: ${theme.palette.primary.main};
+  transition: ${theme.transitions.create(['background-color', 'box-shadow'])};
   font-family: ${[
     '-apple-system',
     'BlinkMacSystemFont',
@@ -28,20 +29,21 @@ const StyledButton = styled.button`
     '"Segoe UI Symbol"',
   ].join(',')};
   &:hover {
-    background-color: ${props => darken(props.theme.palette.primary.main, 0.1)};
-    border-color: ${props => darken(props.theme.palette.primary.main, 0.2)};
+    background-color: ${darken(theme.palette.primary.main, 0.1)};
+    border-color: ${darken(theme.palette.primary.main, 0.2)};
   }
   &:active {
-    background-color: ${props => darken(props.theme.palette.primary.main, 0.2)};
-    border-color: ${props => darken(props.theme.palette.primary.main, 0.3)};
+    background-color: ${darken(theme.palette.primary.main, 0.2)};
+    border-color: ${darken(theme.palette.primary.main, 0.3)};
   }
   &:focus {
-    box-shadow: 0 0 0 0.2rem ${props => fade(props.theme.palette.primary.main, 0.5)};
+    box-shadow: 0 0 0 0.2rem ${fade(theme.palette.primary.main, 0.5)};
   }
   font-size: 18px;
-  ${props => props.theme.breakpoints.up('md')} {
+  ${theme.breakpoints.up('md')} {
     font-size: 16px;
   }
+  `}
 `;
 
 export default function StyledComponentsTheme() {
diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx
new file mode 100644
index 00000000000000..fa82cf57cb7f2b
--- /dev/null
+++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import NoSsr from '@material-ui/core/NoSsr';
+import { createMuiTheme, darken, fade } from '@material-ui/core/styles';
+
+const defaultTheme = createMuiTheme();
+
+const StyledButton = styled.button`
+  ${({ theme }) => `
+  padding: 8px 12px;
+  border: 1px solid;
+  cursor: pointer;
+  outline: none;
+  border-radius: ${theme.shape.borderRadius}px;
+  color: ${theme.palette.primary.contrastText};
+  background-color: ${theme.palette.primary.main};
+  border-color: ${theme.palette.primary.main};
+  transition: ${theme.transitions.create(['background-color', 'box-shadow'])};
+  font-family: ${[
+    '-apple-system',
+    'BlinkMacSystemFont',
+    '"Segoe UI"',
+    'Roboto',
+    '"Helvetica Neue"',
+    'Arial',
+    'sans-serif',
+    '"Apple Color Emoji"',
+    '"Segoe UI Emoji"',
+    '"Segoe UI Symbol"',
+  ].join(',')};
+  &:hover {
+    background-color: ${darken(theme.palette.primary.main, 0.1)};
+    border-color: ${darken(theme.palette.primary.main, 0.2)};
+  }
+  &:active {
+    background-color: ${darken(theme.palette.primary.main, 0.2)};
+    border-color: ${darken(theme.palette.primary.main, 0.3)};
+  }
+  &:focus {
+    box-shadow: 0 0 0 0.2rem ${fade(theme.palette.primary.main, 0.5)};
+  }
+  font-size: 18px;
+  ${theme.breakpoints.up('md')} {
+    font-size: 16px;
+  }
+  `}
+`;
+
+export default function StyledComponentsTheme() {
+  return (
+    <NoSsr>
+      <ThemeProvider theme={defaultTheme}>
+        <StyledButton>Styled Components</StyledButton>
+      </ThemeProvider>
+    </NoSsr>
+  );
+}
diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md
index 25368a31889b22..a5ddd3d15d9141 100644
--- a/docs/src/pages/guides/interoperability/interoperability.md
+++ b/docs/src/pages/guides/interoperability/interoperability.md
@@ -16,7 +16,7 @@ There are examples for the following styling solutions:
 
 ## Plain CSS
 
-Nothing fancy, just plain old CSS.
+Nothing fancy, plain old CSS.
 
 **PlainCssButton.css**
 ```css
@@ -93,32 +93,7 @@ export default function GlobalCssButton() {
 
 The `styled()` method works perfectly on all of the components.
 
-```jsx
-import React from 'react';
-import styled from 'styled-components';
-import Button from '@material-ui/core/Button';
-
-const StyledButton = styled(Button)`
-  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
-  border-radius: 3px;
-  border: 0;
-  color: white;
-  height: 48px;
-  padding: 0 30px;
-  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3);
-`;
-
-export default function StyledComponents() {
-  return (
-    <div>
-      <Button>Material-UI</Button>
-      <StyledButton>Styled Components</StyledButton>
-    </div>
-  );
-}
-```
-
-{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}}
+{{"demo": "pages/guides/interoperability/StyledComponents.js", "defaultCodeOpen": true}}
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv)
 
@@ -136,7 +111,7 @@ import { StylesProvider } from '@material-ui/core/styles';
 </StylesProvider>
 ```
 
-Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. You should avoid the usage of `!important`.
+Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. Avoid the usage of `!important`.
 
 ### Deeper elements
 
@@ -147,35 +122,7 @@ You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop
 
 The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component.
 
-```jsx
-import React from 'react';
-import styled from 'styled-components';
-import Button from '@material-ui/core/Button';
-
-const StyledButton = styled(({ color, ...other }) => <Button {...other} />)`
-  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
-  border: 0;
-  color: white;
-  height: 48px;
-  padding: 0 30px;
-  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
-
-  & .MuiButton-label {
-    color: ${props => props.color};
-  }
-`;
-
-export default function StyledComponentsDeep() {
-  return (
-    <div>
-      <Button>Material-UI</Button>
-      <StyledButton color="papayawhip">Styled Components</StyledButton>
-    </div>
-  );
-}
-```
-
-{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "hideHeader": true}}
+{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}}
 
 The above demo relies on the [default `classes` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.label`.
 
@@ -296,35 +243,7 @@ export default function CssModulesButton() {
 
 Emotion's **css()** method works seamlessly with Material-UI.
 
-```jsx
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core';
-import Button from '@material-ui/core/Button';
-
-// Just assign them the Button's className attribute
-export default function EmotionButton() {
-  return (
-    <div>
-      <Button>Material-UI</Button>
-      <Button
-        css={css`
-          background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
-          border-radius: 3px;
-          border: 0;
-          color: white;
-          height: 48px;
-          padding: 0 30px;
-          box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
-        `}
-      >
-        Emotion
-      </Button>
-    </div>
-  );
-}
-```
-
-{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}}
+{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}}
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j)
 
@@ -377,40 +296,3 @@ export default injectSheet(styles)(ReactJssButton);
 ```
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp)
-
-## Glamor
-
-![stars](https://img.shields.io/github/stars/threepointone/glamor.svg?style=social&label=Star)
-![npm](https://img.shields.io/npm/dm/glamor.svg?)
-
-A good way to apply styles with Glamor is using the **css()** function and then **classnames** to get them as strings:
-
-```jsx
-import React from 'react';
-import { css } from 'glamor';
-import Button from '@material-ui/core/Button';
-
-const buttonStyles = {
-  background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
-  borderRadius: 3,
-  border: 0,
-  color: "white",
-  height: 48,
-  padding: "0 30px",
-  boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .30)"
-};
-
-// Then we just assign them the Button's className attribute
-export default function GlamorButton() {
-  return (
-    <div>
-      <Button>Material-UI</Button>
-      <Button {...css(buttonStyles)}>Glamor</Button>
-    </div>
-  );
-}
-```
-
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vp2znmj40)
-
-**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](/styles/advanced/#css-injection-order), as in the demo.
diff --git a/packages/material-ui/src/Popper/Popper.d.ts b/packages/material-ui/src/Popper/Popper.d.ts
index 9e9429fb779080..1f7815ca15a828 100644
--- a/packages/material-ui/src/Popper/Popper.d.ts
+++ b/packages/material-ui/src/Popper/Popper.d.ts
@@ -23,7 +23,11 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
     | React.ReactNode
     | ((props: {
         placement: PopperPlacementType;
-        TransitionProps?: TransitionProps;
+        TransitionProps?: {
+          in: boolean;
+          onEnter: () => {};
+          onExited: () => {};
+        };
       }) => React.ReactNode);
   container?: PortalProps['container'];
   disablePortal?: PortalProps['disablePortal'];

From 6f6513f2052b378549b2e443fca815ba36425d52 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 20:10:34 +0200
Subject: [PATCH 10/16] [docs] Improve blog post wording

---
 docs/pages/blog/august-2019-update.md                       | 2 +-
 docs/pages/blog/september-2019-update.md                    | 6 +++---
 .../supported-components/supported-components.md            | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/pages/blog/august-2019-update.md b/docs/pages/blog/august-2019-update.md
index 4704566f14cd8e..68017a57ac3a57 100644
--- a/docs/pages/blog/august-2019-update.md
+++ b/docs/pages/blog/august-2019-update.md
@@ -37,7 +37,7 @@ But this summary is just scratching the surface. We have accepted 193 commits fr
 
 - 🔍 We will keep working on providing ready to use autocomplete, combo box, and multi-select components. We announced it last month but have made little progress so far due to focusing on fixing bugs in existing components. Let's make it happen!
 
-- ❓ Want something in specific? Please upvote our GitHub issues, the number of 👍 matters to us.
+- ❓ Do you want something in specific? Please upvote our GitHub issues, the number of 👍 matters to us.
 
 <hr />
 
diff --git a/docs/pages/blog/september-2019-update.md b/docs/pages/blog/september-2019-update.md
index 35ec374a2c930d..c34f7ca5bf2b80 100644
--- a/docs/pages/blog/september-2019-update.md
+++ b/docs/pages/blog/september-2019-update.md
@@ -22,7 +22,7 @@ Here are the most significant improvements in September:
   </Button>
   ```
 
-- 🔐 Add support for Chrome autofill. The `InputBase` component detects Chrome autofill events and update the label position accordingly.
+- 🔐 Add support for Chrome autofill. The `InputBase` component detects Chrome autofill events and updates the label position accordingly.
 
   ![Autofill](/static/blog/september-2019-update/autofill.png)
 
@@ -61,10 +61,10 @@ But this summary is just scratching the surface. We have accepted 199 commits fr
 
 - 📅 We will start to work on a [major upgrade](https://github.com/mui-org/material-ui-pickers/issues/1293) of the date/time picker components.
 
-- 🧮 We will work on providing ready to use Data Table component.
+- 🧮 We will start to work on a Data Table component.
 ⭐️ Notice that the advanced features of the data grid will be paid, behind an enterprise subscription. This is an effort part of [our roadmap](/discover-more/roadmap/) to answer enterprise needs.
 
-- ❓ Want something in specific? Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues), the number of 👍 matters to us.
+- ❓ Do you want something in specific? Please upvote our [GitHub issues](https://github.com/mui-org/material-ui/issues), the number of 👍 matters to us.
 
 <hr />
 
diff --git a/docs/src/pages/getting-started/supported-components/supported-components.md b/docs/src/pages/getting-started/supported-components/supported-components.md
index 4584f2824fa229..29752a955ed371 100644
--- a/docs/src/pages/getting-started/supported-components/supported-components.md
+++ b/docs/src/pages/getting-started/supported-components/supported-components.md
@@ -79,9 +79,9 @@ to discuss the approach before submitting a pull request.
   - **[Checkbox](https://material.io/design/components/selection-controls.html#checkboxes) ✓**
   - **[Radio button](https://material.io/design/components/selection-controls.html#radio-buttons) ✓**
   - **[Switch](https://material.io/design/components/selection-controls.html#switches) ✓**
-- **[Sliders](https://material.io/design/components/sliders.html) ~** ([Lab](/components/about-the-lab/))
+- **[Sliders](https://material.io/design/components/sliders.html) ✓**
   - **[Continuous](https://material.io/design/components/sliders.html#continuous-slider) ✓**
-  - **[Discrete](https://material.io/design/components/sliders.html#discrete-slider) ~**
+  - **[Discrete](https://material.io/design/components/sliders.html#discrete-slider) ✓**
 - **[Snackbars](https://material.io/design/components/snackbars.html) ✓** (*Legacy Material v1*)
 - **[Subheaders](https://material.io/archive/guidelines/components/subheaders.html) ✓** (*Legacy Material v1*)
   - **[List](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) ✓**

From e7e11c78c080890d850ec48172af5c03c65cef5d Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 20:12:03 +0200
Subject: [PATCH 11/16] [docs] Fix modal markdown indent

---
 docs/src/pages/components/modal/modal.md | 27 ++++++++++++------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/docs/src/pages/components/modal/modal.md b/docs/src/pages/components/modal/modal.md
index fc4986263c7a2f..f2c3b19c819b4c 100644
--- a/docs/src/pages/components/modal/modal.md
+++ b/docs/src/pages/components/modal/modal.md
@@ -68,18 +68,19 @@ In order to display the modal, you need to disable the portal feature with the `
 
 - Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Modal`.
 Additionally, you may give a description of your modal with the `aria-describedby="id..."` prop on the `Modal`.
-```jsx
-<Modal
-  aria-labelledby="modal-title"
-  aria-describedby="modal-description"
->
-  <h2 id="modal-title">
-    My Title
-  </h2>
-  <p id="modal-description">
-    My Description
-  </p>
-</Modal>
-```
+
+  ```jsx
+  <Modal
+    aria-labelledby="modal-title"
+    aria-describedby="modal-description"
+  >
+    <h2 id="modal-title">
+      My Title
+    </h2>
+    <p id="modal-description">
+      My Description
+    </p>
+  </Modal>
+  ```
 - The [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) can help you set the initial focus on the most relevant element, based on your modal content.
 - A modal window overlys on either the primary window or another modal window. Windows under a modal are **inert**. That is, users cannot interact with content outside an active modal window.

From 62744f12949d1b075449c373ab95b4b756d9ecb8 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 20:12:58 +0200
Subject: [PATCH 12/16] [core] Avoid deep imports

---
 docs/src/pages/components/snackbars/DirectionSnackbar.tsx   | 2 +-
 docs/src/pages/components/snackbars/TransitionsSnackbar.tsx | 2 +-
 docs/src/pages/components/tree-view/CustomizedTreeView.tsx  | 2 +-
 packages/material-ui-lab/src/TreeItem/TreeItem.d.ts         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/components/snackbars/DirectionSnackbar.tsx b/docs/src/pages/components/snackbars/DirectionSnackbar.tsx
index 095fe495036d40..5718a08c7ddd6f 100644
--- a/docs/src/pages/components/snackbars/DirectionSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/DirectionSnackbar.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
 import Slide from '@material-ui/core/Slide';
-import { TransitionProps } from '@material-ui/core/transitions/transition';
+import { TransitionProps } from '@material-ui/core/transitions';
 
 function TransitionLeft(props: TransitionProps) {
   return <Slide {...props} direction="left" />;
diff --git a/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx b/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx
index 2bdadfca19729a..b0eccfe76db659 100644
--- a/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx
@@ -4,7 +4,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 import Fade from '@material-ui/core/Fade';
 import Slide from '@material-ui/core/Slide';
 import Grow from '@material-ui/core/Grow';
-import { TransitionProps } from '@material-ui/core/transitions/transition';
+import { TransitionProps } from '@material-ui/core/transitions';
 
 function SlideTransition(props: TransitionProps) {
   return <Slide {...props} direction="up" />;
diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.tsx b/docs/src/pages/components/tree-view/CustomizedTreeView.tsx
index eb2c70b1befade..d4ed966af0ace3 100644
--- a/docs/src/pages/components/tree-view/CustomizedTreeView.tsx
+++ b/docs/src/pages/components/tree-view/CustomizedTreeView.tsx
@@ -5,7 +5,7 @@ import TreeView from '@material-ui/lab/TreeView';
 import TreeItem, { TreeItemProps } from '@material-ui/lab/TreeItem';
 import Collapse from '@material-ui/core/Collapse';
 import { useSpring, animated } from 'react-spring';
-import { TransitionProps } from '@material-ui/core/transitions/transition';
+import { TransitionProps } from '@material-ui/core/transitions';
 
 function MinusSquare(props: SvgIconProps) {
   return (
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts b/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts
index 0e596df3e9b525..96a38e574f8e70 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StandardProps } from '@material-ui/core';
-import { TransitionProps } from '@material-ui/core/transitions/transition';
+import { TransitionProps } from '@material-ui/core/transitions';
 
 export interface TreeItemProps
   extends StandardProps<React.HTMLAttributes<HTMLLIElement>, TreeItemClassKey> {

From 5164d437a50c3dcc0b375cbe901dc794098af93d Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 20:19:29 +0200
Subject: [PATCH 13/16] [TreeView] Yes, it's accessible :)

---
 docs/src/pages/components/tree-view/tree-view.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
index b7af1f2f4dd973..2dede8975c07c1 100644
--- a/docs/src/pages/components/tree-view/tree-view.md
+++ b/docs/src/pages/components/tree-view/tree-view.md
@@ -20,3 +20,9 @@ Tree views can be used to represent a file system navigator displaying folders a
 ### Gmail clone
 
 {{"demo": "pages/components/tree-view/GmailTreeView.js"}}
+
+## Accessibility
+
+(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#TreeView)
+
+The component's accessibility is compelete and built-in, no assistance is required.

From 6e6eff19aec1ae72e30bfe6a56300af9989842f0 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 20:22:02 +0200
Subject: [PATCH 14/16] [docs] Add chidren when supported

---
 docs/pages/api/card-content.md                                | 1 +
 docs/pages/api/card.md                                        | 1 +
 docs/pages/api/swipeable-drawer.md                            | 1 +
 .../material-ui-styles/src/ThemeProvider/ThemeProvider.js     | 2 +-
 packages/material-ui/src/Card/Card.js                         | 4 ++++
 packages/material-ui/src/CardContent/CardContent.js           | 4 ++++
 packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js   | 4 ++++
 7 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/docs/pages/api/card-content.md b/docs/pages/api/card-content.md
index 3e00fb68315ccd..0078c5f9ede1ed 100644
--- a/docs/pages/api/card-content.md
+++ b/docs/pages/api/card-content.md
@@ -24,6 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 
diff --git a/docs/pages/api/card.md b/docs/pages/api/card.md
index 7d9173eff239b3..4f6f56ce0138c9 100644
--- a/docs/pages/api/card.md
+++ b/docs/pages/api/card.md
@@ -24,6 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">raised</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the card will use raised styling. |
 
diff --git a/docs/pages/api/swipeable-drawer.md b/docs/pages/api/swipeable-drawer.md
index bececbac6381a3..881038ed5cfe79 100644
--- a/docs/pages/api/swipeable-drawer.md
+++ b/docs/pages/api/swipeable-drawer.md
@@ -24,6 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">disableBackdropTransition</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Disable the backdrop transition. This can improve the FPS on low-end devices. |
 | <span class="prop-name">disableDiscovery</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture. |
 | <span class="prop-name">disableSwipeToOpen</span> | <span class="prop-type">bool</span> | <span class="prop-default">typeof navigator !== 'undefined' && /iPad\|iPhone\|iPod/.test(navigator.userAgent)</span> | If `true`, swipe to open is disabled. This is useful in browsers where swiping triggers navigation actions. Swipe to open is disabled on iOS browsers by default. |
diff --git a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js
index d1638b3e897ed3..44a3d1a1fc2ccc 100644
--- a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js
+++ b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js
@@ -66,7 +66,7 @@ function ThemeProvider(props) {
 
 ThemeProvider.propTypes = {
   /**
-   * Your component tree
+   * Your component tree.
    */
   children: PropTypes.node.isRequired,
   /**
diff --git a/packages/material-ui/src/Card/Card.js b/packages/material-ui/src/Card/Card.js
index 15552f69a726ed..dd15d21827da51 100644
--- a/packages/material-ui/src/Card/Card.js
+++ b/packages/material-ui/src/Card/Card.js
@@ -25,6 +25,10 @@ const Card = React.forwardRef(function Card(props, ref) {
 });
 
 Card.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
diff --git a/packages/material-ui/src/CardContent/CardContent.js b/packages/material-ui/src/CardContent/CardContent.js
index 1af26a5d3d0d67..c1fca115e45dac 100644
--- a/packages/material-ui/src/CardContent/CardContent.js
+++ b/packages/material-ui/src/CardContent/CardContent.js
@@ -20,6 +20,10 @@ const CardContent = React.forwardRef(function CardContent(props, ref) {
 });
 
 CardContent.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
index de109f94c286ad..862aaf47e8e6a6 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
@@ -438,6 +438,10 @@ SwipeableDrawer.propTypes = {
    * @ignore
    */
   anchor: PropTypes.oneOf(['left', 'top', 'right', 'bottom']),
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
   /**
    * Disable the backdrop transition.
    * This can improve the FPS on low-end devices.

From 0e2f51f8fa1127218ee5edb83fb56202a8bc88c7 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 16 Oct 2019 20:39:15 +0200
Subject: [PATCH 15/16] review

---
 docs/src/pages/components/popper/SpringPopper.js  | 1 +
 docs/src/pages/components/popper/SpringPopper.tsx | 1 +
 docs/src/pages/components/tree-view/tree-view.md  | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/popper/SpringPopper.js b/docs/src/pages/components/popper/SpringPopper.js
index 0687ddad7f3955..bcd94c6756fea4 100644
--- a/docs/src/pages/components/popper/SpringPopper.js
+++ b/docs/src/pages/components/popper/SpringPopper.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
diff --git a/docs/src/pages/components/popper/SpringPopper.tsx b/docs/src/pages/components/popper/SpringPopper.tsx
index 2602b5c2c02ed6..985de853278e36 100644
--- a/docs/src/pages/components/popper/SpringPopper.tsx
+++ b/docs/src/pages/components/popper/SpringPopper.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
index 2dede8975c07c1..510a7d3a9437e0 100644
--- a/docs/src/pages/components/tree-view/tree-view.md
+++ b/docs/src/pages/components/tree-view/tree-view.md
@@ -25,4 +25,4 @@ Tree views can be used to represent a file system navigator displaying folders a
 
 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#TreeView)
 
-The component's accessibility is compelete and built-in, no assistance is required.
+The component's accessibility is complete, no assistance is required.

From 133e635471c6e7604d08fedb7970c7fda7701d6b Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 17 Oct 2019 14:07:06 +0200
Subject: [PATCH 16/16] [TreeView] Simpler description

---
 docs/src/pages/components/tree-view/tree-view.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
index 510a7d3a9437e0..63a7c5a59dcc8e 100644
--- a/docs/src/pages/components/tree-view/tree-view.md
+++ b/docs/src/pages/components/tree-view/tree-view.md
@@ -25,4 +25,4 @@ Tree views can be used to represent a file system navigator displaying folders a
 
 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#TreeView)
 
-The component's accessibility is complete, no assistance is required.
+The component follows the WAI-ARIA best practices.