[pickers] Page fails to load Date Picker Component with Joy UI using CssVarsProvider Wrapper

[shahzebgit]

Steps to reproduce

Link to live example: (required)

Steps:

1. Use CssVarsProvider Wrapper in your top level component as a wrapper.
2. Add basic Date Picker Component from MUI X(v7).
3. Add the component in between CssVarsProvider Wrapper and the page crashes.

Current behavior

Crash errors whenever i try to use DatePicker component in any of my component.

Turns out using CssVarsProvider wrapper causes it to crash.

App.js

export default function App () {
  return (
    <CssVarsProvider disableTransitionOnChange>
      <CssBaseline />
      <Router>
        <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
          <Header />
          <Sidebar />
          <Routes>
            <Route path="/" element={<Navigate to="/listing" replace />} />
            <Route path="/home" element={<MainContent title="Home"><Development /></MainContent>} />
            <Route path="/dashboard" element={<MainContent title="Dashboard"><Development /></MainContent>} />
            <Route path="/listing" element={<MainContent title="Listing"><OrderTable /></MainContent>} />
            <Route path="/users" element={<MainContent title="Users"><EdgarUsers /></MainContent>} />
          </Routes>
        </Box>
      </Router>
    </CssVarsProvider>
  );
}

CreateUser.tsx Parent Component

const CreateUser: React.FC<UserModalProps> = () => {
//... other code
<Modal>
   <Sheet>
{
  fields.map(({ name, label, placeholder, type }) => (
    <FormControl key={name} sx={{ mb: 1 }}>
      <FormLabel sx={{ marginBottom: "4px" }}>{label}</FormLabel>
      // ....other code
      {type == "date" && <CustomDatePicker label="Choose a date" onDateChange={handleDateChange} />}
      //... other code
    </FormControl>
  ));
}
//... other code
  </Sheet>
</Modal>
}

I have imported that to my parent component in a modal.

CustomDatePicker.tsx

import React, { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { Button, Modal, Box, Typography } from '@mui/material';
import { Dayjs } from 'dayjs';

interface CustomDatePickerProps {
  label?: string;
  onDateChange?: (date: Dayjs | null) => void;
}

const CustomDatePicker: React.FC<CustomDatePickerProps> = ({
  label = 'Select Date',
  onDateChange,
}) => {
//... other code
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
        <Box
        >
          <Typography variant="h6" component="h2" sx={{ mb: 2 }}>
            {label}
          </Typography>
          <DatePicker
            label={label}
            value={selectedDate}
            onChange={handleDateChange}
            sx={{ width: '100%', mb: 2 }}
          />
        </Box>
    </LocalizationProvider>
  );
};

export default CustomDatePicker;

Expected behavior

I was expecting it to show a view just like its shown here

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa) Binaries: Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm pnpm: Not Found Browsers: Chrome: 126.0.6478.182 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.4 @mui/icons-material: ^5.16.1 => 5.16.1 @mui/joy: ^5.0.0-beta.36 => 5.0.0-beta.48 @mui/material: ^5.16.4 => 5.16.4 @mui/private-theming: 5.16.4 @mui/styled-engine: 5.16.4 @mui/system: 5.16.4 @mui/types: 7.2.15 @mui/utils: 5.16.4 @mui/x-date-pickers: ^7.10.0 => 7.10.0 @types/react: 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.5.3 => 5.5.3 ```

Search keywords: CssVarsProvider, datepicker, mui/joy

[LukasTy]

Hello @shahzebgit. Could you please check our demo using Joy UI as a reference for configuration? Please also check this documentation for more information about using @mui/material and @mui/joy together.

Does it help you resolve the problem? 🤔

[shahzebgit]

Hello @LukasTy ,

Could you please check our demo using Joy UI as a reference for configuration?

Oh, nice this actually works pretty well. Thank you, could be a good way to mention this in Date Picker docs. if people are using Joy UI

used MaterialCssVarsProvider at top level to sync the theme too.

App.js

```js import { Experimental_CssVarsProvider as MaterialCssVarsProvider } from '@mui/material/styles'; import { extendTheme as extendJoyTheme, THEME_ID } from '@mui/joy/styles'; const joyTheme = extendJoyTheme(); export default function App () { return (

} /> } /> } /> } /> } /> ); } ```

[michelengelen]

Would a dedicated section of using a different styling system be a thing @LukasTy ? I agree that discoverability of this is not ideal atm

[flaviendelangle]

This issue looks a lot like #13799 It's funny to see 2 issues related to Joy in such a small amount of time.

@michelengelen the issues here seems very related to Joy UI, not sure if we can document something more general, and given the current trend with Joy UI not sure it's worth investing time in it either :grimacing: We have an ongoing OKR about supporting other Design System, I would be in favor of advancing in this direction rather than documenting the current state of things (which sucks to be honest).

We could link to this page in our demos that use Joy UI, but I would not invest to much time building a complex demo that would probably because outdated in the coming months.

[LukasTy]

I completely agree with @flaviendelangle on this one. Let's add a link to the Joy page in the relevant docs, but in the current state, I would like to keep relying on the search for discoverability. 🤔