NextJS 프로젝트에서 Tailwind 및 MUI를 사용할 때 예기치 않은 동작(흰색 버튼 버그)

Question

현재 NextJS, TailwindCSS 및 MUI React UI 라이브러리를 사용하여 프로젝트를 구축하고 있습니다.

프로젝트에 MUI 버튼을 추가하려고 할 때마다 제대로 작동하지만 버튼 색상이 흰색으로 유지됩니다.

마우스를 올리면 색상이 정상으로 돌아가고 버튼을 클릭하면 여전히 파급 효과가 있습니다. 그러나 호버링하지 않으면 흰색으로 반환됩니다.

_app.{js,jsx.ts,tsx} 파일에서 가져온 전역 CSS 파일에서 tailwind 지시문을 제거하면 버튼이 다시 제대로 작동했지만 이로 인해 TailwindCSS도 제거되었습니다.

지령을 유지하면서 해결할 수 있는 방법이 있나요? 아니면 다른 방법을 사용하여 tailwind CSS를 포함할 수도 있나요?

UPDATE(2022년 8월 15일)

MUI 팀은 이제 tailwind CSS에 대한 지원을 추가했습니다. 지침을 보려면 이 링크를 따르세요. https://mui.com/material-ui/guides/interoperability/#tailwind-css

Answer 1

여기서 문제는 tailwinds preflig가 다음 스타일을 구현한다는 것입니다. 추가할 때

으아악

스타일시트로 이동:

으아악

이것은 Material-ui의 배경색 정의보다 더 구체적입니다.

스타일에서 "@tailwind base;"를 제거하고 고유한 재설정 스타일시트를 구현하여 이 문제를 해결할 수 있지만 여기에는 다른 단점도 있습니다. https://tailwindcss.com/docs/preflight