如何使用 css 模块在 next.js 中覆盖特定样式的 MUI Accordian答案

【问题标题】：How I can override specific styles of MUI Accordian in next.js by using css module如何使用 css 模块在 next.js 中覆盖特定样式的 MUI Accordian
【发布时间】：2022-10-23 04:16:12
【问题描述】：

我想覆盖手风琴组件的默认 MUI CSS，我想使用 CSS 模块执行此操作，但问题是该类是由 mui 动态添加的。因此，我不能直接针对该类。

我尝试了以下解决方案，但它不起作用：-

CSS代码： -

`.accordian_summary {
  &:global(.MuiAccordionSummary-root) {
    padding: 0px !important;
  }
  &:global(.MuiAccordionSummary-content) {
    display: block !important;
  }
}`

JSX 代码：-Accordian component code

DOM 树结构和我要覆盖的类Browser code

*注意：- 正在应用其中一个 CSS，即

`&:global(.MuiAccordionSummary-root) {     padding: 0px !important;   } `

但这不起作用

` &:global(.MuiAccordionSummary-content) {
    display: block !important;
  }`

如果可能，请提供帮助，并提前感谢您的帮助。

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如它目前所写的那样，很难准确地说出你在问什么。
请确保将代码作为文本直接发布到问题（和not as images）和format them appropriately。
包含.MuiAccordionSummary-content 类的元素没有.accordian_summary（它是它的后代），这意味着CSS 规则不适用于它。

标签： css sass next.js material-ui css-selectors

【解决方案1】：

可能的解决方案：

div[class*="MuiAccordionSummary-root"] {
  display: block;
}

例如更改输入错误标签的样式：

label[class*="Mui-error"] {
  text-decoration: underline;
}

【讨论】：