From 9884d59c7b8da612ee6a8b17a2fa266fbb68ed66 Mon Sep 17 00:00:00 2001
From: aditi291soni <aditi291soni@gmail.com>
Date: Fri, 18 Jul 2025 11:43:17 +0530
Subject: [PATCH] fix(typography): restore support for CSS variable overrides
 in variant styles

---
 .../customization/typography/typography.md    | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/docs/data/material/customization/typography/typography.md b/docs/data/material/customization/typography/typography.md
index b1f23e3a147e88..51c34b3b06a1f6 100644
--- a/docs/data/material/customization/typography/typography.md
+++ b/docs/data/material/customization/typography/typography.md
@@ -115,17 +115,21 @@ The `theme.typography.*` [variant](#variants) properties map directly to the gen
 You can use [media queries](/material-ui/customization/breakpoints/#api) inside them:
 
 ```js
-const theme = createTheme();
+const baseTheme = createTheme();
 
-theme.typography.h3 = {
-  fontSize: '1.2rem',
-  '@media (min-width:600px)': {
-    fontSize: '1.5rem',
-  },
-  [theme.breakpoints.up('md')]: {
-    fontSize: '2.4rem',
+const theme = createTheme({
+  typography: {
+    h3: {
+      fontSize: '1.2rem',
+      '@media (min-width:600px)': {
+        fontSize: '1.5rem',
+      },
+      [baseTheme.breakpoints.up('md')]: {
+        fontSize: '2.4rem',
+      },
+    },
   },
-};
+});
 ```
 
 {{"demo": "CustomResponsiveFontSizes.js"}}