MUI X Date Pickers Pro not working with Joy UI

Question

MUI X Date Pickers Pro is currently not working with Joy UI. Undefined property errors appear.

Link to live example: https://codesandbox.io/s/mui-joy-mui-x-date-pickers-pro-not-working-vmzlvy?file=/src/App.tsx

Example:

<CssVarsProvider>
  <CssBaseline />

  <LocalizationProvider dateAdapter={AdapterDayjs}>
    {/* No error if DateRangePicker or CssVarsProvider is removed */}
    <DateRangePicker/>
  </LocalizationProvider>
</CssVarsProvider>

Versions:

• "@emotion/react": "11.10.6",
• "@emotion/styled": "11.10.6",
• "@mui/joy": "5.0.0-alpha.70",
• "@mui/material": "5.11.12",
• "@mui/x-date-pickers-pro": "6.0.1"

I've opened an issue here: https://github.com/mui/material-ui/issues/36506

Answer 1

Problem was because of breaking changes in #35739. Had to merge mui theme like is done here: Joy UI feat. Material UI sandbox

Answer 2

You need theme scoping to use Material UI and Joy UI together.

import {
  Experimental_CssVarsProvider as MaterialCssVarsProvider,
  experimental_extendTheme as extendMaterialTheme,
  THEME_ID
} from "@mui/material/styles";

const materialTheme = extendMaterialTheme();

<MaterialCssVarsProvider theme={{ [THEME_ID]: materialTheme }}>
  <CssVarsProvider>
    <CssBaseline />

    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateRangePicker
        localeText={{ start: "Check-in", end: "Check-out" }}
      />
      <Button>It works!</Button>
   </LocalizationProvider>
 </CssVarsProvider>
</MaterialCssVarsProvider>

Here is the working sandbox based on your: https://codesandbox.io/s/mui-joy-mui-x-date-pickers-pro-not-working-forked-6jwdi0?file=/src/App.tsx