[data grid] `MuiDataGrid` key is missing in `@mui/x-data-grid-pro/themeAugmentation` for module augmentation

[damisparks]

Steps to reproduce

Link to live example: (required)

Steps:

1. Create a TypeScript project with MUI and MUI X Data Grid Pro.
2. Attempt to use module augmentation for MuiDataGrid with @mui/x-data-grid-pro/themeAugmentation.
3. Observe that MuiDataGrid is not available for augmentation.

Current behavior

The MuiDataGrid key is missing in the module augmentation's mixins object.

import type {} from "@mui/x-data-grid-pro/themeAugmentation";

Expected behavior

The MuiDataGrid key should be available for module augmentation's mixins both in @mui/x-data-grid and @mui/x-data-grid-pro.

According to the docs, TypeScript users can use module augmentation to extend the default theme structure.

import type {} from '@mui/x-data-grid/themeAugmentation';
import type {} from '@mui/x-data-grid-pro/themeAugmentation';
import type {} from '@mui/x-data-grid-premium/themeAugmentation';

const theme = createTheme({
  components: {
    // Use `MuiDataGrid` on DataGrid, DataGridPro and DataGridPremium
    MuiDataGrid: {
      styleOverrides: {
        root: {
          backgroundColor: 'red',
        },
      },
    },
  },
});

I assume these imports are interchangeable depending on the kind of DataGrid used.

Context

DataGrid

When I use

import type {} from "@mui/x-data-grid/themeAugmentation";

There are no errors.

See https://github.com/mui/mui-x/blob/808c25389112525b18e5561bb3aa30fa92a5d877/packages/x-data-grid/src/themeAugmentation/overrides.ts#L10

DataGridPro

When I used

import type {} from "@mui/x-data-grid-pro/themeAugmentation";

The Mixins interface ain't available. https://github.com/mui/mui-x/blob/master/packages/x-data-grid-pro/src/themeAugmentation/overrides.ts

import { GridClassKey } from '@mui/x-data-grid';

export interface DataGridProComponentNameToClassKey {
  MuiDataGrid: GridClassKey;
}

declare module '@mui/material/styles' {
  interface ComponentNameToClassKey extends DataGridProComponentNameToClassKey {}
}

This inconsistency causes issues when trying to extend the theme for the Data Grid Pro components.

It might be related to this https://github.com/mui/mui-x/issues/14115

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.7 Binaries: Node: 23.0.0 - ~/.nvm/versions/node/v23.0.0/bin/node npm: 10.9.0 - ~/.nvm/versions/node/v23.0.0/bin/npm pnpm: 9.12.2 - ~/.nvm/versions/node/v23.0.0/bin/pnpm Browsers: Chrome: 130.0.6723.92 Edge: 130.0.2849.56 Safari: 18.1 npmPackages: @emotion/react: 11.13.3 @emotion/styled: ^11.11.5 => 11.13.0 @mui/base: ^5.0.0-beta.46 => 5.0.0-beta.60 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: ^5.15.18 => 5.16.7 @mui/material: ^5.15.18 => 5.16.7 @mui/private-theming: 6.1.5 @mui/styled-engine: 6.1.5 @mui/system: 6.1.5 @mui/types: 7.2.18 @mui/utils: ^5.15.14 => 5.16.6 @mui/x-data-grid: 7.22.0 @mui/x-data-grid-pro: ^7.7.0 => 7.22.0 @mui/x-date-pickers: 7.22.0 @mui/x-date-pickers-pro: ^7.11.1 => 7.22.0 @mui/x-internals: 7.21.0 @mui/x-license: ^7.0.0 => 7.21.0 @mui/x-tree-view: 7.22.0 @mui/x-tree-view-pro: ^7.12.0 => 7.22.0 @types/react: ^18.2.79 => 18.3.12 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: ^5.6.2 => 5.6.3 ```

Search keywords: mixins datagrid Order ID: 100584

[michelengelen]

Thanks for opening @damisparks ... i can confirm this.

This fixes the issue:

diff --git a/packages/x-data-grid-premium/src/themeAugmentation/overrides.ts b/packages/x-data-grid-premium/src/themeAugmentation/overrides.ts
index 309fab44d..73fa9c720 100644
--- a/packages/x-data-grid-premium/src/themeAugmentation/overrides.ts
+++ b/packages/x-data-grid-premium/src/themeAugmentation/overrides.ts
@@ -6,4 +6,11 @@ export interface DataGridPremiumComponentNameToClassKey {

 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends DataGridPremiumComponentNameToClassKey {}
+
+  interface Mixins {
+    MuiDataGrid?: {
+      containerBackground?: string;
+      pinnedBackground?: string;
+    };
+  }
 }
diff --git a/packages/x-data-grid-pro/src/themeAugmentation/overrides.ts b/packages/x-data-grid-pro/src/themeAugmentation/overrides.ts
index c3a37460d..bf5cc4d08 100644
--- a/packages/x-data-grid-pro/src/themeAugmentation/overrides.ts
+++ b/packages/x-data-grid-pro/src/themeAugmentation/overrides.ts
@@ -6,4 +6,11 @@ export interface DataGridProComponentNameToClassKey {

 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends DataGridProComponentNameToClassKey {}
+
+  interface Mixins {
+    MuiDataGrid?: {
+      containerBackground?: string;
+      pinnedBackground?: string;
+    };
+  }
 }

I'll open this up as a good first issue!

[damisparks]

@michelengelen, I appreciate the feedback. I could do a PR for this issue. However, I read that I would have to sign an NDA. See Contributing to MUI X Correct me if I am wrong?

[michelengelen]

@michelengelen, I appreciate the feedback. I could do a PR for this issue. However, I read that I would have to sign an NDA. See Contributing to MUI X Correct me if I am wrong?

that's correct... you can add the PR and we will take it from there if that works for you

[damisparks]

@michelengelen, I appreciate the feedback. I could do a PR for this issue. However, I read that I would have to sign an NDA. See Contributing to MUI X Correct me if I am wrong?

that's correct... you can add the PR and we will take it from there if that works for you

That works for me. I will send the PR tomorrow.

[damisparks]

@michelengelen, you can find the PR here: https://github.com/mui/mui-x/pull/15283. Let me know if I miss anything. Thank you.