mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.57k stars 1.35k forks source link

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

Closed TooMuchLagWillKillYou closed 4 months ago

TooMuchLagWillKillYou commented 4 months ago

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 commented 4 months ago

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 :+1:

TooMuchLagWillKillYou commented 4 months ago

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

flaviendelangle commented 4 months ago

Awesome, closing the issue then :+1:

github-actions[bot] commented 4 months ago

:warning: 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.