Javascript 当折叠或展开时，材质UI手风琴会导致页面闪烁

我已经实现了materialui手风琴。无论何时展开或折叠，都会导致页面闪烁。他们的官方文件在多次展开或折叠时也有同样的闪烁体验。我已经添加了链接

请在移动视图或移动设备中打开以上链接

这是同样的官方文件

我如何解决这个问题

注意：多次展开或折叠手风琴以了解效果。

我认为这是一个“瞬间的[交替-]风格内容”

应使用其

makeStyles

hook creator函数设置材质UI的样式

我敢打赌，它会在单独的渲染过程中应用或覆盖样式，从而导致视觉闪烁

所有的

！重要的

你的CSS中的注释似乎有些可疑-我想你会发现它在不需要

的情况下工作得很和谐！重要信息

如果您使用材质UI样式设置机制“玩球”

.MuiPaper-elevation1 {
  box-shadow: none !important;
}

.MuiAccordion-root {
  position: static !important;
  border-bottom: 1px solid #aaaaaa !important;
}

.MuiAccordionSummary-root {
  padding: 0 !important;
  justify-content: space-between !important;
}

.MuiAccordionSummary-content {
  width: 90% !important;
  flex-grow: 0 !important;
}

.MuiAccordionDetails-root {
  width: 90% !important;
}

.MuiAccordion-rounded {
  border-radius: 0 !important;
}

.MuiAccordionDetails-root {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 15px !important;
}

.accordion-heading {
  font-family: Montserrat !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--black) !important;
}

.accordion-details {
  font-family: Montserrat;
  font-size: 12px;
  line-height: 1.4;
  color: #595959;
}

.MuiAccordionSummary-content.Mui-expanded {
  margin: 15px 0 !important;
}

.MuiAccordion-root.Mui-expanded {
  margin: 0 !important;
}

从“@material ui/core/styles”导入{makeStyles}
const useStyles=makeStyles（JSS）
//或者，更好的是：
//const useStyles=makeStyles（主题=>JSS）
常量小部件=（）=>{
常量类=useStyles（）
返回(
)
}

.MuiPaper-elevation1 {
  box-shadow: none !important;
}

.MuiAccordion-root {
  position: static !important;
  border-bottom: 1px solid #aaaaaa !important;
}

.MuiAccordionSummary-root {
  padding: 0 !important;
  justify-content: space-between !important;
}

.MuiAccordionSummary-content {
  width: 90% !important;
  flex-grow: 0 !important;
}

.MuiAccordionDetails-root {
  width: 90% !important;
}

.MuiAccordion-rounded {
  border-radius: 0 !important;
}

.MuiAccordionDetails-root {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 15px !important;
}

.accordion-heading {
  font-family: Montserrat !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--black) !important;
}

.accordion-details {
  font-family: Montserrat;
  font-size: 12px;
  line-height: 1.4;
  color: #595959;
}

.MuiAccordionSummary-content.Mui-expanded {
  margin: 15px 0 !important;
}

.MuiAccordion-root.Mui-expanded {
  margin: 0 !important;
}

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(JSS)
// or, better yet:
// const useStyles = makeStyles(theme => JSS)

const Widget = () => {
  const classes = useStyles()

  return (<ComplexMuiWidget classes={{
      root: classes.complexRoot,
      consultMuiDocsForTargetableClassnames: classes.complexExpanded,
    }}>
      <div className={classes.myDiv}>
      </div>
    </ComplexMuiWidget>
  )
}