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

Question

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的官方文档

我该如何解决这个问题？

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

Answer 1

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://treatsure.netlify.app/请在移动视图或移动设备中打开以上链接

这是同一https://material-ui.com/components/accordion/#accordion的正式文档

我该如何解决这个问题？

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

Answer 2

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

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