現在、NextJS、TailwindCSS、および MUI React UI ライブラリを使用してプロジェクトを構築しています。
MUI ボタンをプロジェクトに追加しようとすると、正常に機能しますが、ボタンの色は白のままです。
ホバーすると色は通常に戻りますが、ボタンをクリックすると波紋効果が残ります。ただし、ホバリングしていない場合は白に戻ります。
_app.{js,jsx.ts,tsx} ファイルにインポートしたグローバル CSS ファイルから tailwind ディレクティブを削除すると、ボタンは再び正常に機能しましたが、これにより TailwindCSS も削除されました。
ディレクティブを保持したまま修正する方法はありますか?それとも、別の方法を使用して、tailwind CSS を含めるのでしょうか?
MUI チームは、tailwind CSS のサポートを追加しました。手順については、このリンクに従ってください。 https://mui.com/material-ui/guides/interoperability/#tailwind-css
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
ここでの問題は、tailwinds preflig が次のスタイルを実装していることです。
を追加する場合 リーリースタイルシートへ:
リーリーこれは、material-ui の背景色の定義よりも具体的です。
この問題は、スタイルから「@tailwind Base;」を削除し、独自のリセット スタイルシートを実装することで回避できますが、これには別の欠点もあります。 https://tailwindcss.com/docs/preflight