javascript - Material UI 手风琴在折叠或展开时会导致页面闪烁
问题描述
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
我该如何解决这个问题?
注意:多次展开或折叠手风琴以了解效果。
解决方案
您正在使用具有 100% 宽度容器的 root。并且当组件扩展\隐藏时,它会立即添加水平滚动条并立即将其删除。如果您更改 99% 的根样式宽度,所有应该都可以正常工作而不会闪烁
const useStyles = makeStyles((theme) => ({
root: {
width: '99%',
},
...
}));
推荐阅读
- c - 管道:关闭管道数组中的文件描述符
- visual-studio - Building a solution containing .net standard 2.0 project in team foundation server 2012 server
- python - NoneType error when using cv2.HoughLinesP function put by images
- abaqus - Finite element analysis: How can I find the boundary conditions and settings for the knee joints?
- javascript - 使用 Cordova 应用程序执行 AJAX 调用时出现问题
- php - Ubuntu - Cron 作业未在包含包含文件的 PHP 脚本中完成
- java - 从 Java 运行时使 Saxon 生成新的结果文档
- c - 每次将一对数字存储在C中的一维数组中
- javascript - 可过滤的下拉列表获取 id
- laravel - Laravel:将一个表中的值连接到另一个表中的值