Material UI 中的按钮在加载时是透明的

Question

每次我使用 Material UI 开始一个新项目时，我都会遇到同样的问题，按钮忽略其原色。加载时有一秒钟，背景颜色清晰可见，但之后按钮是透明的。

我已经安装了所有必需的软件包：

npm install @mui/material @emotion/react @emotion/styled

只需放置一个像这样的按钮：

import {Button} from "@mui/material";
<Button variant="contained" color="primary">Contained</Button>

编辑： 我发现如果我从 globals.css 中删除以下行，Material UI 就会正常工作。但我需要这个，因为我们还将使用顺风进行造型

@tailwind base;
@tailwind components;
@tailwind utilities;

Answer 1

您必须在 TailwindCSS 配置中禁用预检，以防止默认值覆盖 MUI 样式：

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  }
}

如果您还没有这样做，那么如果您打算使用外部样式表以便使用 TailwindCSS 可靠地设置 MUI 组件的样式，则还应该遵循MUI 说明来更改 CSS 注入顺序。