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

[shahzebgit]

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

[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 😬
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. 🤔

[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

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 (
    <MaterialCssVarsProvider>
      <CssVarsProvider theme={{ [THEME_ID]: joyTheme }}>
        <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"><Users /></MainContent>} />
            </Routes>
          </Box>
        </Router>
      </CssVarsProvider>
    </MaterialCssVarsProvider>
  );
}

[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