search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.14k stars 1.29k forks source link

[DataGrid] Add variants to DataGridPro components theme definition #11317

Open kyle-seely opened 10 months ago

kyle-seely commented 10 months ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/zen-heyrovsky-fh6568

Steps:

  1. Create a custom theme with a MuiDataGrid variant

Current behavior

TS2353: Object literal may only specify known properties, and 'variants' does not exist in type '{ defaultProps?: Partial<DataGridProProps> | undefined; styleOverrides?: Partial<OverridesStyleRules<keyof GridClasses, "MuiDataGrid", Omit<Theme, "components">>> | undefined; }'. 12 | density: "compact", 13 | },

14 | variants: [ | ^^^^^^^^ 15 | { 16 | props: { density: "compact" }, 17 | style: {

Expected behavior

Variants should be added to the type definition to add custom datagrid variants.

Context

No response

Your environment

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: variants

michelengelen commented 10 months ago

Hey @kyle-seely and thanks for raising this issue. It is indeed an interesting use case you have here, so I'll loop in @DanailH for this.

@DanailH do you know if this might be possible with custom module augmentation as with the lab in material-ui: https://mui.com/material-ui/about-the-lab/#typescript

DanailH commented 10 months ago

mm I'm unsure but we can investigate what is possible.