Fix Typescript error when customizing MUI X Data Grid in createTheme

Question

I want to customize my DataGridPro table (MUI component) in the theme. However, when I MuiDataGrid to components object, I get a TS error:

Object literal may only specify known properties, and 'MuiDataGrid' does not exist in type 'Components'.ts(2322)

Codesandbox: https://codesandbox.io/s/datagriddemo-material-demo-forked-vedcm

How do I fix the error? I spent 2 hours looking everywhere without success.

Answer 1

I got answer to this question on MUI github issue page: https://github.com/mui-org/material-ui-x/issues/1755#issuecomment-945650984

The solution is to import theme augmentation like so:

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

as described in: https://mui.com/components/data-grid/getting-started/#typescript