diff --git a/docs/data/joy/customization/approaches/approaches.md b/docs/data/joy/customization/approaches/approaches.md
index ed79a29b517c6c..b8d407be11708b 100644
--- a/docs/data/joy/customization/approaches/approaches.md
+++ b/docs/data/joy/customization/approaches/approaches.md
@@ -80,10 +80,12 @@ const theme = extendTheme({
   components: {
     // The component identifier always start with `Joy${ComponentName}`.
     JoyButton: {
-      styleOverrides: ({ theme }) => ({
-        // theme.vars.* return the CSS variables.
-        fontSize: theme.vars.fontSize.lg, // 'var(--joy-fontSize-lg)'
-      }),
+      styleOverrides: {
+        root: ({ theme }) => {
+          // theme.vars.* return the CSS variables.
+          fontSize: theme.vars.fontSize.lg, // 'var(--joy-fontSize-lg)'
+        },
+      },
     },
   },
 });