diff --git a/docs/data/material/customization/creating-themed-components/StatComponent.js b/docs/data/material/customization/creating-themed-components/StatComponent.js
index 2afdb41beeed5f..4557844b758b92 100644
--- a/docs/data/material/customization/creating-themed-components/StatComponent.js
+++ b/docs/data/material/customization/creating-themed-components/StatComponent.js
@@ -11,6 +11,9 @@ const StatRoot = styled('div')(({ theme }) => ({
   boxShadow: theme.shadows[2],
   letterSpacing: '-0.025em',
   fontWeight: 600,
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'inherit',
+  }),
 }));
 
 const StatValue = styled('div')(({ theme }) => ({
@@ -20,6 +23,9 @@ const StatValue = styled('div')(({ theme }) => ({
 const StatUnit = styled('div')(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  ...theme.applyStyles('dark', {
+    color: 'inherit',
+  }),
 }));
 
 export default function StatComponent() {
diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.js b/docs/data/material/customization/creating-themed-components/StatFullTemplate.js
index c95e158e8a1325..ddfbc8cffac7f4 100644
--- a/docs/data/material/customization/creating-themed-components/StatFullTemplate.js
+++ b/docs/data/material/customization/creating-themed-components/StatFullTemplate.js
@@ -27,6 +27,9 @@ const StatRoot = styled('div', {
       },
     },
   ],
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'inherit',
+  }),
 }));
 
 const StatValue = styled('div', {
@@ -42,6 +45,9 @@ const StatUnit = styled('div', {
 })(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  ...theme.applyStyles('dark', {
+    color: 'inherit',
+  }),
 }));
 
 const Stat = React.forwardRef(function Stat(inProps, ref) {
diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx b/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx
index 44c4169b9bb2d0..0992776ef11765 100644
--- a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx
+++ b/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx
@@ -37,6 +37,9 @@ const StatRoot = styled('div', {
       },
     },
   ],
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'inherit',
+  }),
 }));
 
 const StatValue = styled('div', {
@@ -52,6 +55,9 @@ const StatUnit = styled('div', {
 })<{ ownerState: StatOwnerState }>(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  ...theme.applyStyles('dark', {
+    color: 'inherit',
+  }),
 }));
 
 const Stat = React.forwardRef<HTMLDivElement, StatProps>(
diff --git a/docs/data/material/customization/creating-themed-components/StatSlots.js b/docs/data/material/customization/creating-themed-components/StatSlots.js
index ab013dc415d5bd..a13bec93d3d318 100644
--- a/docs/data/material/customization/creating-themed-components/StatSlots.js
+++ b/docs/data/material/customization/creating-themed-components/StatSlots.js
@@ -11,6 +11,9 @@ const StatRoot = styled('div')(({ theme }) => ({
   boxShadow: theme.shadows[2],
   letterSpacing: '-0.025em',
   fontWeight: 600,
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'inherit',
+  }),
 }));
 
 const StatValue = styled('div')(({ theme }) => ({
@@ -20,6 +23,9 @@ const StatValue = styled('div')(({ theme }) => ({
 const StatUnit = styled('div')(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
+  ...theme.applyStyles('dark', {
+    color: 'inherit',
+  }),
 }));
 
 const Label = styled('div')(({ theme }) => ({
diff --git a/docs/data/material/customization/creating-themed-components/creating-themed-components.md b/docs/data/material/customization/creating-themed-components/creating-themed-components.md
index 1b9d7984ab7dca..dd43e973024727 100644
--- a/docs/data/material/customization/creating-themed-components/creating-themed-components.md
+++ b/docs/data/material/customization/creating-themed-components/creating-themed-components.md
@@ -55,6 +55,9 @@ const StatRoot = styled('div', {
   boxShadow: theme.shadows[2],
   letterSpacing: '-0.025em',
   fontWeight: 600,
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'inherit',
+  }),
 }));
 
 const StatValue = styled('div', {
@@ -181,6 +184,9 @@ Then you can read `ownerState` in the slot to style it based on the `variant` pr
     boxShadow: theme.shadows[2],
     letterSpacing: '-0.025em',
     fontWeight: 600,
+    ...theme.applyStyles('dark', {
+      backgroundColor: 'inherit',
+    }),
 +   ...ownerState.variant === 'outlined' && {
 +    border: `2px solid ${theme.palette.divider}`,
 +   },
@@ -257,6 +263,9 @@ const StatRoot = styled('div', {
   boxShadow: theme.shadows[2],
   letterSpacing: '-0.025em',
   fontWeight: 600,
+  ...theme.applyStyles('dark', {
+    backgroundColor: 'inherit',
+  }),
   // typed-safe access to the `variant` prop
   ...(ownerState.variant === 'outlined' && {
     border: `2px solid ${theme.palette.divider}`,