Material UI 手风琴在折叠或展开时会导致页面闪烁

Posted 2023-02-22

【中文标题】Material UI 手风琴在折叠或展开时会导致页面闪烁

【英文标题】：Material UI accordion causes flickering of the page when collapsed or expanded

【发布时间】：2021-02-11 18:37:19

【问题描述】：

import React from "react";
import  makeStyles  from "@material-ui/core/styles";
import Accordion from "@material-ui/core/Accordion";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AddCircleIcon from "@material-ui/icons/AddCircle";
import RemoveCircleSharpIcon from "@material-ui/icons/RemoveCircleSharp";

import "../customCSS/container.css";
import "../customCSS/bootstrap-grid.min.css";
import "./Accordion.css";

const useStyles = makeStyles((theme) => (
  root: 
    width: "100%",
    marginLeft: "auto",
    marginRight: "auto",
  ,
));

const accordionDetails = [
  
    accordName: "panel1",
    accordControls: "panel1bh-content",
    accordId: "panel1bh-header",
    accordHeading: " What does the personal manager help me with?",
    accordDetails:
      "Right from party planning to sending invitation to all your family and friends, your personal manager will do it all.",
  ,
  
    accordName: "panel2",
    accordControls: "panel2bh-content",
    accordId: "panel2bh-header",
    accordHeading: " What does the personal manager help me with?",
    accordDetails:
      "Right from party planning to sending invitation to all your family and friends, your personal manager will do it all.",
  ,
  
    accordName: "panel3",
    accordControls: "panel3bh-content",
    accordId: "panel3bh-header",
    accordHeading: " What does the personal manager help me with?",
    accordDetails:
      "Right from party planning to sending invitation to all your family and friends, your personal manager will do it all.",
  ,
];

const Accordions = () => 
  const classes = useStyles();
  const [expanded, setExpanded] = React.useState(false);

  const handleChange = (panel) => (event, isExpanded) => 
    setExpanded(isExpanded ? panel : false);
  ;

  return (
    <div className=classes.root>
      accordionDetails.map((accord) => 
        return (
          <Accordion
            expanded=expanded === accord.accordName
            onChange=handleChange(accord.accordName)
          >
            <AccordionSummary
              expandIcon=
                expanded === accord.accordName ? (
                  <RemoveCircleSharpIcon style= color: "#aaaaaa"  />
                ) : (
                  <AddCircleIcon style= color: "#aaaaaa"  />
                )
              
              aria-controls=accord.accordControls
              id=accord.accordId
            >
              <p className="accordion-heading">accord.accordHeading</p>
            </AccordionSummary>
            <AccordionDetails>
              <p className="accordion-details">accord.accordDetails</p>
            </AccordionDetails>
          </Accordion>
        );
      )
    </div>
  );
;

export default Accordions;

CSS 代码

.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;

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

这是相同的官方文档 https://material-ui.com/components/accordion/#accordion

我该如何解决这个问题？

注意：手风琴展开或折叠多次才能知道效果。

【参考方案1】：

您正在使用具有 100% 宽度容器的 root。并且当组件扩展\隐藏时，它会立即添加水平滚动条并立即将其删除。如果您更改 99% 的根样式宽度，所有应该都可以正常工作而不会闪烁

const useStyles = makeStyles((theme) => (
  root: 
    width: '99%',
  ,
...
));