我目前正在用NextJS、TailwindCSS和MUI React UI庫構建一個項目。

每當我試圖在我的項目中添加一個MUI按鈕時，它都能正常工作，但是按鈕的顏色仍然是白色的。

懸停時顏色恢復正常，單擊按鈕時仍有波紋效果。但是當不懸停時，它又變回白色。

通過從我在_app中導入的全局css文件中刪除tailwind指令。{js，jsx.ts，tsx}文件，按鈕再次正常工作，但這也將刪除TailwindCSS。

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

更新(2022年8月15日) MUI團隊現在增加了對順風CSS的支持，請點擊此鏈接獲取說明 https://mui . com/material-ui/guides/inter operability/# tailwind-CSS

這里的問題是，tailwinds prefligh實現了以下樣式 添加時

@tailwind base;

添加到您的樣式表:

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

這比material-ui的背景色定義更具體。

您可以通過刪除& quot@順風基地；"并實現自己的重置樣式表，但這也有其他缺點: https://tailwindcss.com/docs/preflight

這對我很有效，

在根目錄下的tailwind.config.js文件中，添加corePlugins config。這里有一個例子:

/** @type {import('tailwindcss').Config} */

module.exports = {
  // add this section to resolve
  corePlugins: {
    preflight: false,
  },
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

我強烈建議不要這么做。我會選擇一個css框架或庫并堅持使用它，因為你很可能會遇到風格沖突的問題。一些框架使用相同的css類，但是幕后的代碼不同，這意味著你會遇到沖突。如果你習慣了使用tailwind，我保證你會對material UI的現成組件失去興趣，甚至對tailwind也是如此。 還要記住，當選擇一個特定的庫/框架時，你就把你的設計提交給了它。所以使用兩個完全不同的網站意味著你對網站的某些部分會有不同于其他部分的感覺。

如果你想了解MUI的漣漪效應，可以看看這個

span.ripple {
 position: absolute;
 border-radius: 50%;
 transform: scale(0);
 animation: ripple 600ms linear;
 background-color: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
 to {
  transform: scale(4);
  opacity: 0;
 }
}

https://codepen.io/vituja1/pen/oNWzNwq 這個codepen里還有JS代碼。

這似乎也很有趣，雖然我還沒有嘗試過:https://www.npmjs.com/package/tailwindcss-ripple

該問題是由于順風指令中的飛行前動作造成的。@base指令覆蓋mui樣式！以下是解決方案。 根據官方的MUI文檔，您應該禁用tailwind.config.js文件中的peflight，如下所示:

module.exports = {
    corePlugins: {
    preflight: false,
  },
 }

我強烈建議您閱讀完整的樣式庫互操作性文檔。

目前的解決方案是將材料界面版本降級為^4.12.3.版本

我在把尾風升級到3.1.6之后也碰到了這個問題。我也在使用material，它在2.2.x版本的tailwind上運行良好。但由于這次更新，應用程序中的所有按鈕都變得透明，因為tailwind也將其基本按鈕類應用于材質按鈕。因此，為了解決這個問題，我在主材質按鈕的全局css級別中應用了以下屬性級別CSS通配符:

button[class*='MuiButton-containedPrimary'] {
 background-color: #0081cb!important;
 }

這為我解決了問題，顏色代碼#0081cb是材料按鈕的主要顏色，除了主要樣式，類似地，你也可以設計其他按鈕變體，如成功和錯誤。