diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js
new file mode 100644
index 00000000000000..e443cabe97b41a
--- /dev/null
+++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import Box from '@mui/material/Box';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+
+const customTheme = (outerTheme) =>
+  createTheme({
+    palette: {
+      mode: outerTheme.palette.mode,
+    },
+    components: {
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            '--TextField-brandBorderColor': '#E0E3E7',
+            '--TextField-brandBorderHoverColor': '#B2BAC2',
+            '--TextField-brandBorderFocusedColor': '#6F7E8C',
+            '& label.Mui-focused': {
+              color: 'var(--TextField-brandBorderFocusedColor)',
+            },
+          },
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          notchedOutline: {
+            borderColor: 'var(--TextField-brandBorderColor)',
+          },
+          root: {
+            [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: 'var(--TextField-brandBorderHoverColor)',
+            },
+            [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: 'var(--TextField-brandBorderFocusedColor)',
+            },
+          },
+        },
+      },
+      MuiFilledInput: {
+        styleOverrides: {
+          root: {
+            '&:before, &:after': {
+              borderBottom: '2px solid var(--TextField-brandBorderColor)',
+            },
+            '&:hover:not(.Mui-disabled, .Mui-error):before': {
+              borderBottom: '2px solid var(--TextField-brandBorderHoverColor)',
+            },
+            '&.Mui-focused:after': {
+              borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)',
+            },
+          },
+        },
+      },
+      MuiInput: {
+        styleOverrides: {
+          root: {
+            '&:before': {
+              borderBottom: '2px solid var(--TextField-brandBorderColor)',
+            },
+            '&:hover:not(.Mui-disabled, .Mui-error):before': {
+              borderBottom: '2px solid var(--TextField-brandBorderHoverColor)',
+            },
+            '&.Mui-focused:after': {
+              borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)',
+            },
+          },
+        },
+      },
+    },
+  });
+
+export default function CustomizedInputsStyleOverrides() {
+  const outerTheme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: { sm: '1fr 1fr 1fr' },
+        gap: 2,
+      }}
+    >
+      <ThemeProvider theme={customTheme(outerTheme)}>
+        <TextField label="Outlined" />
+        <TextField label="Filled" variant="filled" />
+        <TextField label="Standard" variant="standard" />
+      </ThemeProvider>
+    </Box>
+  );
+}
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx
new file mode 100644
index 00000000000000..422ece51720215
--- /dev/null
+++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import Box from '@mui/material/Box';
+import { createTheme, ThemeProvider, Theme, useTheme } from '@mui/material/styles';
+
+const customTheme = (outerTheme: Theme) =>
+  createTheme({
+    palette: {
+      mode: outerTheme.palette.mode,
+    },
+    components: {
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            '--TextField-brandBorderColor': '#E0E3E7',
+            '--TextField-brandBorderHoverColor': '#B2BAC2',
+            '--TextField-brandBorderFocusedColor': '#6F7E8C',
+            '& label.Mui-focused': {
+              color: 'var(--TextField-brandBorderFocusedColor)',
+            },
+          },
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          notchedOutline: {
+            borderColor: 'var(--TextField-brandBorderColor)',
+          },
+          root: {
+            [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: 'var(--TextField-brandBorderHoverColor)',
+            },
+            [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: 'var(--TextField-brandBorderFocusedColor)',
+            },
+          },
+        },
+      },
+      MuiFilledInput: {
+        styleOverrides: {
+          root: {
+            '&:before, &:after': {
+              borderBottom: '2px solid var(--TextField-brandBorderColor)',
+            },
+            '&:hover:not(.Mui-disabled, .Mui-error):before': {
+              borderBottom: '2px solid var(--TextField-brandBorderHoverColor)',
+            },
+            '&.Mui-focused:after': {
+              borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)',
+            },
+          },
+        },
+      },
+      MuiInput: {
+        styleOverrides: {
+          root: {
+            '&:before': {
+              borderBottom: '2px solid var(--TextField-brandBorderColor)',
+            },
+            '&:hover:not(.Mui-disabled, .Mui-error):before': {
+              borderBottom: '2px solid var(--TextField-brandBorderHoverColor)',
+            },
+            '&.Mui-focused:after': {
+              borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)',
+            },
+          },
+        },
+      },
+    },
+  });
+
+export default function CustomizedInputsStyleOverrides() {
+  const outerTheme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: { sm: '1fr 1fr 1fr' },
+        gap: 2,
+      }}
+    >
+      <ThemeProvider theme={customTheme(outerTheme)}>
+        <TextField label="Outlined" />
+        <TextField label="Filled" variant="filled" />
+        <TextField label="Standard" variant="standard" />
+      </ThemeProvider>
+    </Box>
+  );
+}
diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview
new file mode 100644
index 00000000000000..0a8fdd9694a9c3
--- /dev/null
+++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview
@@ -0,0 +1,5 @@
+<ThemeProvider theme={customTheme(outerTheme)}>
+  <TextField label="Outlined" />
+  <TextField label="Filled" variant="filled" />
+  <TextField label="Standard" variant="standard" />
+</ThemeProvider>
\ No newline at end of file
diff --git a/docs/data/material/components/text-fields/CustomizedInputs.js b/docs/data/material/components/text-fields/CustomizedInputsStyled.js
similarity index 83%
rename from docs/data/material/components/text-fields/CustomizedInputs.js
rename to docs/data/material/components/text-fields/CustomizedInputsStyled.js
index 13c0e325ec2bf0..70306371e8e40e 100644
--- a/docs/data/material/components/text-fields/CustomizedInputs.js
+++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.js
@@ -8,20 +8,20 @@ import FormControl from '@mui/material/FormControl';
 
 const CssTextField = styled(TextField)({
   '& label.Mui-focused': {
-    color: 'green',
+    color: '#A0AAB4',
   },
   '& .MuiInput-underline:after': {
-    borderBottomColor: 'green',
+    borderBottomColor: '#B2BAC2',
   },
   '& .MuiOutlinedInput-root': {
     '& fieldset': {
-      borderColor: 'red',
+      borderColor: '#E0E3E7',
     },
     '&:hover fieldset': {
-      borderColor: 'yellow',
+      borderColor: '#B2BAC2',
     },
     '&.Mui-focused fieldset': {
-      borderColor: 'green',
+      borderColor: '#6F7E8C',
     },
   },
 });
