在Joy UI的CssVarsProvider中使用MUI X日期选择器时崩溃

问题详情 #

• 所有使用MUI X DatePicker的场景都会触发崩溃，经排查，问题根源是应用被Joy UI的CssVarsProvider全局包裹。
• 错误截图：
  

依赖配置 #

"dependencies": {
  "@emotion/react": "^11.11.4",
  "@emotion/styled": "^11.11.5",
  "@hookform/resolvers": "^3.6.0",
  "@mui/icons-material": "^5.16.1",
  "@mui/joy": "^5.0.0-beta.36",
  "@mui/material": "^5.16.4",
  "@mui/x-date-pickers": "^7.10.0",
  "date-fns": "^3.6.0",
  "dayjs": "^1.11.11",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-hook-form": "^7.52.0",
  "react-router-dom": "^6.24.1",
  "react-scripts": "^5.0.1",
  "typescript": "^5.5.3",
  "web-vitals": "^2.1.4"
},

相关代码片段 #

应用入口（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"><Users /></MainContent>} />
          </Routes>
        </Box>
      </Router>
    </CssVarsProvider>
  );
}

CreateUser.tsx中引入DatePicker #

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>
}

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;

解决方案 #

1. 为Material UI组件单独提供ThemeProvider #

Joy UI的CssVarsProvider会全局注入CSS变量，覆盖Material UI（及MUI X）所需的样式变量，导致DatePicker崩溃。给使用Material UI/MUI X的部分单独包裹Material的ThemeProvider，隔离样式作用域：

import { ThemeProvider, createTheme } from '@mui/material/styles';
const materialTheme = createTheme();

export default function App () {
  return (
    <CssVarsProvider disableTransitionOnChange>
      <CssBaseline />
      <Router>
        <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
          <Header />
          <Sidebar />
          {/* 为Material UI/MUI X组件单独包裹ThemeProvider */}
          <ThemeProvider theme={materialTheme}>
            <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>
          </ThemeProvider>
        </Box>
      </Router>
    </CssVarsProvider>
  );
}

2. 拆分全局样式包裹范围 #

不要用Joy UI的CssVarsProvider包裹整个应用，仅在使用Joy UI组件的部分（如Header、Sidebar）包裹它，Material UI/MUI X的部分使用自己的ThemeProvider：

import { ThemeProvider, createTheme } from '@mui/material/styles';
const materialTheme = createTheme();

export default function App () {
  return (
    <Router>
      <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
        {/* 仅Joy UI组件使用CssVarsProvider */}
        <CssVarsProvider disableTransitionOnChange>
          <Header />
          <Sidebar />
        </CssVarsProvider>
        {/* Material UI/MUI X组件使用自己的ThemeProvider */}
        <ThemeProvider theme={materialTheme}>
          <CssBaseline />
          <Routes>
            {/* 路由内容 */}
          </Routes>
        </ThemeProvider>
      </Box>
    </Router>
  );
}

3. 升级依赖版本 #

当前Joy UI处于beta版本，可能存在兼容性问题，尝试升级Joy UI到最新稳定版，同时确保MUI X版本与Material UI版本匹配（MUI X v7对应Material UI v5，版本号需保持兼容）。

说明 #

MUI X的DatePicker依赖Material UI的样式系统，而Joy UI的CssVarsProvider会全局修改CSS变量，两者的样式变量冲突导致组件崩溃。上述方案通过隔离样式作用域或调整依赖版本解决冲突，使DatePicker能够正常渲染，达到官方示例的效果。

内容的提问来源于stack exchange，提问作者SDP