diff --git a/docs/public/static/styles/prism-okaidia.css b/docs/public/static/styles/prism-okaidia.css
index 0f7f8fc89fc2f0..b424419aeb65fe 100644
--- a/docs/public/static/styles/prism-okaidia.css
+++ b/docs/public/static/styles/prism-okaidia.css
@@ -8,12 +8,12 @@
 
 /* inline code */
 code {
-  padding: .1em;
-  border-radius: .3em;
+  padding: 0.1em;
+  border-radius: 0.3em;
   white-space: normal;
 }
 
-code[class*="language-"] {
+code[class*='language-'] {
   color: #f8f8f2;
   background: none;
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
@@ -48,7 +48,7 @@ code[class*="language-"] {
 }
 
 .namespace {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .token.property,
@@ -112,7 +112,7 @@ code[class*="language-"] {
 
 /* Overrides to reach AA, copied from https://reactjs.org */
 
-code[class*="language-"] {
+code[class*='language-'] {
   text-shadow: none;
 }
 
diff --git a/examples/cdn/index.html b/examples/cdn/index.html
index ef5fcf36f859f4..e6705ed36574aa 100644
--- a/examples/cdn/index.html
+++ b/examples/cdn/index.html
@@ -4,101 +4,111 @@
     <title>My page</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="initial-scale=1, width=device-width" />
-    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
+    <script
+      src="https://unpkg.com/react@latest/umd/react.development.js"
+      crossorigin="anonymous"
+    ></script>
     <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
-    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
-    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
+    <script
+      src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://unpkg.com/babel-standalone@latest/babel.min.js"
+      crossorigin="anonymous"
+    ></script>
     <!-- Fonts to support Material Design -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
     <!-- Icons to support Material Design -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   </head>
   <body>
     <div id="root"></div>
     <script type="text/babel">
-const {
-  colors,
-  CssBaseline,
-  ThemeProvider,
-  Typography,
-  Container,
-  createTheme,
-  Box,
-  SvgIcon,
-  Link,
-} = MaterialUI;
+      const {
+        colors,
+        CssBaseline,
+        ThemeProvider,
+        Typography,
+        Container,
+        createTheme,
+        Box,
+        SvgIcon,
+        Link,
+      } = MaterialUI;
 
-// Create a theme instance.
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#556cd6',
-    },
-    secondary: {
-      main: '#19857b',
-    },
-    error: {
-      main: colors.red.A400,
-    },
-  },
-});
+      // Create a theme instance.
+      const theme = createTheme({
+        palette: {
+          primary: {
+            main: '#556cd6',
+          },
+          secondary: {
+            main: '#19857b',
+          },
+          error: {
+            main: colors.red.A400,
+          },
+        },
+      });
 
-function LightBulbIcon(props) {
-  return (
-    <SvgIcon {...props}>
-      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
-    </SvgIcon>
-  );
-}
+      function LightBulbIcon(props) {
+        return (
+          <SvgIcon {...props}>
+            <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+          </SvgIcon>
+        );
+      }
 
-function ProTip() {
-  return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
-      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'top' }} />
-      Pro tip: See more{' '}
-      <Link href="https://mui.com/getting-started/templates/">
-        templates
-      </Link>{' '}
-      on the MUI documentation.
-    </Typography>
-  );
-}
+      function ProTip() {
+        return (
+          <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+            <LightBulbIcon sx={{ mr: 1, verticalAlign: 'top' }} />
+            Pro tip: See more{' '}
+            <Link href="https://mui.com/getting-started/templates/">templates</Link> on the MUI
+            documentation.
+          </Typography>
+        );
+      }
 
-function Copyright() {
-  return (
-    <Typography variant="body2" color="text.secondary" align="center">
-      {'Copyright © '}
-      <Link color="inherit" href="https://mui.com/">
-        Your Website
-      </Link>{' '}
-      {new Date().getFullYear()}
-      {'.'}
-    </Typography>
-  );
-}
+      function Copyright() {
+        return (
+          <Typography variant="body2" color="text.secondary" align="center">
+            {'Copyright © '}
+            <Link color="inherit" href="https://mui.com/">
+              Your Website
+            </Link>{' '}
+            {new Date().getFullYear()}
+            {'.'}
+          </Typography>
+        );
+      }
 
-function App() {
-  return (
-    <Container maxWidth="sm">
-      <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
-          CDN example
-        </Typography>
-        <ProTip />
-        <Copyright />
-      </Box>
-    </Container>
-  );
-}
+      function App() {
+        return (
+          <Container maxWidth="sm">
+            <Box sx={{ my: 4 }}>
+              <Typography variant="h4" component="h1" gutterBottom>
+                CDN example
+              </Typography>
+              <ProTip />
+              <Copyright />
+            </Box>
+          </Container>
+        );
+      }
 
-ReactDOM.render(
-    <ThemeProvider theme={theme}>
-      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-      <CssBaseline />
-      <App />
-    </ThemeProvider>,
-  document.querySelector('#root'),
-);
+      ReactDOM.render(
+        <ThemeProvider theme={theme}>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          <App />
+        </ThemeProvider>,
+        document.querySelector('#root'),
+      );
     </script>
   </body>
 </html>
diff --git a/examples/create-react-app-with-styled-components-typescript/public/index.html b/examples/create-react-app-with-styled-components-typescript/public/index.html
index b24f666be69e68..6b638043d3858f 100644
--- a/examples/create-react-app-with-styled-components-typescript/public/index.html
+++ b/examples/create-react-app-with-styled-components-typescript/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -26,7 +23,10 @@
     -->
     <title>React App</title>
     <!-- Fonts to support Material Design -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/examples/create-react-app-with-styled-components/public/index.html b/examples/create-react-app-with-styled-components/public/index.html
