React应用中能否同时使用Joy UI与Material UI？如何实现？

完全可以在同一个React应用中同时使用Material UI和Joy UI，二者同属MUI官方维护的组件生态，底层共用同一套样式引擎与基础能力，不存在本质的兼容性问题。

1. 安装对应依赖 #

首先要保证所有@mui开头的依赖版本号完全对齐——如果你的项目里已经使用的Joy UI是5.x正式版，安装的Material UI也必须对应5.x版本，否则会出现上下文不匹配、样式报错等问题。
如果你的项目已经安装了@emotion/react、@emotion/styled（Joy UI默认依赖这两个包），直接执行以下命令安装Material UI即可：
npm install @mui/material
如果还没装过上述emotion依赖，补装对应包即可：
npm install @mui/material @emotion/react @emotion/styled

2. 主题层配置（最容易踩坑的环节） #

两个库的ThemeProvider是独立维护的，不能将Material UI的主题配置传入Joy UI的ThemeProvider，反之亦然。推荐通过嵌套Provider的方式注入两套主题，你还可以直接复用已有Joy主题的设计token（比如主色、圆角、间距值），保证两个库的组件视觉风格统一。
配置示例：

// 注意给两个ThemeProvider起别名，避免命名冲突
import { ThemeProvider as JoyThemeProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/joy/CssBaseline'; // 继续使用你项目里原有的Joy全局样式重置即可
import { ThemeProvider as MuiThemeProvider, createTheme as createMuiTheme } from '@mui/material/styles';
// 引入你项目里已经配置好的Joy主题
import existingJoyTheme from './theme/joy';

// 单独配置Material UI主题
const muiTheme = createMuiTheme({
  palette: {
    // 直接复用Joy主题的色值，避免视觉割裂
    primary: existingJoyTheme.palette.primary,
    neutral: existingJoyTheme.palette.neutral,
  },
  shape: {
    borderRadius: existingJoyTheme.radius.md, // 复用Joy的圆角配置
  }
});

function App() {
  return (
    // 外层放MUI的主题Provider
    <MuiThemeProvider theme={muiTheme}>
      {/* 内层放原有Joy的主题Provider，保证原有组件样式不受影响 */}
      <JoyThemeProvider theme={existingJoyTheme}>
        <CssBaseline />
        {/* 你的应用路由、全局组件、页面内容都放在这里 */}
      </JoyThemeProvider>
    </MuiThemeProvider>
  );
}

注意：不要同时引入Material UI和Joy UI的CssBaseline组件，二者都是全局样式重置组件，同时加载会导致基础样式冲突，保留你项目原有在用的那一个即可。

如果出现样式优先级错乱、自定义样式被覆盖的问题，可以在最外层套一层StyledEngineProvider开启优先注入配置：

import { StyledEngineProvider } from '@mui/material/styles';

// 根组件包裹
<StyledEngineProvider injectFirst>
  {/* 上述两个ThemeProvider和应用内容 */}
</StyledEngineProvider>

这个配置会让MUI的默认样式最先注入，后续的Joy样式、自定义样式优先级更高，不会被默认样式覆盖。

3. 组件使用规范 #

两个库的组件从各自的入口单独引入即可，不存在命名空间冲突，为了方便区分可以给组件加别名：

// 分别引入两个库的按钮组件
import JoyButton from '@mui/joy/Button';
import MuiButton from '@mui/material/Button';

// 业务代码里按需使用即可
function DemoPage() {
  return (
    <div>
      <JoyButton>原有Joy样式按钮</JoyButton>
      <MuiButton>新增的Material UI按钮</MuiButton>
    </div>
  )
}

弹窗、下拉菜单、提示这类用Portal渲染的组件，只要在对应ThemeProvider的子树内使用，就不会出现上下文丢失、样式异常的问题。

• 版本升级时必须把所有@mui开头的依赖同步升级到同一版本，不要单独升级某一个包，避免底层依赖不兼容。
• 不建议在同一个功能模块里混用两个库的同类表单组件（比如同时用Joy的Input和MUI的Input做同一个表单），容易出现交互逻辑、校验样式不统一的问题。
• 尽量在MUI主题里复用Joy主题的设计token，避免两套组件出现视觉风格割裂。

内容的提问来源于stack exchange，提问作者Mahmoud Mousa Hamad