在 NextJS 專案中使用 Tailwind 和 MUI 時出現意外行為（白色按鈕錯誤）

Question

我目前正在使用 NextJS、TailwindCSS 和 MUI React UI 庫建立一個專案。

每當我嘗試在我的專案中新增 MUI 按鈕時，它都能正常工作，但按鈕的顏色保持白色。

在懸停時顏色恢復正常，點擊按鈕時仍具有波紋效果。但當不懸停時，它會回到白色。

透過從我在 _app.{js,jsx.ts,tsx} 檔案中匯入的全域 css 檔案中刪除 tailwind 指令，該按鈕再次正常工作，但這也將刪除 TailwindCSS。

有沒有辦法在保留指令的同時修復它？或者可能使用另一種方​​法包含 tailwind CSS？

更新（2022 年 8 月 15 日）

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

#