Tailwind 风格似乎不适用于 NextJs 中的 Material-ui Drawer 组件内部

Question

我正在尝试使用 tailwind 在@mui/material/drawer组件内添加样式。

import { Close } from "@mui/icons-material";
import { Box, Drawer, IconButton, TextField } from "@mui/material";
import { useContext} from "react";
import { SearchContext } from "store/context";

export default function SearchDrawer() {
  const { search, setSearchMode } = useContext(SearchContext);

  return (
    <Drawer open={search.searchMode} anchor="bottom">

      <Box sx={{ height: "100vh" }} className="bg-red-500">
      <IconButton onClick={() => { setSearchMode(!search.searchMode); }}><Close/></IconButton>
        <div>
          <TextField variant="outlined" sx={{display: 'block'}}/>
          <TextField variant="outlined" sx={{display: 'block'}}/>
        </div>
      </Box>

    </Drawer>
  );
}

预期行为是

<Box sx={{ height: "100vh" }} className="bg-red-500">

这行代码将使整个屏幕变红，但什么也没有发生。 渲染后的输出 Tailwind 样式不适用于某些 Material-ui 组件，例如“抽屉”、“对话框”、“工具提示”。所有组件都悬停在其他组件上。

Tailwindcss 类在工具提示和对话框组件中不起作用 #33424 - GitHub

这个页面说修改material-ui主题，

        defaultProps: {
          container: rootElement,
        },
     },

但是rootElement在 Reactjs 中可用，如何在 Nextjs 上做到这一点。

Answer 1

这是官方文档中对我有用的：

1. 删除 Tailwind CSS 的预检样式，以便它可以使用 MUI 的预检样式 (CssBaseline)。

在您的文件tailwind.config.js中添加以下内容：

  //Remove Tailwind CSS's preflight style so it can use the MUI's preflight instead
  corePlugins: {
    preflight: false,
  },

2. 使用应用程序包装器的 id 添加重要选项。例如，#__next 代表 Next.js，“#root”代表 CRA：

在文件tailwind.config.js中添加以下内容（对于 nextjs 添加#__next）：

  //Add the important option, using the id of your app wrapper. For example, #__next for Next.js and "#root" for CRA
  important: '#__next',

你的文件tailwind.config.js应该像这样：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],

  //Add the important option, using the id of your app wrapper. For example, #__next for Next.js and "#root" for CRA
  important: '#__next',
  theme: {
    extend: {},
  },
  plugins: [],

  //Remove Tailwind CSS's preflight style so it can use the MUI's preflight instead
  corePlugins: {
    preflight: false,
  },
}

3. 修复 CSS 注入顺序。大多数 CSS-in-JS 解决方案将其样式注入 HTML 底部，这使得 MUI 优先于 Tailwind CSS。为了减少对重要属性的需求，您需要更改 CSS 注入顺序。以下是如何在 MUI 中完成此操作的演示：

import * as React from 'react';
import { StyledEngineProvider } from '@mui/material/styles';

export default function GlobalCssPriority() {
  return (
    <StyledEngineProvider injectFirst>
      {/* Your component tree. Now you can override MUI's styles. */}
    </StyledEngineProvider>
  );
}

您可以查看官方文档：https://mui.com/material-ui/guides/interoperability/#tailwind-css