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

以下是同一文件的正式文件 https://material-ui.com/components/accordion/#accordion

如何解决该问题？

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

Answer 1

我认为这是“[交替]风格内容的瞬间闪光”。

Material-UI 应使用其 makeStyles 钩子创建器函数进行样式设置。

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

您的 CSS 中的所有 !important 注释似乎都很可疑 - 我认为如果您使用 Material-UI 样式机制“玩球”，您会发现它可以和谐地工作而无需 !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>
  )
}

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

1 个答案: