Unerwartetes Verhalten (White-Button-Bug) bei Verwendung von Tailwind und MUI im NextJS-Projekt

Question

Ich erstelle derzeit ein Projekt mit NextJS, TailwindCSS und der MUI React UI-Bibliothek.

Immer wenn ich versuche, meinem Projekt eine MUI-Schaltfläche hinzuzufügen, funktioniert es einwandfrei, aber die Farbe der Schaltfläche bleibt weiß.

Die Farbe kehrt beim Schweben zur Normalität zurück und hat immer noch den Welleneffekt, wenn auf die Schaltfläche geklickt wird. Aber wenn man nicht schwebt, wird es wieder weiß.

Durch das Entfernen der Tailwind-Direktive aus der globalen CSS-Datei, die ich in die Datei _app.{js,jsx.ts,tsx} importiert habe, funktionierte die Schaltfläche wieder einwandfrei, aber dadurch wurde auch TailwindCSS entfernt.

Gibt es eine Möglichkeit, das Problem zu beheben und gleichzeitig die Richtlinie beizubehalten? Oder vielleicht eine andere Methode verwenden, um Rückenwind-CSS einzubinden?

UPDATE(15. August 2022)

Das MUI-Team hat jetzt Unterstützung für Tailwind-CSS hinzugefügt. Bitte folgen Sie diesem Link für Anweisungen 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