我的目标是创建一个自定义的Material UI Accordion,它应该看起来像这样:
现在,我尝试使用这些代码结构创建这个自定义MUI accordion (这个 accordion 还使用一些自定义搜索框功能和自定义 accordion 数据)
accordion 源码:
import * as React from "react";
import { useState } from "react";
import AccordionMUI from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import "./globals.css";
import { accordionData } from "./accordionData.js";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
export default function SimpleAccordion() {
const [search, setSearch] = useState("");
return (
<div>
<input
onChange={(e) => setSearch(e.target.value)}
type="text"
placeholder="Search"
/>
{accordionData
.filter((item) => {
return search.toLowerCase() === ""
? item
: item.sectionTitle.toLowerCase().includes(search);
})
.map((item) => (
<AccordionMUI key={item.id} className="accordionMui">
<AccordionSummary
expandIcon={<AddCircleIcon sx={{ color: "#384558" }} />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>
<b>{item.sectionTitle}</b>
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>{item.sectionContent}</Typography>
</AccordionDetails>
</AccordionMUI>
))}
</div>
);
}
CSS样式化源代码:
.accordionMui {
background-color: rgba(242, 242, 242, 0.1);
box-shadow: none;
color: #384558;
}
#panel1a-header {
padding-top: 5%;
padding-bottom: 5%;
}
完整的工作演示在这里CodeSandbox。
它目前看起来像这样:
我的问题是,我的 accordion 的最后一条分隔线没有显示出来,不像它以前的部分,下面有一条分隔线。我还想覆盖 accordion 分隔线的样式,使其更粗。
我还想将折叠图标更改为它们各自的状态(未展开的 accordion 将显示AddCircleIcon,展开的 accordion 将显示RemoveCircleIcon),但当我使用这个三元条件expanded={expanded === 'panel1'}
时,出现了一个问题,显示Cannot find name 'expanded',就像这个堆栈接受的问题(How to change icon when accordion summary is expanded?)一样。因此,我不知道如何改变折叠图标的基础上,从他们的状态正在扩大或尚未扩大。
我仍然很困惑,不确定我应该在Accordion API of MUI上使用哪些类,这将是很大的帮助,以获得一些指导,在适当的自定义和覆盖 accordion 组件从MUI,因为我仍然在学习MUI的道路上。
你的回答确实会对我有很大的帮助。非常感谢。
2条答案
按热度按时间pdkcd3nj1#
你可以这样做:
1.展开时更改为其他图标:
就像从这个堆栈接受的问题(如何改变图标时, accordion 摘要是扩大?)。因此,我不知道如何根据折叠图标的展开或未展开状态来更改它们。
->根据mui accordion文档和堆栈问题的处理方式几乎相同:
您需要设置状态来处理
AccordionMUI
,并使用icons
进行控制。1.使分隔线变粗&缺少分隔线
-->你需要删除这个:(显示背景色而不是
box-shadow
)更新demo:
我希望这对你有帮助!
q0qdq0h22#
问得好
Accordion
组件是一个MUI自定义的Collapse
组件。也许与其纠结于Accordion
,不如使用Collapse
制作一个自定义组件?CodeSandbox Example