@@ -33,8 +33,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
   '& .MuiInputBase-input': {
     borderRadius: 4,
     position: 'relative',
-    backgroundColor: theme.palette.mode === 'light' ? '#fcfcfb' : '#2b2b2b',
-    border: '1px solid #ced4da',
+    backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027',
+    border: '1px solid',
+    borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843',
     fontSize: 16,
     width: 'auto',
     padding: '10px 12px',
@@ -67,10 +68,11 @@ const RedditTextField = styled((props) => (
   <TextField InputProps={{ disableUnderline: true }} {...props} />
 ))(({ theme }) => ({
   '& .MuiFilledInput-root': {
-    border: '1px solid #e2e2e1',
     overflow: 'hidden',
     borderRadius: 4,
-    backgroundColor: theme.palette.mode === 'light' ? '#fcfcfb' : '#2b2b2b',
+    backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027',
+    border: '1px solid',
+    borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843',
     transition: theme.transitions.create([
       'border-color',
       'background-color',
@@ -89,20 +91,20 @@ const RedditTextField = styled((props) => (
 
 const ValidationTextField = styled(TextField)({
   '& input:valid + fieldset': {
-    borderColor: 'green',
-    borderWidth: 2,
+    borderColor: '#E0E3E7',
+    borderWidth: 1,
   },
   '& input:invalid + fieldset': {
     borderColor: 'red',
-    borderWidth: 2,
+    borderWidth: 1,
   },
   '& input:valid:focus + fieldset': {
-    borderLeftWidth: 6,
+    borderLeftWidth: 4,
     padding: '4px !important', // override inline-style
   },
 });
 
-export default function CustomizedInputs() {
+export default function CustomizedInputsStyled() {
   return (
     <Box
       component="form"
diff --git a/docs/data/material/components/text-fields/CustomizedInputs.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
similarity index 83%
rename from docs/data/material/components/text-fields/CustomizedInputs.tsx
rename to docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
index 765e1a1a31be1c..825a6b7cde9f77 100644
--- a/docs/data/material/components/text-fields/CustomizedInputs.tsx
+++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx
@@ -9,20 +9,20 @@ import { OutlinedInputProps } from '@mui/material/OutlinedInput';
 
 const CssTextField = styled(TextField)({
   '& label.Mui-focused': {
-    color: 'green',
+    color: '#A0AAB4',
   },
   '& .MuiInput-underline:after': {
-    borderBottomColor: 'green',
+    borderBottomColor: '#B2BAC2',
   },
   '& .MuiOutlinedInput-root': {
     '& fieldset': {
-      borderColor: 'red',
+      borderColor: '#E0E3E7',
     },
     '&:hover fieldset': {
-      borderColor: 'yellow',
+      borderColor: '#B2BAC2',
     },
     '&.Mui-focused fieldset': {
-      borderColor: 'green',
+      borderColor: '#6F7E8C',
     },
   },
 });
@@ -34,8 +34,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({
   '& .MuiInputBase-input': {
     borderRadius: 4,
     position: 'relative',
-    backgroundColor: theme.palette.mode === 'light' ? '#fcfcfb' : '#2b2b2b',
-    border: '1px solid #ced4da',
+    backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027',
+    border: '1px solid',
+    borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843',
     fontSize: 16,
     width: 'auto',
     padding: '10px 12px',
@@ -71,10 +72,11 @@ const RedditTextField = styled((props: TextFieldProps) => (
   />
 ))(({ theme }) => ({
   '& .MuiFilledInput-root': {
-    border: '1px solid #e2e2e1',
     overflow: 'hidden',
     borderRadius: 4,
-    backgroundColor: theme.palette.mode === 'light' ? '#fcfcfb' : '#2b2b2b',
+    backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027',
+    border: '1px solid',
+    borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843',
     transition: theme.transitions.create([
       'border-color',
       'background-color',
@@ -93,20 +95,20 @@ const RedditTextField = styled((props: TextFieldProps) => (
 
 const ValidationTextField = styled(TextField)({
   '& input:valid + fieldset': {
-    borderColor: 'green',
-    borderWidth: 2,
+    borderColor: '#E0E3E7',
+    borderWidth: 1,
   },
   '& input:invalid + fieldset': {
     borderColor: 'red',
-    borderWidth: 2,
+    borderWidth: 1,
   },
   '& input:valid:focus + fieldset': {
-    borderLeftWidth: 6,
+    borderLeftWidth: 4,
     padding: '4px !important', // override inline-style
   },
 });
 
-export default function CustomizedInputs() {
+export default function CustomizedInputsStyled() {
   return (
     <Box
       component="form"
diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md
index 308568eef4c876..7318af3006ee4b 100644
--- a/docs/data/material/components/text-fields/text-fields.md
+++ b/docs/data/material/components/text-fields/text-fields.md
@@ -131,7 +131,16 @@ The `color` prop changes the highlight color of the text field when focused.
 Here are some examples of customizing the component.
 You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
 
-{{"demo": "CustomizedInputs.js"}}
+### Using the styled API
+
+{{"demo": "CustomizedInputsStyled.js"}}
+
+### Using the theme style overrides API
+
+Use the `styleOverrides` key to change any style injected by Material UI into the DOM.
+See the [theme style overrides](/material-ui/customization/theme-components/#theme-style-overrides) documentation for further details.
+
+{{"demo": "CustomizedInputsStyleOverrides.js"}}
 
 Customization does not stop at CSS.
 You can use composition to build custom components and give your app a unique feel.