Override Theme for MUI DatePicker Pro

Question

I am trying to add CSS changes to my theme for MUIX components and it seems like I am getting type errors. For this example we will use for DatePicker Component. According to the docs I should be able to do the following:

import { create theme, ThemeOptions } from ‘@mui/material/styles’;

const MyTheme: ThemeOptions = createTheme({
  components: {
    MuiPickersToolbar: {
      …
    }
  }
})

But the MuiPickersToolbar lights up red with a type error:

Object literal may only specify known properties, and `MuiPickersToolbar` does not exist in type ‘Components<Omit<Theme, “components”>>’

In my package.json I have the following peerDependencies

“@emotion/react”: “>=11.11.3”,
“@mui/material”: “>=5.15.7”,
“@mui/x-date-pickers-pro”: “>=6.19.3”

Not sure what I am missing here

Answer 1

You need to add the following import:

import type {} from '@mui/x-date-pickers-pro/themeAugmentation';

You can find the documentation about this here:

https://mui.com/x/react-date-pickers/base-concepts/#typescript

Related answer: Fix Typescript error when customizing MuiDataGrid in createTheme