diff --git a/.eslintrc.js b/.eslintrc.js
index 3c8f3dccaadd85..cc9dc0004bc6b3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -119,6 +119,7 @@ module.exports = {
     'material-ui/docgen-ignore-before-comment': 'error',
     'material-ui/rules-of-use-theme-variants': 'error',
     'material-ui/no-empty-box': 'error',
+    'material-ui/straight-quotes': 'error',
 
     'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
     'react-hooks/rules-of-hooks': 'error',
diff --git a/crowdin.yml b/crowdin.yml
index ba7bae59fc4623..674e004717e187 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -10,7 +10,7 @@ files:
       - /docs/src/pages/discover-more/backers/*
       - /docs/src/pages/discover-more/roadmap/*
       - /docs/src/pages/company/**/*
-      - /docs/src/pages/careers/**/*
+      - /docs/pages/careers/**/*
     translation: /%original_path%/%file_name%-%two_letters_code%.%file_extension%
   - source: /docs/data/**/*.md
     ignore:
diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js
index e1e51637bc1a42..e2876a32355570 100644
--- a/docs/data/joy/components/card/CardUsage.js
+++ b/docs/data/joy/components/card/CardUsage.js
@@ -63,7 +63,7 @@ export default function CardUsage() {
               Yosemite - Your Next Adventure
             </Typography>
             <Typography>
-              Yosemite National Park is in California’s Sierra Nevada mountains.
+              {"Yosemite National Park is in California's Sierra Nevada mountains."}
             </Typography>
             <CardActions>
               <Button variant="outlined" size="sm">
diff --git a/docs/data/joy/getting-started/templates/messages/data.tsx b/docs/data/joy/getting-started/templates/messages/data.tsx
index cb804a68abc8a3..6554473ed42b0a 100644
--- a/docs/data/joy/getting-started/templates/messages/data.tsx
+++ b/docs/data/joy/getting-started/templates/messages/data.tsx
@@ -83,14 +83,14 @@ export const chats: ChatProps[] = [
       {
         id: '6',
         content:
-          'Thanks Olivia! Almost there. I’ll work on making those changes you suggested and will shoot it over.',
+          "Thanks Olivia! Almost there. I'll work on making those changes you suggested and will shoot it over.",
         timestamp: 'Thursday 10:16am',
         sender: users[0],
       },
       {
         id: '7',
         content:
-          'Hey Olivia, I’ve finished with the requirements doc! I made some notes in the gdoc as well for Phoenix to look over.',
+          "Hey Olivia, I've finished with the requirements doc! I made some notes in the gdoc as well for Phoenix to look over.",
         timestamp: 'Thursday 11:40am',
         sender: users[0],
       },
@@ -109,13 +109,13 @@ export const chats: ChatProps[] = [
         id: '8',
         timestamp: 'Thursday 11:41am',
         sender: 'You',
-        content: 'Awesome! Thanks. I’ll look at this today.',
+        content: "Awesome! Thanks. I'll look at this today.",
       },
       {
         id: '9',
         timestamp: 'Thursday 11:44am',
         sender: users[0],
-        content: 'No rush though — we still have to wait for Lana’s designs.',
+        content: "No rush though — we still have to wait for Lana's designs.",
       },
       {
         id: '10',
@@ -127,7 +127,7 @@ export const chats: ChatProps[] = [
         id: '11',
         timestamp: 'Just now',
         sender: 'You',
-        content: 'Sure thing, I’ll have a look today. They’re looking great!',
+        content: "Sure thing, I'll have a look today. They're looking great!",
       },
     ],
   },
@@ -262,7 +262,7 @@ export const chats: ChatProps[] = [
       {
         id: '1',
         content:
-          'Hey Olivia, I’ve finished with the requirements doc! I made some notes in the gdoc as well for Phoenix to look over.',
+          "Hey Olivia, I've finished with the requirements doc! I made some notes in the gdoc as well for Phoenix to look over.",
         timestamp: '5 mins ago',
         sender: users[6],
         unread: true,
diff --git a/docs/nextConfigDocsInfra.js b/docs/nextConfigDocsInfra.js
index 638c5cc8cd9c34..d9c6a75a56cd17 100644
--- a/docs/nextConfigDocsInfra.js
+++ b/docs/nextConfigDocsInfra.js
@@ -46,7 +46,7 @@ function withDocsInfra(nextConfig) {
       DEPLOY_ENV,
       ...nextConfig.env,
       // https://docs.netlify.com/configure-builds/environment-variables/#git-metadata
-      // reference ID (also known as “SHA” or “hash”) of the commit we’re building.
+      // reference ID (also known as "SHA" or "hash") of the commit we're building.
       COMMIT_REF: process.env.COMMIT_REF,
       // ID of the PR and the Deploy Preview it generated (for example, 1211)
       PULL_REQUEST_ID: process.env.REVIEW_ID,
diff --git a/docs/src/pages/careers/ROLE_TEMPLATE.md b/docs/pages/careers/ROLE_TEMPLATE.md
similarity index 100%
rename from docs/src/pages/careers/ROLE_TEMPLATE.md
rename to docs/pages/careers/ROLE_TEMPLATE.md
diff --git a/docs/pages/careers/accessibility-engineer.js b/docs/pages/careers/accessibility-engineer.js
index b4ec05c05e77cd..db74ff196346d9 100644
--- a/docs/pages/careers/accessibility-engineer.js
+++ b/docs/pages/careers/accessibility-engineer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/accessibility-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/accessibility-engineer.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/accessibility-engineer.md b/docs/pages/careers/accessibility-engineer.md
similarity index 100%
rename from docs/src/pages/careers/accessibility-engineer.md
rename to docs/pages/careers/accessibility-engineer.md
diff --git a/docs/pages/careers/design-engineer.js b/docs/pages/careers/design-engineer.js
index db22cd9d44666d..647ef01f12b217 100644
--- a/docs/pages/careers/design-engineer.js
+++ b/docs/pages/careers/design-engineer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/design-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/design-engineer.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/design-engineer.md b/docs/pages/careers/design-engineer.md
similarity index 100%
rename from docs/src/pages/careers/design-engineer.md
rename to docs/pages/careers/design-engineer.md
diff --git a/docs/src/pages/careers/designer.md b/docs/pages/careers/designer.md
similarity index 100%
rename from docs/src/pages/careers/designer.md
rename to docs/pages/careers/designer.md
diff --git a/docs/src/pages/careers/developer-advocate.md b/docs/pages/careers/developer-advocate.md
similarity index 100%
rename from docs/src/pages/careers/developer-advocate.md
rename to docs/pages/careers/developer-advocate.md
diff --git a/docs/src/pages/careers/developer-experience-engineer.md b/docs/pages/careers/developer-experience-engineer.md
similarity index 100%
rename from docs/src/pages/careers/developer-experience-engineer.md
rename to docs/pages/careers/developer-experience-engineer.md
diff --git a/docs/src/pages/careers/engineering-manager.md b/docs/pages/careers/engineering-manager.md
similarity index 100%
rename from docs/src/pages/careers/engineering-manager.md
rename to docs/pages/careers/engineering-manager.md
diff --git a/docs/src/pages/careers/full-stack-engineer.md b/docs/pages/careers/full-stack-engineer.md
similarity index 100%
rename from docs/src/pages/careers/full-stack-engineer.md
rename to docs/pages/careers/full-stack-engineer.md
diff --git a/docs/pages/careers/fullstack-engineer.js b/docs/pages/careers/fullstack-engineer.js
index 7da02043c3396b..793263bda19e71 100644
--- a/docs/pages/careers/fullstack-engineer.js
+++ b/docs/pages/careers/fullstack-engineer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/full-stack-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/full-stack-engineer.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/head-of-operations.md b/docs/pages/careers/head-of-operations.md
similarity index 100%
rename from docs/src/pages/careers/head-of-operations.md
rename to docs/pages/careers/head-of-operations.md
diff --git a/docs/src/pages/careers/people-operation-manager.md b/docs/pages/careers/people-operation-manager.md
similarity index 100%
rename from docs/src/pages/careers/people-operation-manager.md
rename to docs/pages/careers/people-operation-manager.md
diff --git a/docs/pages/careers/product-engineer.js b/docs/pages/careers/product-engineer.js
index 744b695cdfd94a..0917c84b5a7f35 100644
--- a/docs/pages/careers/product-engineer.js
+++ b/docs/pages/careers/product-engineer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/product-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/product-engineer.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/product-engineer.md b/docs/pages/careers/product-engineer.md
similarity index 100%
rename from docs/src/pages/careers/product-engineer.md
rename to docs/pages/careers/product-engineer.md
diff --git a/docs/src/pages/careers/product-manager.md b/docs/pages/careers/product-manager.md
similarity index 100%
rename from docs/src/pages/careers/product-manager.md
rename to docs/pages/careers/product-manager.md
diff --git a/docs/pages/careers/product-marketing-manager.js b/docs/pages/careers/product-marketing-manager.js
index 082bcdbcee2c81..86bb53bcfd3d39 100644
--- a/docs/pages/careers/product-marketing-manager.js
+++ b/docs/pages/careers/product-marketing-manager.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/product-marketing-manager.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/product-marketing-manager.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/product-marketing-manager.md b/docs/pages/careers/product-marketing-manager.md
similarity index 100%
rename from docs/src/pages/careers/product-marketing-manager.md
rename to docs/pages/careers/product-marketing-manager.md
diff --git a/docs/pages/careers/react-community-engineer.js b/docs/pages/careers/react-community-engineer.js
index 7fbfea37d40723..32c0c8bf319d22 100644
--- a/docs/pages/careers/react-community-engineer.js
+++ b/docs/pages/careers/react-community-engineer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/react-community-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/react-community-engineer.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/react-community-engineer.md b/docs/pages/careers/react-community-engineer.md
similarity index 100%
rename from docs/src/pages/careers/react-community-engineer.md
rename to docs/pages/careers/react-community-engineer.md
diff --git a/docs/pages/careers/react-engineer-core.js b/docs/pages/careers/react-engineer-core.js
index 4e9fe8deb7b0f1..1ad934fb3299b6 100644
--- a/docs/pages/careers/react-engineer-core.js
+++ b/docs/pages/careers/react-engineer-core.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/react-engineer-core.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/react-engineer-core.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/react-engineer-core.md b/docs/pages/careers/react-engineer-core.md
similarity index 100%
rename from docs/src/pages/careers/react-engineer-core.md
rename to docs/pages/careers/react-engineer-core.md
diff --git a/docs/src/pages/careers/react-engineer-x-grid.md b/docs/pages/careers/react-engineer-x-grid.md
similarity index 100%
rename from docs/src/pages/careers/react-engineer-x-grid.md
rename to docs/pages/careers/react-engineer-x-grid.md
diff --git a/docs/pages/careers/react-engineer-x.js b/docs/pages/careers/react-engineer-x.js
index c1bcf90a468c25..758d5f492c7499 100644
--- a/docs/pages/careers/react-engineer-x.js
+++ b/docs/pages/careers/react-engineer-x.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/react-engineer-x.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/react-engineer-x.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/react-engineer-x.md b/docs/pages/careers/react-engineer-x.md
similarity index 100%
rename from docs/src/pages/careers/react-engineer-x.md
rename to docs/pages/careers/react-engineer-x.md
diff --git a/docs/pages/careers/react-tech-lead-core.js b/docs/pages/careers/react-tech-lead-core.js
index 4596e9eb2497c7..e943ef768f802e 100644
--- a/docs/pages/careers/react-tech-lead-core.js
+++ b/docs/pages/careers/react-tech-lead-core.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/react-tech-lead-core.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/react-tech-lead-core.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/react-tech-lead-core.md b/docs/pages/careers/react-tech-lead-core.md
similarity index 100%
rename from docs/src/pages/careers/react-tech-lead-core.md
rename to docs/pages/careers/react-tech-lead-core.md
diff --git a/docs/pages/careers/react-tech-lead-x-grid.js b/docs/pages/careers/react-tech-lead-x-grid.js
index 6db893048ccd11..e12c05097670fe 100644
--- a/docs/pages/careers/react-tech-lead-x-grid.js
+++ b/docs/pages/careers/react-tech-lead-x-grid.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/react-tech-lead-x-grid.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/react-tech-lead-x-grid.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/react-tech-lead-x-grid.md b/docs/pages/careers/react-tech-lead-x-grid.md
similarity index 100%
rename from docs/src/pages/careers/react-tech-lead-x-grid.md
rename to docs/pages/careers/react-tech-lead-x-grid.md
diff --git a/docs/src/pages/careers/senior-designer.md b/docs/pages/careers/senior-designer.md
similarity index 100%
rename from docs/src/pages/careers/senior-designer.md
rename to docs/pages/careers/senior-designer.md
diff --git a/docs/src/pages/careers/support-agent.md b/docs/pages/careers/support-agent.md
similarity index 100%
rename from docs/src/pages/careers/support-agent.md
rename to docs/pages/careers/support-agent.md
diff --git a/docs/src/pages/careers/technical-product-manager.md b/docs/pages/careers/technical-product-manager.md
similarity index 100%
rename from docs/src/pages/careers/technical-product-manager.md
rename to docs/pages/careers/technical-product-manager.md
diff --git a/docs/pages/careers/technical-recruiter.js b/docs/pages/careers/technical-recruiter.js
index beab3d311ad93a..cbe084390ba073 100644
--- a/docs/pages/careers/technical-recruiter.js
+++ b/docs/pages/careers/technical-recruiter.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/technical-recruiter.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/technical-recruiter.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;
diff --git a/docs/src/pages/careers/technical-recruiter.md b/docs/pages/careers/technical-recruiter.md
similarity index 100%
rename from docs/src/pages/careers/technical-recruiter.md
rename to docs/pages/careers/technical-recruiter.md
diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
index 40b58370b82d19..b4524d892b0d01 100644
--- a/docs/src/components/about/OurValues.tsx
+++ b/docs/src/components/about/OurValues.tsx
@@ -14,7 +14,7 @@ import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 const values = [
   {
     title: 'Put community first 💙',
-    description: 'We never lose sight of who we’re serving and why.',
+    description: "We never lose sight of who we're serving and why.",
     lightIcon: 'url(/static/branding/about/illustrations/community-light.svg)',
     darkIcon: 'url(/static/branding/about/illustrations/community-dark.svg)',
     width: 92,
@@ -22,15 +22,15 @@ const values = [
   },
   {
     title: 'Avoid bureaucracy 🚫',
-    description: 'We’re so not corporate — and we like it that way.',
+    description: 'Were so not corporate — and we like it that way.',
     lightIcon: 'url(/static/branding/about/illustrations/bureaucracy-light.svg)',
     darkIcon: 'url(/static/branding/about/illustrations/bureaucracy-dark.svg)',
     width: 81,
     height: 94,
   },
   {
-    title: 'Chase “better” 🌱',
-    description: 'We’re driven by an unending desire to improve.',
+    title: 'Chase "better" 🌱',
+    description: "We're driven by an unending desire to improve.",
     lightIcon: 'url(/static/branding/about/illustrations/better-light.svg)',
     darkIcon: 'url(/static/branding/about/illustrations/better-dark.svg)',
     width: 89,
@@ -95,16 +95,18 @@ export default function OurValues() {
                 }),
               })}
             >
-              <Box
-                sx={(theme) => ({
-                  background: `${lightIcon}`,
-                  ...theme.applyDarkStyles({
-                    background: `${darkIcon}`,
-                  }),
-                })}
-                width={width}
-                height={height}
-              />
+              <Box sx={{ height: 94 }}>
+                <Box
+                  sx={(theme) => ({
+                    background: `${lightIcon}`,
+                    ...theme.applyDarkStyles({
+                      background: `${darkIcon}`,
+                    }),
+                  })}
+                  width={width}
+                  height={height}
+                />
+              </Box>
               <Box sx={{ flexGrow: 1 }}>
                 <Typography
                   fontWeight="bold"
diff --git a/docs/src/components/icon/IconImage.tsx b/docs/src/components/icon/IconImage.tsx
index 91b1ad61aab373..0e6c75d91ed790 100644
--- a/docs/src/components/icon/IconImage.tsx
+++ b/docs/src/components/icon/IconImage.tsx
@@ -34,7 +34,8 @@ export type IconImageProps = {
     | 'companies/patreon'
     | 'companies/ebay'
     | 'companies/samsung'
-    | 'companies/volvo';
+    | 'companies/volvo'
+    | string;
   height?: number;
   mode?: '' | 'light' | 'dark';
   sx?: SxProps<Theme>;
@@ -50,10 +51,8 @@ export default function IconImage(props: IconImageProps) {
   const theme = useTheme();
   const [firstRender, setFirstRender] = React.useState(true);
   React.useEffect(() => {
-    if (neverHydrated) {
-      setFirstRender(false);
-      neverHydrated = false;
-    }
+    setFirstRender(false);
+    neverHydrated = false;
   }, []);
   let defaultWidth;
   let defaultHeight;
diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
index 6b2bc789763fec..6c2d45e6b5a026 100644
--- a/docs/src/components/productBaseUI/BaseUIComponents.tsx
+++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -84,7 +84,7 @@ export default function BaseUIComponents() {
                   <br /> <GradientText>CSS adventure</GradientText>
                 </Typography>
               }
-              description="Base UI’s skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you’re free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
+              description="Base UI's skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you're free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
             />
           </Box>
           <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>
diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
index ce62f9ee840da9..4b3c5f3917783b 100644
--- a/docs/src/components/productBaseUI/BaseUITestimonial.tsx
+++ b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/straight-quotes */
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
diff --git a/packages/eslint-plugin-material-ui/src/index.js b/packages/eslint-plugin-material-ui/src/index.js
index c6bd0400f8e624..ac8619f6224f57 100644
--- a/packages/eslint-plugin-material-ui/src/index.js
+++ b/packages/eslint-plugin-material-ui/src/index.js
@@ -6,4 +6,5 @@ module.exports.rules = {
   'no-hardcoded-labels': require('./rules/no-hardcoded-labels'),
   'rules-of-use-theme-variants': require('./rules/rules-of-use-theme-variants'),
   'no-empty-box': require('./rules/no-empty-box'),
+  'straight-quotes': require('./rules/straight-quotes'),
 };
diff --git a/packages/eslint-plugin-material-ui/src/rules/straight-quotes.js b/packages/eslint-plugin-material-ui/src/rules/straight-quotes.js
new file mode 100644
index 00000000000000..13bc98739e6000
--- /dev/null
+++ b/packages/eslint-plugin-material-ui/src/rules/straight-quotes.js
@@ -0,0 +1,43 @@
+// eslint-disable-next-line material-ui/straight-quotes
+const nonStraightQuotes = /[‘’“”]/gm;
+
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+const rule = {
+  meta: {
+    docs: {
+      description:
+        'Only allow straight quotes. Curly quotes can still be used but in specific context where relevant.',
+    },
+    messages: {
+      wrongQuotes:
+        'Only allow straight quotes. Curly quotes can still be used but in specific context where relevant.',
+    },
+    // fixable: 'code', TODO
+    type: 'suggestion',
+    schema: [],
+  },
+  create(context) {
+    return {
+      Program(node) {
+        const value = context.sourceCode.text;
+        let match;
+
+        // eslint-disable-next-line no-cond-assign
+        while ((match = nonStraightQuotes.exec(value)) !== null) {
+          context.report({
+            node,
+            loc: {
+              start: context.sourceCode.getLocFromIndex(match.index),
+              end: context.sourceCode.getLocFromIndex(match.index + 1),
+            },
+            messageId: 'wrongQuotes',
+          });
+        }
+      },
+    };
+  },
+};
+
+module.exports = rule;
diff --git a/packages/eslint-plugin-material-ui/src/rules/straight-quotes.test.js b/packages/eslint-plugin-material-ui/src/rules/straight-quotes.test.js
new file mode 100644
index 00000000000000..2257d9b7b772fa
--- /dev/null
+++ b/packages/eslint-plugin-material-ui/src/rules/straight-quotes.test.js
@@ -0,0 +1,63 @@
+/* eslint-disable material-ui/straight-quotes */
+const eslint = require('eslint');
+const rule = require('./straight-quotes');
+
+const ruleTester = new eslint.RuleTester({ parser: require.resolve('@typescript-eslint/parser') });
+
+ruleTester.run('straight-quotes', rule, {
+  valid: [
+    `
+const values = [
+  {
+    title: 'Put community first 💙',
+  },
+];
+  `,
+  ],
+  invalid: [
+    {
+      code: `
+const values = [
+  {
+    title: 'Put community first 💙',
+    description: 'We never lose sight of who we’re serving and why.',
+  },
+];
+      `,
+      errors: [
+        {
+          messageId: 'wrongQuotes',
+          line: 5,
+        },
+      ],
+    },
+    {
+      code: `
+// reference ID (also known as “SHA” or “hash”) of the commit we're building.
+const values = 'foo';
+      `,
+      errors: [
+        {
+          line: 2,
+          column: 32,
+          messageId: 'wrongQuotes',
+        },
+        {
+          line: 2,
+          column: 36,
+          messageId: 'wrongQuotes',
+        },
+        {
+          line: 2,
+          column: 41,
+          messageId: 'wrongQuotes',
+        },
+        {
+          line: 2,
+          column: 46,
+          messageId: 'wrongQuotes',
+        },
+      ],
+    },
+  ],
+});
diff --git a/packages/markdownlint-rule-mui/straight-quotes.js b/packages/markdownlint-rule-mui/straight-quotes.js
index c66429bce73efa..65ea687c4a7083 100644
--- a/packages/markdownlint-rule-mui/straight-quotes.js
+++ b/packages/markdownlint-rule-mui/straight-quotes.js
@@ -1,3 +1,6 @@
+// eslint-disable-next-line material-ui/straight-quotes
+const nonStraightQuotes = /[‘’“”]/;
+
 module.exports = {
   names: ['straightQuotes'],
   description: 'Only allow straight quotes.',
@@ -9,7 +12,7 @@ module.exports = {
       // closing single quote: \xE2\x80\x99
       // opening double quote: \xE2\x80\x9C
       // closing double quote: \xE2\x80\x9D
-      if (line.match('[‘’“”]')) {
+      if (nonStraightQuotes.test(line)) {
         onError({
           lineNumber: lineNumber + 1,
           detail: `For line: ${line}`,