[docs][system] Add documentation on how to augment custom theme types for the sx prop callback

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: