我们可以禁用 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在这里有进一步的说明。