[data grid] Toolbar button slotProps get overwritten by slotProps.baseButton

[KenanYusuf]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/focused-pike-nzz36y?file=%2Fsrc%2FDemo.tsx

Steps:

1. Set some button prop overrides on the data grid like: slotProps={{ baseButton: { variant: "contained", color: "primary" } }}
2. Add a custom toolbar and render a button e.g. GridToolbarColumnsButton
3. Add some button prop overrides on the toolbar button e.g. slotProps={{ button: { variant: "outlined", color: "secondary" } }}

Current behavior

The slotProps.baseButton props take precedence over the slotProps.button props on GridToolbarColumnsButton.

Expected behavior

When rendering individual buttons within the toolbar, I should be able to customize the button variant, color etc.

In the above example, the toolbar column button should be the outlined variant and secondary color.

I haven't dived into this too much, but I think we need to switch the order of {...buttonProps} and {...rootProps.slotProps?.baseButton} on these buttons:
https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx#L72-L74

Context

Trying to style toolbar buttons differently to the other buttons in the UI.

Your environment

No response

Search keywords: data grid slotProps baseButton toolbar button props