Next.js中Material-UI Drawer组件内Tailwind样式无法生效的解决咨询

问题原因 #

MUI的Drawer、Dialog、Tooltip这类悬浮组件默认会将元素挂载到document.body下，而Next.js中Tailwind的样式作用域默认覆盖#__next根元素内的节点，导致组件内的Tailwind类无法生效。

全局解决方案（推荐） #

在Next.js的全局入口文件（pages/_app.js/pages/_app.tsx 或 App Router下的app/_app.js/app/_app.tsx）中，修改MUI主题配置，统一设置这些组件的挂载容器为Next.js根元素：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import Drawer from '@mui/material/Drawer';
import Dialog from '@mui/material/Dialog';
import Tooltip from '@mui/material/Tooltip';

// 获取Next.js的根元素节点
const getRootContainer = () => document.getElementById('__next');

// 自定义MUI主题，配置悬浮组件的默认容器
const customTheme = createTheme({
  // 保留你原有的主题配置（如调色板、排版等）
  components: {
    MuiDrawer: {
      defaultProps: {
        container: getRootContainer,
      },
    },
    MuiDialog: {
      defaultProps: {
        container: getRootContainer,
      },
    },
    MuiTooltip: {
      defaultProps: {
        container: getRootContainer,
      },
    },
    // 其他类似的悬浮组件（如Popover等）也可在此添加配置
  },
});

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={customTheme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

单个组件局部解决方案 #

如果只需要针对某个组件单独处理，可以直接在组件内指定container属性：

import Drawer from '@mui/material/Drawer';
import Box from '@mui/material/Box';

export default function SearchDrawer() {
  const rootContainer = document.getElementById('__next');

  return (
    <Drawer open={true} container={rootContainer}>
      <Box className="bg-red-500 w-full h-full">
        {/* 内容 */}
      </Box>
    </Drawer>
  );
}

验证效果 #

配置完成后，重新启动Next.js项目，Drawer内的bg-red-500类即可正常生效，其他悬浮组件内的Tailwind样式也会同步恢复正常。

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