[docs] Explain how to use theme augmentation (#2582)

Author: ZeeshanTamboli

docs/pages/api-docs/data-grid/data-grid-pro.md

@@ -10,7 +10,7 @@ import { DataGridPro } from '@mui/x-data-grid-pro';
 
 ## Component name
 
-The name <code>MuiDataGridPro</code> can be used when providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) in the theme.
+The name <code>MuiDataGrid</code> can be used when providing [default props](/customization/theme-components/#default-props) or [style overrides](/customization/theme-components/#global-style-overrides) in the theme.
 
 ## Props
 

docs/pages/api-docs/data-grid/data-grid.md

@@ -10,7 +10,7 @@ import { DataGrid } from '@mui/x-data-grid';
 
 ## Component name
 
-The name <code>MuiDataGrid</code> can be used when providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) in the theme.
+The name <code>MuiDataGrid</code> can be used when providing [default props](/customization/theme-components/#default-props) or [style overrides](/customization/theme-components/#global-style-overrides) in the theme.
 
 ## Props
 

docs/src/pages/components/data-grid/getting-started/getting-started.md

@@ -97,6 +97,30 @@ export default function App() {
 
 {{"demo": "pages/components/data-grid/getting-started/Codesandbox.js", "hideToolbar": true, "bg": true}}
 
+## TypeScript
+
+In order to benefit from the [CSS overrides](/customization/theme-components/#global-style-overrides) and [default prop customization](/customization/theme-components/#default-props) with the theme, TypeScript users need to import the following types.
+Internally, it uses module augmentation to extend the default theme structure.
+
+```tsx
+// When using TypeScript 4.x and above
+import type {} from '@mui/x-data-grid/themeAugmentation';
+import type {} from '@mui/x-data-grid-pro/themeAugmentation';
+
+const theme = createTheme({
+  components: {
+    // Use `DataGrid` on both DataGrid and DataGridPro
+    MuiDataGrid: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'red',
+        },
+      },
+    },
+  },
+});
+```
+
 ## Licenses
 
 The data grid comes with two different licenses: