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%',
  },
...
}));