From 99ab22b9a6f0a4115518164d169659e0b6fb4923 Mon Sep 17 00:00:00 2001
From: Digvijay Gupta <digvijaygupta@Digvijays-MacBook-Pro.local>
Date: Sun, 1 Oct 2023 20:44:08 +0530
Subject: [PATCH 1/2] [docs] Access custom properties in the code without
 typescript error by extending theme type from @mui/system

---
 .../the-sx-prop/the-sx-prop.md                | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
index d29f823eb584a0..31c03d59727135 100644
--- a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
+++ b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
@@ -295,6 +295,30 @@ export default function App() {
 }
 ```
 
+To fix and avoid typescript errors while accessing the custom properties from theme using `sx` prop callback, you can extend the `Theme` type from the `@mui/system` library:
+
+```ts
+declare module '@mui/system' {
+  interface Theme {
+    propertyKey: {
+      nestedPropertyKey: Type;
+    };
+  }
+}
+
+export default function App() {
+  return (
+    <Box
+      sx={(theme) => ({
+        bgcolor: theme.propertyKey.nestedPropertyKey,
+      })}
+    >
+      Example
+    </Box>
+  );
+}
+```
+
 ## Performance
 
 To learn more about the performance tradeoffs of the `sx` prop, check out [Usage–Performance tradeoffs](/system/getting-started/usage/#performance-tradeoffs).

From ca245cdce66b8f2002c0d7d9d508e635afa3e2fe Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Fri, 6 Oct 2023 19:59:40 +0530
Subject: [PATCH 2/2] improve documentation

---
 .../the-sx-prop/the-sx-prop.md                | 61 +++++++++++--------
 1 file changed, 37 insertions(+), 24 deletions(-)

diff --git a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
index 31c03d59727135..ed3cd3240909af 100644
--- a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
+++ b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
@@ -203,6 +203,43 @@ The `sx` prop can also receive a callback when you need to get theme values that
 />
 ```
 
+In TypeScript, to use custom theme properties with the `sx` prop callback, extend the `Theme` type from the `@mui/system` library using [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation):
+
+```tsx
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { orange } from '@mui/material/colors';
+
+declare module '@mui/system' {
+  interface Theme {
+    status: {
+      warning: string;
+    };
+  }
+}
+
+const theme = createTheme({
+  status: {
+    warning: orange[500],
+  },
+});
+
+export default function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Box
+        sx={(theme) => ({
+          bgcolor: theme.status.warning,
+        })}
+      >
+        Example
+      </Box>
+    </ThemeProvider>
+  );
+}
+```
+
 ## Array values
 
 Array types are useful when you want to partially override some styles in the former index:
@@ -295,30 +332,6 @@ export default function App() {
 }
 ```
 
-To fix and avoid typescript errors while accessing the custom properties from theme using `sx` prop callback, you can extend the `Theme` type from the `@mui/system` library:
-
-```ts
-declare module '@mui/system' {
-  interface Theme {
-    propertyKey: {
-      nestedPropertyKey: Type;
-    };
-  }
-}
-
-export default function App() {
-  return (
-    <Box
-      sx={(theme) => ({
-        bgcolor: theme.propertyKey.nestedPropertyKey,
-      })}
-    >
-      Example
-    </Box>
-  );
-}
-```
-
 ## Performance
 
 To learn more about the performance tradeoffs of the `sx` prop, check out [Usage–Performance tradeoffs](/system/getting-started/usage/#performance-tradeoffs).