diff --git a/docs/data/material/guides/right-to-left/Direction.js b/docs/data/material/guides/right-to-left/Direction.js
index c48161f7091ee0..27aee5c459110d 100644
--- a/docs/data/material/guides/right-to-left/Direction.js
+++ b/docs/data/material/guides/right-to-left/Direction.js
@@ -20,8 +20,7 @@ export default function Direction() {
     <CacheProvider value={cacheRtl}>
       <ThemeProvider theme={theme}>
         <div dir="rtl">
-          <TextField label="Name" variant="standard" />
-          <input type="text" placeholder="Name" />
+          <TextField label="Name" variant="outlined" />
         </div>
       </ThemeProvider>
     </CacheProvider>
diff --git a/docs/data/material/guides/right-to-left/Direction.tsx b/docs/data/material/guides/right-to-left/Direction.tsx
index c48161f7091ee0..27aee5c459110d 100644
--- a/docs/data/material/guides/right-to-left/Direction.tsx
+++ b/docs/data/material/guides/right-to-left/Direction.tsx
@@ -20,8 +20,7 @@ export default function Direction() {
     <CacheProvider value={cacheRtl}>
       <ThemeProvider theme={theme}>
         <div dir="rtl">
-          <TextField label="Name" variant="standard" />
-          <input type="text" placeholder="Name" />
+          <TextField label="Name" variant="outlined" />
         </div>
       </ThemeProvider>
     </CacheProvider>
diff --git a/docs/data/material/guides/right-to-left/Direction.tsx.preview b/docs/data/material/guides/right-to-left/Direction.tsx.preview
index 4f9bdb2bfe98df..1ab606866c595e 100644
--- a/docs/data/material/guides/right-to-left/Direction.tsx.preview
+++ b/docs/data/material/guides/right-to-left/Direction.tsx.preview
@@ -1,8 +1,7 @@
 <CacheProvider value={cacheRtl}>
   <ThemeProvider theme={theme}>
     <div dir="rtl">
-      <TextField label="Name" variant="standard" />
-      <input type="text" placeholder="Name" />
+      <TextField label="Name" variant="outlined" />
     </div>
   </ThemeProvider>
 </CacheProvider>
\ No newline at end of file
diff --git a/docs/data/material/guides/right-to-left/RtlOptOutStylis.js b/docs/data/material/guides/right-to-left/RtlOptOutStylis.js
index 9f2d1e2187073c..2da374f151d373 100644
--- a/docs/data/material/guides/right-to-left/RtlOptOutStylis.js
+++ b/docs/data/material/guides/right-to-left/RtlOptOutStylis.js
@@ -5,6 +5,7 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
 
 const Root = styled('div')((props) => ({
@@ -38,19 +39,17 @@ export default function RtlOptOutStylis() {
   };
 
   return (
-    <React.Fragment>
-      <div>
-        <FormControlLabel
-          control={<Switch checked={rtl} onChange={handleChange} />}
-          label="RTL"
-        />
-      </div>
+    <Box sx={{ display: 'flex', gap: 2, width: '100%' }}>
+      <FormControlLabel
+        control={<Switch checked={rtl} onChange={handleChange} />}
+        label="Toggle right-to-left styles"
+      />
       <CacheProvider value={rtl ? rtlCache : ltrCache}>
         <Root {...(rtl ? { dir: 'rtl' } : {})}>
           <AffectedText>Affected</AffectedText>
           <UnaffectedText>Unaffected</UnaffectedText>
         </Root>
       </CacheProvider>
-    </React.Fragment>
+    </Box>
   );
 }
diff --git a/docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx b/docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx
index 9f2d1e2187073c..2da374f151d373 100644
--- a/docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx
+++ b/docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx
@@ -5,6 +5,7 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import Box from '@mui/material/Box';
 import Switch from '@mui/material/Switch';
 
 const Root = styled('div')((props) => ({
@@ -38,19 +39,17 @@ export default function RtlOptOutStylis() {
   };
 
   return (
-    <React.Fragment>
-      <div>
-        <FormControlLabel
-          control={<Switch checked={rtl} onChange={handleChange} />}
-          label="RTL"
-        />
-      </div>
+    <Box sx={{ display: 'flex', gap: 2, width: '100%' }}>
+      <FormControlLabel
+        control={<Switch checked={rtl} onChange={handleChange} />}
+        label="Toggle right-to-left styles"
+      />
       <CacheProvider value={rtl ? rtlCache : ltrCache}>
         <Root {...(rtl ? { dir: 'rtl' } : {})}>
           <AffectedText>Affected</AffectedText>
           <UnaffectedText>Unaffected</UnaffectedText>
         </Root>
       </CacheProvider>
-    </React.Fragment>
+    </Box>
   );
 }
diff --git a/docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx.preview b/docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx.preview
index 7af232b755e764..4322427df2d206 100644
--- a/docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx.preview
+++ b/docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx.preview
@@ -1,14 +1,10 @@
-<React.Fragment>
-  <div>
-    <FormControlLabel
-      control={<Switch checked={rtl} onChange={handleChange} />}
-      label="RTL"
-    />
-  </div>
-  <CacheProvider value={rtl ? rtlCache : ltrCache}>
-    <Root {...(rtl ? { dir: 'rtl' } : {})}>
-      <AffectedText>Affected</AffectedText>
-      <UnaffectedText>Unaffected</UnaffectedText>
-    </Root>
-  </CacheProvider>
-</React.Fragment>
\ No newline at end of file
+<FormControlLabel
+  control={<Switch checked={rtl} onChange={handleChange} />}
+  label="Toggle right-to-left styles"
+/>
+<CacheProvider value={rtl ? rtlCache : ltrCache}>
+  <Root {...(rtl ? { dir: 'rtl' } : {})}>
+    <AffectedText>Affected</AffectedText>
+    <UnaffectedText>Unaffected</UnaffectedText>
+  </Root>
+</CacheProvider>
\ No newline at end of file