Tingkah laku yang tidak dijangka (pepijat butang putih) apabila menggunakan Tailwind dan MUI dalam projek NextJS

Question

Saya sedang membina projek menggunakan perpustakaan NextJS, TailwindCSS dan UI React MUI.

Setiap kali saya cuba menambah butang MUI pada projek saya, ia berfungsi dengan baik tetapi warna butang itu kekal putih.

Warna kembali normal pada hover dan masih mempunyai kesan riak apabila butang diklik. Tetapi apabila tidak melayang ia kembali putih.

Dengan mengalih keluar arahan tailwind daripada fail css global yang saya import dalam fail _app.{js,jsx.ts,tsx}, butang itu berfungsi dengan baik sekali lagi, tetapi ini juga mengalih keluar TailwindCSS.

Adakah terdapat cara untuk membetulkannya sambil mengekalkan arahan? Atau mungkin gunakan kaedah lain untuk memasukkan CSS tailwind?

KEMASKINI(15 Ogos 2022)

Pasukan MUI kini telah menambah sokongan untuk tailwind CSS, sila ikuti pautan ini untuk mendapatkan arahan https://mui.com/material-ui/guides/interoperability/#tailwind-css

Answer 1

Masalahnya di sini ialah tailwinds preflig melaksanakan gaya berikut Apabila menambah

@tailwind base;

Ke helaian gaya anda:

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

Ini lebih spesifik daripada definisi warna latar belakang material-ui.

Anda boleh membetulkannya dengan mengalih keluar "@tailwind base;" daripada gaya anda dan melaksanakan lembaran gaya tetapan anda sendiri, tetapi ini mempunyai kelemahan lain: https://tailwindcss.com/docs/preflight