diff --git a/docs/data/material/components/text-fields/BasicTextFields.js b/docs/data/material/components/text-fields/BasicTextFields.js
index 36d3ec53a967d5..412fc4edba020e 100644
--- a/docs/data/material/components/text-fields/BasicTextFields.js
+++ b/docs/data/material/components/text-fields/BasicTextFields.js
@@ -2,38 +2,28 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 
+const filledTextFieldStyles = {
+  '& .MuiFilledInput-root': {
+    backgroundColor: 'inherit',
+  },
+};
+
+const standardTextFieldStyles = {
+  '& .MuiInputBase-root': {
+    border: '1px solid #e0e0e0',
+  },
+};
+
 export default function BasicTextFields() {
   return (
     <Box
       component="form"
-      sx={{
-        '& > :not(style)': { m: 1, width: '25ch' },
-      }}
       noValidate
       autoComplete="off"
     >
       <TextField id="outlined-basic" label="Outlined" variant="outlined" />
-      <TextField
-        id="filled-basic"
-        label="Filled"
-        variant="filled"
-        sx={{ // Add custom styles for the filled variant
-          '& .MuiFilledInput-root': {
-            backgroundColor: 'inherit', // Set the background color to inherit
-          },
-        }}
-      />
-      <TextField
-        id="standard-basic"
-        label="Standard"
-        variant="standard"
-        sx={{ // Add custom styles for the standard variant
-          '& .MuiInputBase-root': {
-            border: '1px solid #e0e0e0', // Set the border for the standard variant
-          },
-        }}
-      />
+      <TextField id="filled-basic" label="Filled" variant="filled" style={filledTextFieldStyles} />
+      <TextField id="standard-basic" label="Standard" variant="standard" style={standardTextFieldStyles} />
     </Box>
   );
 }
-
diff --git a/docs/data/material/components/text-fields/BasicTextFields.tsx b/docs/data/material/components/text-fields/BasicTextFields.tsx
index 7253adf126e2b6..412fc4edba020e 100644
--- a/docs/data/material/components/text-fields/BasicTextFields.tsx
+++ b/docs/data/material/components/text-fields/BasicTextFields.tsx
@@ -2,19 +2,28 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 
+const filledTextFieldStyles = {
+  '& .MuiFilledInput-root': {
+    backgroundColor: 'inherit',
+  },
+};
+
+const standardTextFieldStyles = {
+  '& .MuiInputBase-root': {
+    border: '1px solid #e0e0e0',
+  },
+};
+
 export default function BasicTextFields() {
   return (
     <Box
       component="form"
-      sx={{
-        '& > :not(style)': { m: 1, width: '25ch' },
-      }}
       noValidate
       autoComplete="off"
     >
       <TextField id="outlined-basic" label="Outlined" variant="outlined" />
-      <TextField id="filled-basic" label="Filled" variant="filled" />
-      <TextField id="standard-basic" label="Standard" variant="standard" />
+      <TextField id="filled-basic" label="Filled" variant="filled" style={filledTextFieldStyles} />
+      <TextField id="standard-basic" label="Standard" variant="standard" style={standardTextFieldStyles} />
     </Box>
   );
 }