[docs] Improve theme augmentation documentation

[MiguelG97]

Latest version

• [X] I have tested the latest version

Steps to reproduce

Link to live example: (required)

Steps: import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  mixins: {
    MuiDataGrid: {
      // Pinned columns sections
      pinnedBackground: '#340606',
      // Headers, and top & bottom fixed rows
      containerBackground: '#343434',
    },
  },
});

The createTheme does not contain a field for MuiDataGrid

Current behavior

The createTheme does not contain a field for MuiDataGrid

Expected behavior

intellisense enable and field available

Context

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  mixins: {
    MuiDataGrid: {
      // Pinned columns sections
      pinnedBackground: '#340606',
      // Headers, and top & bottom fixed rows
      containerBackground: '#343434',
    },
  },
});

MuiDataGrid field is not enable nor available

Your environment

"@mui/material": "^5.16.6",
"@mui/styled-engine-sc": "^6.0.0-alpha.18",
"@mui/x-data-grid": "^7.12.0",
"@emotion/react": "^11.13.0",
"@emotion/styled": "^11.13.0",

Search keywords: MuiDataGrid

[MiguelG97]

apparently doing this import fixed the issue:

import type {} from "@mui/x-data-grid/themeAugmentation";

reference: https://stackoverflow.com/questions/69608945/fix-typescript-error-when-customizing-muidatagrid-in-createtheme

However, I don't think we should need to do that extra step as is either not documented

[oliviertassinari]

It's about https://mui.com/x/react-data-grid/getting-started/#typescript?

[oliviertassinari]

Actually, per https://github.com/mui/material-ui/issues/40996, I think that we should update the docs in MUI X and remove all mentions of TypeScript v3: https://github.com/search?q=org%3Amui+%22TypeScript+3.x%22&type=code.

Seeing this:

triggered me.

Moved to #14239

[flaviendelangle]

If someone changes how we phrase the theme augmentation, please do the same for the other X components :pray:

[michelengelen]

I'll add this to the board, so we don't lose track of this! @samuelsycamore FYI

[github-actions[bot]]

:warning: 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.

@MiguelG97: 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.

[MiguelG97]

I see, my bad. I believe it would help if you guys include this: https://mui.com/x/react-data-grid/getting-started/#typescript

in the "datagrid > style" section too

[oliviertassinari]

I believe it would help if you guys include this:

https://mui.com/x/react-data-grid/style/#theme-header-and-pinned-sections right, yeah, this sounds wise 👍. I think that we can consider this the root problem. So updating this docs to also cover TypeScript should do it.