[data grid] GridToolbarExport does not consider color and size props anymore

[lukaskoeller]

Steps to reproduce

Link to live example: (required)

Working example in v6.20.3: https://stackblitz.com/edit/react-z2fhwt-xbwn2b?file=Demo.tsx
Reproduction in v7.10: https://stackblitz.com/edit/react-z2fhwt?file=Demo.tsx

Steps:

1. Make use of the <GridToolbarExport> in the toolbar of the <DataGrid> component
2. Apply color="secondary" and size="medium" to <GridToolbarExport>
3. See that the <GridToolbarExport> still has the primary and small props applied

Current behavior

Although <GridToolbarExport color="secondary" size="medium">Download</GridToolbarExport> different props were applied, they have no effect in the UI

Expected behavior

In the latest v6, color="secondary" size="medium" are applied as expected.

Context

I'm trying to customize the styling of the <GridToolbarExport>

Your environment

System:
OS: macOS 14.3.1
Binaries:
Node: 20.10.0 - /usr/local/bin/node
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.13.1 - ~/Documents/work/shipzero_frontend_2.0/node_modules/.bin/pnpm
Browsers:
Chrome: 126.0.6478.127
Edge: Not Found
Safari: 17.3.1
npmPackages:
@emotion/react: ^11.11.3 => 11.11.3
@emotion/styled: ^11.11.0 => 11.11.0
@mui/core-downloads-tracker: 5.15.20
@mui/icons-material: ^5.16.1 => 5.16.1
@mui/lab: 5.0.0-alpha.172 => 5.0.0-alpha.172
@mui/material: ^5.16.1 => 5.16.1
@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.16.1 => 5.16.1
@mui/x-data-grid-premium: 6.20.1
@mui/x-data-grid-pro: ^7.10.0 => 7.10.0
@mui/x-date-pickers-pro: ^7.10.0 => 7.10.0
@mui/x-license: ^7.10.0 => 7.10.0
@mui/x-license-pro: 6.10.2
@types/react: ^18.2.43 => 18.2.46
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.2.2 => 5.3.3

Browser: Chrome Version 126.0.6478.127 (Official Build) (arm64)

Search keywords: DataGrid, GridToolbarExport
Order ID: 94289

[michelengelen]

Hey @lukaskoeller
It does work if you use slotProps.button on the GridToolbarExport component:

<GridToolbarExport
  slotProps={{ button: { color: 'secondary', size: 'small', variant: 'outlined' } }}
>

Let me check where we introduced the switch to slotProps

[michelengelen]

It seems the change got introduced in #11357 and we documented it in the v7 migration docs here.

[lukaskoeller]

It seems the change got introduced in #11357 and we documented it in the v7 migration docs here.

Oh ok, missed that. Sorry, my mistake. Thanks for pointing to the respective part of the migration docs @michelengelen.

I will close the issue on that behalf

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@lukaskoeller: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.