在 NextJS 项目中使用 Tailwind 和 MUI 时出现意外行为（白色按钮错误）

Question

我目前正在使用 NextJS、TailwindCSS 和 MUI React UI 库构建一个项目。

每当我尝试向我的项目添加 MUI 按钮时，它工作正常，但按钮的颜色保持白色。

悬停时颜色恢复正常，单击按钮时仍然具有波纹效果。但当不悬停时，它会返回白色。

通过从我在 _app.{js,jsx.ts,tsx} 文件中导入的全局 css 文件中删除 tailwind 指令，该按钮再次正常工作，但这也将删除 TailwindCSS。

有没有办法在保留指令的同时修复它？或者可能使用另一种方法包含 tailwind CSS？

更新（15/8/2022）

MUI 团队现在添加了对 tailwind CSS 的支持，请点击此链接获取说明 https://mui.com/material-ui/guides/interoperability/#tailwind-css

Answer 1

这里的问题是 tailwinds preflig 在添加时实现了以下样式

@tailwind base;

到你的样式表：

button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

这比material-ui 的背景颜色定义更具体。

您可以通过删除“@tailwind base;”来解决此问题 从您的样式并实现您自己的重置样式表，但这还有其他缺点： https ://tailwindcss.com/docs/preflight

Answer 2

我强烈建议不要这样做。我会选择一个 CSS 框架或库并坚持使用它，因为您很可能会遇到样式冲突的问题。一些框架使用相同的 css 类，但幕后的代码不同，这意味着您会遇到冲突。如果您习惯于使用 Tailwind，我保证您会对 Material UI 的现成组件甚至是 Tailwind 失去兴趣。另请记住，当选择某个库/框架时，您会将您的设计委托给它。因此，使用两个完全不同的部分意味着您对网站的某些部分的感觉与其他部分不同。

如果您想要 MUI 连锁反应，请看一下这个

span.ripple {
 position: absolute;
 border-radius: 50%;
 transform: scale(0);
 animation: ripple 600ms linear;
 background-color: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
 to {
  transform: scale(4);
  opacity: 0;
 }
}

https://codepen.io/vituja1/pen/oNWzNwq 这个codepen中还有JS代码。

这看起来也很有趣，虽然我还没有尝试过：https ://www.npmjs.com/package/tailwindcss-ripple