[data grid] `columnsManagementRow` style override slot not working

[brandongit2]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/eloquent-mirzakhani-5hd5xp
2. Click the column header menu
3. Click on "Manage columns"

Current behavior

The items in the column management menu should have red backgrounds (indicating the styleOverrides worked)

Expected behavior

The items in the column management menu do not have red backgrounds.

See comments in index.tsx in the CodeSandbox.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.5
  Binaries:
    Node: 22.14.0 - ~/.asdf/installs/nodejs/22.14.0/bin/node
    npm: 10.9.2 - ~/.asdf/installs/nodejs/22.14.0/bin/npm
    pnpm: 9.9.0 - ~/.asdf/installs/nodejs/22.14.0/bin/pnpm
  Browsers:
    Chrome: 137.0.7151.104
    Edge: Not Found
    Safari: 18.5
  npmPackages:
    @emotion/react: ~11.14.0 => 11.14.0
    @emotion/styled: ~11.14.0 => 11.14.0
    @mui/icons-material: ~7.1.1 => 7.1.1
    @mui/lab: 7.0.0-beta.13 => 7.0.0-beta.13
    @mui/material: ~7.1.1 => 7.1.1
    @mui/system: ~7.1.1 => 7.1.1
    @mui/utils: ~7.1.1 => 7.1.1
    @mui/x-data-grid-premium: ~8.5.2 => 8.5.2
    @mui/x-license: ~8.5.2 => 8.5.2
    @mui/x-tree-view-pro: ~8.5.0 => 8.5.0
    @types/react: ~19.1.6 => 19.1.6
    react: ~19.1.0 => 19.1.0
    react-dom: ~19.1.0 => 19.1.0
    typescript: catalog:default => 5.8.2

Search keywords: columnsManagementRow,style override,styleOverrides

Order ID: 101098

[michelengelen]

@siriwatknp please correct me if I am wrong, but styleOverrides only creates styles for the root elements of component, right?

[michelengelen]

The reason this is not being available is because the Slot was not available from the styled function. This would fix it:

--- a/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx
+++ b/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx
@@ -282,7 +282,8 @@ function GridColumnsManagement(props: GridColumnsManagementProps) {
       <GridColumnsManagementScrollArea ownerState={rootProps}>
         <GridColumnsManagementBody className={classes.root} ownerState={rootProps}>
           {currentColumns.map((column) => (
-            <rootProps.slots.baseCheckbox
+            <GridColumnsManagementRow
+              as={rootProps.slots.baseCheckbox}
               key={column.field}
               className={classes.row}
               disabled={column.hideable === false || pivotActive}
@@ -433,4 +434,9 @@ const GridColumnsManagementEmptyText = styled('div', {
   font: vars.typography.font.body,
 });

+const GridColumnsManagementRow = styled('button', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementRow',
+})();
+
 export { GridColumnsManagement };

I'll open this up as a good first issue for the community to work on. 👍🏼
Thanks @flaviendelangle for pointing me to the right solution!

[dwrth]

Hi there, I would like to submit a PR for this

[brandongit2]

I would like to note that this is not the only time I've encountered slot styleOverrides not working. Can there be tests ensuring that every slot for every component works with styleOverrides? Should I file another issue for this?