[question] How does one theme CalendarPicker from @mui/lab?

[yay]

The problem in depth 🔍

Hi,

I'm trying to theme the @mui/lab/CalendarPicker component but not having much success:

This used to work in the previous versions but not anymore once I've upgraded to the following:

  "dependencies": {
    "@emotion/react": "11.11.1",
    "@emotion/styled": "11.11.0",
    "@mui/base": "5.0.0-beta.19", // from 5.0.0-alpha.87
    "@mui/lab": "5.0.0-alpha.148", // from 5.0.0-alpha.80
    "@mui/material": "5.14.13", // from 5.8.6
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/react": "18.2.28",
    "@types/react-dom": "18.2.13",
    "typescript": "5.2.2",
  }

The LabComponents interface is missing the entry for the MuiCalendarPicker. How would I theme the CalendarPicker component after upgrading?

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: macOS 13.6 Binaries: Node: 18.16.1 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/jpmc/npm/bin/bin/yarn npm: 8.16.0 - /usr/local/jpmc/npm/bin/bin/npm Browsers: Chrome: 117.0.5938.149 Edge: Not Found Firefox: 115.3.0 Safari: 17.0 npmPackages: @emotion/react: 11.11.1 => 11.11.1 @emotion/styled: 11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.17 => 5.0.0-beta.17 @mui/core-downloads-tracker: 5.14.12 @mui/icons-material: 5.14.11 => 5.14.11 @mui/lab: 5.0.0-alpha.146 => 5.0.0-alpha.146 @mui/material: 5.14.11 => 5.14.11 @mui/styled-engine: 5.14.12 @mui/styles: 5.14.11 => 5.14.11 @mui/system: 5.14.12 @mui/utils: 5.14.12 @mui/x-data-grid: 6.10.1 @mui/x-data-grid-premium: 6.10.1 => 6.10.1 @mui/x-data-grid-pro: 6.10.1 @mui/x-license-pro: 5.15.0 => 5.15.0 @types/react: 18.2.25 => 18.2.25 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 5.1.6 => 5.1.6 ```

Search keywords: MuiCalendarPicker theme Components styles Order ID: 48149

[flaviendelangle]

Hi,

@mui/lab do not contain the pickers anymore since @mui/lab@5.0.0-alpha.90

You can find the migration guide {here](https://mui.com/x/migration/migration-pickers-lab/) to use the new package.

[LukasTy]

Closing this issue as the situation has been detailed in https://github.com/mui/mui-x/issues/10643#issuecomment-1759281203. The behavior is expected. Consider upgrading to @mui/x-date-pickers to continue using the latest pickers package version.

[yay]

What happened to the DataPicker's renderInput prop? The docs don't mention what to replace it with.

[LukasTy]

What happened to the DataPicker's renderInput prop? The docs don't mention what to replace it with.

The migration from renderInput is detailed here. Basically, it has been replaced with slotProps.textField for simple modifications and slots.textField in case of major changes to what you want to render as the input. What are you having problems with in particular?