[pickers] StaticDatePicker throws an error when used inside <CssVarsProvider> from Joy UI

[TooMuchLagWillKillYou]

Steps to reproduce

Link to live example: demo to reproduce

Steps:

1. open the App.js file
2. comment the component inside the tags and uncomment the one outside to see it working
3. do the opposite to see it breaking

Current behavior

I have notice that when you put <StaticDatePicker /> inside <CssVarsProvider> a bunch of errors are thrown. The first one says "Cannot read properties of undefined (reading 'duration')".

I tried the same thing with the basi component and the result is the same, though I haven't tested with the other type of pickers.

In the demo provided you can see that when <StaticDatePicker /> is placed outside <CssVarsProvider> it work flawlessy.
Is this expected? What could be the drawback of not wrapping the application in <CssVarsProvider>?

Expected behavior

I would expect no errors even if the <StaticDatePicker /> component is inside <CssVarsProvider>

Context

I am developing a React application bundled with the latest version of Vite. I usually use Microsoft Edge but I was able to reproduce the issue with Chrome.

I also have tried to update every single dependency but the output is the same

Your environment

npx @mui/envinfo

 System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 22.0.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (126.0.2592.87)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.5 => 11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.16.0
    @mui/icons-material: ^5.16.0 => 5.16.0
    @mui/joy: ^5.0.0-beta.47 => 5.0.0-beta.47
    @mui/material: ^5.16.0 => 5.16.0
    @mui/private-theming:  5.16.0
    @mui/styled-engine:  5.15.14
    @mui/system:  5.16.0
    @mui/types:  7.2.14
    @mui/utils:  5.16.0
    @mui/x-date-pickers: ^7.9.0 => 7.9.0
    @types/react: ^18.3.3 => 18.3.

Search keywords: datepicker, vite, mui/joy

[flaviendelangle]

Hi,

When you use CssVarsProvider, the Joy UI theme is overriding the Material UI theme (which contains some transitions the pickers are using).
It looks like theme scoping solves the issue here, you can apply it to the ThemeProvider at the root of your application or add one if you don't have any.

Here is the updated demo, please let me know if it solves your problem 👍

[TooMuchLagWillKillYou]

It did solve my problem, plus I have found this page in the docs that can be helpful

[flaviendelangle]

Awesome, closing the issue then 👍

[github-actions]

⚠️ 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.

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