[datagrid] Changing GridToolbarFilterButton
variant
#10409
Labels
breaking change
component: data grid
This is the name of the generic UI component, not the React module!
customization: css
Design CSS customizability
plan: Premium
Impact at least one Premium user
v7.x
Duplicates
Latest version
Steps to reproduce 🕹
Steps:
snippet of actual code in my project
![image](https://private-user-images.githubusercontent.com/56496547/269328704-82c4a79a-3ace-42d0-b5cd-4c5567c9d669.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MDg5MzUsIm5iZiI6MTcyNDYwODYzNSwicGF0aCI6Ii81NjQ5NjU0Ny8yNjkzMjg3MDQtODJjNGE3OWEtM2FjZS00MmQwLWI1Y2QtNGM1NTY3YzlkNjY5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE3NTcxNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFkYjE3ZDUzYjEwNzU0NTJiYjViNTY0ZDA2N2VmMGQ4MTE5NjVmNWY1ZThiNTcxMDFiNWJmODRkYWNlMzRjMjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.9CcDDi0_JUHjv5rS14OueRjNKaKt0TFuR7WAGuAFLBA)
Current behavior 😯
The Typescript compiler/IDE highlights the 'variant' prop on the GridToolbarFilterButton as an invalid prop but renders correctly. Changing the variant prop will change the look of the button as expected.
The other buttons in this custom toolbar also contain the same variant prop but do not throw an error
Expected behavior 🤔
I expect the GridToolbarFilterButton to act like the other buttons and accept the variant prop without triggering Typescript compiling error or for the data grid component to reject the prop (and varient changes) if it truly is an invalid prop.
Context 🔦
I am implementing a data grid to show various user data to supervisors.
I would like all buttons to share the same 'outlined' styling/hover effects (leveraging the prop) but if I do, the typescript error throw will impact development because each time my application renders I am forced to close out the error. This is also a block from running a build because my typescript config is setup to prevent it. My work around is to remove the prop during development/building and just informing my team that mismatch styling will hopefully be addressed later.
Your environment 🌎
npx @mui/envinfo
Order ID or Support key 💳 (optional)
No response
The text was updated successfully, but these errors were encountered: