[data grid] Not able to target `.MuiDataGrid-menu` styling via columnMenu slotprop

[jinsley8]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-rsgyfy-lkglms?file=Demo.tsx

Steps:

1. backgroundColor style in the slotProps for columnMenu applies to .MuiDataGrid-menuList but I need to target parent div with class . MuiDataGrid-menu
2. Open a column sort menu (3 dot icon in column header) and review where the red background is applied

Current behavior

Adding backgroundColor style to the columnMenu slot on the data-grid applies styling to .MuiDataGrid-menuList but I need to apply styling to its parent div with .MuiDataGrid-menu class.

<DataGrid
    slotProps={{
        columnMenu: {
            sx: {
                backgroundColor: 'red',
            },
        },
    }}
/>

Expected behavior

I expected styling the root for columnMenu slotProp would have styled the root of the menu and not the list wrapper within.

I could style .MuiDataGrid-menuList to add a box-shadow but it's parent div .MuiPaper-root has a box-shadow already so I need to change this or it would have double box-shadow on the column menu.

Context

I want to style the menu border-radius and box-shadow

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.5 Binaries: Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node npm: 10.7.0 - ~/.nvm/versions/node/v20.11.1/bin/npm pnpm: 9.2.0 - /opt/homebrew/bin/pnpm Browsers: Chrome: 126.0.6478.61 Edge: 126.0.2592.56 Safari: 17.5 npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.20 @mui/icons-material: 5.15.20 => 5.15.20 @mui/material: 5.15.20 => 5.15.20 @mui/material-nextjs: 5.15.11 => 5.15.11 @mui/private-theming: 5.15.20 @mui/styled-engine: 5.15.14 @mui/system: 5.15.20 @mui/types: 7.2.14 @mui/utils: 5.15.20 @mui/x-data-grid: 6.19.6 => 6.19.6 @mui/x-date-pickers: 6.19.6 => 6.19.6 @types/react: ^18.3.3 => 18.3.3 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 typescript: ^5.4.5 => 5.4.5 ```

Search keywords: columnMenu,MuiDataGrid-menu,data-grid

[michelengelen]

Hey @jinsley8 ... you need to use columnsPanel as slot now, since we did change the structure of it slightly and added a wrapper to it. Here is the section in the migration docs going over the specifics: https://mui.com/x/migration/migration-data-grid-v6/#columns

So in order to change the background color of the menus you can use this pattern:

slotProps={{
  columnsPanel: {
    sx: {
      backgroundColor: 'red',
    },
  },
}}

Hope this helps!

[jinsley8]

@michelengelen sorry my demo was on v7 but my project is v6.20.1.

I changed the StackBlitz demo to reflect your solution but columnsPanel still does not affect that specific .MuiDataGrid-menu class.

The v6 docs show that ColumnsPanel is a slot though as you suggested.

[michelengelen]

@michelengelen sorry my demo was on v7 but my project is v6.20.1.

no problem!

I changed the StackBlitz demo to reflect your solution but columnsPanel still does not affect that specific .MuiDataGrid-menu class.

Well, if you need to specifically target the .MuiDataGrid-menu class you can do it like this:

basePopper: {
  sx: {
    [`&.${gridClasses.menu}`]: {
      background: 'red',
    },
  },
},

Although this will lead to strange behavior as there is a transistion going on and the content has its own background, etc.

To style the content of the column header menu you should try this:

// other imports
import { SxProps, Theme } from '@mui/monorepo/packages/mui-system';

declare module '@mui/x-data-grid' {
  interface ColumnMenuPropsOverrides {
    sx: SxProps<Theme>;
  }
}

// ...

return (
  <DataGrid
    rows={rows}
    columns={columns}
    slotProps={{
      columnMenu: {
        sx: {
          background: 'red',
        },
      },
    }}
  />
);

the module augmentation at the top is a workaround since it is not included in the original type although it does get applied

The v6 docs show that ColumnsPanel is a slot though as you suggested.

I am very sorry ... I mixed the change up: v6 => columnsPanel and v7 => columnsManagement 🙇🏼

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.