index b24f666be69e68..6b638043d3858f 100644
--- a/examples/create-react-app-with-styled-components/public/index.html
+++ b/examples/create-react-app-with-styled-components/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -26,7 +23,10 @@
     -->
     <title>React App</title>
     <!-- Fonts to support Material Design -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/examples/create-react-app-with-typescript/public/index.html b/examples/create-react-app-with-typescript/public/index.html
index e683d01321c956..75d69f331c441c 100644
--- a/examples/create-react-app-with-typescript/public/index.html
+++ b/examples/create-react-app-with-typescript/public/index.html
@@ -21,7 +21,10 @@
     -->
     <title>My page</title>
     <!-- Fonts to support Material Design -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/examples/create-react-app/public/index.html b/examples/create-react-app/public/index.html
index 1ffa44f4986b1d..75d69f331c441c 100644
--- a/examples/create-react-app/public/index.html
+++ b/examples/create-react-app/public/index.html
@@ -9,7 +9,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -21,7 +21,10 @@
     -->
     <title>My page</title>
     <!-- Fonts to support Material Design -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/examples/joy-cra-typescript/public/index.html b/examples/joy-cra-typescript/public/index.html
index e683d01321c956..75d69f331c441c 100644
--- a/examples/joy-cra-typescript/public/index.html
+++ b/examples/joy-cra-typescript/public/index.html
@@ -21,7 +21,10 @@
     -->
     <title>My page</title>
     <!-- Fonts to support Material Design -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/examples/preact/public/index.html b/examples/preact/public/index.html
index b24f666be69e68..6b638043d3858f 100644
--- a/examples/preact/public/index.html
+++ b/examples/preact/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -26,7 +23,10 @@
     -->
     <title>React App</title>
     <!-- Fonts to support Material Design -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/examples/tailwind-css/public/index.html b/examples/tailwind-css/public/index.html
index aa069f27cbd9d5..6a9f8c26bb7b9c 100644
--- a/examples/tailwind-css/public/index.html
+++ b/examples/tailwind-css/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/examples/tailwind-css/src/index.css b/examples/tailwind-css/src/index.css
index 5b0ba61d4d9909..7c05d4ddc469a3 100644
--- a/examples/tailwind-css/src/index.css
+++ b/examples/tailwind-css/src/index.css
@@ -1,2 +1,2 @@
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/examples/vitejs/src/App.jsx b/examples/vitejs/src/App.jsx
index 2a759169a51a28..411caed4212aca 100644
--- a/examples/vitejs/src/App.jsx
+++ b/examples/vitejs/src/App.jsx
@@ -17,4 +17,4 @@ export default function App() {
       </Box>
     </Container>
   );
-}
\ No newline at end of file
+}
diff --git a/examples/vitejs/src/Copyright.jsx b/examples/vitejs/src/Copyright.jsx
index 26c3add29913d8..0608d82d552ef1 100644
--- a/examples/vitejs/src/Copyright.jsx
+++ b/examples/vitejs/src/Copyright.jsx
@@ -12,4 +12,4 @@ export default function Copyright() {
       {new Date().getFullYear()}.
     </Typography>
   );
-}
\ No newline at end of file
+}
diff --git a/examples/vitejs/src/ProTip.jsx b/examples/vitejs/src/ProTip.jsx
index 4df16750790ac4..6d81f33b0a0dad 100644
--- a/examples/vitejs/src/ProTip.jsx
+++ b/examples/vitejs/src/ProTip.jsx
@@ -19,4 +19,4 @@ export default function ProTip() {
       the MUI documentation.
     </Typography>
   );
-}
\ No newline at end of file
+}
diff --git a/examples/vitejs/src/main.jsx b/examples/vitejs/src/main.jsx
index 6a4cc9c3f4a4f8..9e835c644e6a14 100644
--- a/examples/vitejs/src/main.jsx
+++ b/examples/vitejs/src/main.jsx
@@ -11,7 +11,8 @@ ReactDOM.render(
       {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
       <CssBaseline />
       <App />
-    </ThemeProvider>,
+    </ThemeProvider>
+    ,
   </React.StrictMode>,
-  document.getElementById('root')
-)
+  document.getElementById('root'),
+);
diff --git a/scripts/prettier.js b/scripts/prettier.js
index 290ae5d310750f..f388ea18fe71ac 100644
--- a/scripts/prettier.js
+++ b/scripts/prettier.js
@@ -48,7 +48,7 @@ function runPrettier(options) {
     });
 
   const files = glob
-    .sync('**/*.{js,md,tsx,ts,json}', {
+    .sync('**/*.{js,jsx,md,tsx,ts,json,html,css,prisma}', {
       cwd: workspaceRoot,
       gitignore: true,
       ignore: [
diff --git a/test/regressions/template.html b/test/regressions/template.html
index aff7074a6421d4..6b405996782fd8 100644
--- a/test/regressions/template.html
+++ b/test/regressions/template.html
@@ -1,20 +1,18 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <title>Visual regression tests</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+    <style>
+      body {
+        background-color: white;
+      }
+    </style>
+  </head>
 
-<head>
-  <title>Visual regression tests</title>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
-  <style>
-    body {
-      background-color: white;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="test-viewer"></div>
-  <div id="react-root"></div>
-</body>
-
+  <body>
+    <div id="test-viewer"></div>
+    <div id="react-root"></div>
+  </body>
 </html>
