我們可以禁用 MUI 注入其組件的某些“css-”class 名稱嗎？ （下一個 JS 和 MUI）

Question

所以昨天，我剛剛按照https://nextjs.org/docs/migrating/from-上的指南，使用目前可用的最新版本 (12.1.0) 將我的 create-react-app 項目遷移到了 Next JS。創建反應應用程序。 我還在使用 MUI（就像我遷移之前一樣）使用以下一些軟件包：

"@mui/icons-material": "^5.3.0", "@mui/lab": "^5.0.0-alpha.62", "@mui/material": "^5.3.0",

除了解決過去 24 小時內的一些問題外，我還遇到了一個新問題，我注意到我網站周圍使用的所有“MuiButton”組件現在都包含一個新的名稱 CSS class超出我的控制並以某種方式注入它）。 例如，我的菜單導航中的一個按鈕現在在 class 屬性的最后包含css-1w1rijm-MuiButtonBase-root-MuiButton-root （如下所示）。

<button class="MuiButton-root MuiButton-navigation MuiButton-navigationPrimary MuiButton-sizeMedium MuiButton-navigationSizeMedium MuiButtonBase-root HeaderOptsstyle__OptionButton-sc-pfmh6j-3 elnHDd css-1w1rijm-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" aria-label="my account">

如果沒有將 CSS styles 應用到這個 class 名稱，這真的不是問題，但不幸的是，情況就是這樣。 似乎有很多 styles 從某個地方導入，這覆蓋了我在全局“createTheme”中設置的主題。

出於任何原因已經在 web 周圍挖掘為什么自遷移以來突然開始發生這種情況，但我在這里沒有看到任何明確的原因並且想知道是否有人可以幫助我理解這一點，或者需要采取什么措施來防止這是因為干擾了我自己的 styles。

我知道在遷移之前我的 CRA 上沒有發生這種情況，因為我的登台服務器從那以后沒有被重新部署，並且它目前在相同的按鈕上不包含任何“css-”類，並且 MUI 版本從那以后沒有改變。

如果我缺少任何信息來幫助解決這個問題，我深表歉意，但如果有人問我，我很樂意提供任何信息。

我的 package.json dependancies 和 devDependencies 也在下面看到。

    "@chec/commerce.js": "^2.8.0",
    "@date-io/date-fns": "^1.3.13",
    "@emotion/cache": "^11.7.1",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.3.0",
    "@mui/lab": "^5.0.0-alpha.62",
    "@mui/material": "^5.3.0",
    "@types/date-fns": "^2.6.0",
    "babel-plugin-styled-components": "^2.0.3",
    "date-fns": "^2.28.0",
    "dotenv": "^8.2.0",
    "embla-carousel-react": "^2.0.3",
    "hex-rgb": "^5.0.0",
    "hex-rgba": "^1.0.2",
    "lodash": "^4.17.21",
    "lodash-webpack-plugin": "^0.11.6",
    "moment": "^2.29.1",
    "next": "latest",
    "react": "17.0.2",
    "react-app-polyfill": "^2.0.0",
    "react-datepicker": "^4.4.0",
    "react-dom": "17.0.2",
    "react-hook-form": "^7.26.0",
    "react-redux": "^7.2.4",
    "react-uuid": "^1.0.2",
    "redux": "^4.1.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "rgb-hex": "^4.0.0",
    "string-strip-html": "^9.1.5",
    "styled-components": "^5.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/preset-env": "^7.12.16",
    "@babel/preset-react": "^7.12.13",
    "@babel/register": "^7.12.13",
    "@svgr/webpack": "^6.2.1",
    "@zeit/next-sass": "1.0.1",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-imports": "^2.0.0",
    "node-sass": "7.0.1"
  },```

Answer 1

問題在於，當 css 選擇器具有相同級別的特異性時，您的樣式引擎（情感）和 MUI 正在競爭應用什么 styles。 要解決此問題，您需要顯式設置 emotion 以在prepend之前添加，以便您編寫的樣式表優先於 MUI。 MUI在這里有進一步的說明。