reactjs - 如何覆盖自定义 Material UI Accordion 的样式(分隔线和折叠图标)

Question

我的目标是创建一个自定义 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'} 就像来自此堆栈接受的问题 ( How to change icon when accordion summary is expanded? ) 一样。因此，我不确定如何根据折叠图标的展开或未展开状态来更改折叠图标。

我仍然很困惑，不确定应该在 Accordion API of MUI 上使用哪些类由于我仍在学习 MUI，因此获得一些有关正确自定义和覆盖 MUI 中的 Accordion 组件的指南将非常有帮助。

您的回复确实对我在这方面有很大帮助。非常感谢。

Answer 1

你可以这样做:

1. 展开时更改为不同的图标:

just like from this stack accepted question (How to change icon when accordion summary is expanded?). Thus, I am not sure how to change the collapse icons based from their states of being expanded or not expanded yet.

-> 按照the mui accordion documentation和堆栈问题中的做法几乎相同:

您需要设置状态来处理 AccordionMUI 并使用 icons 进行控制。

...
  const [expanded, setExpanded] = React.useState(false);
  const handleChange = (panel) => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };
...
  <AccordionMUI
     key={item.id}
    //set unique item id for each accordion
     expanded={expanded === item.id}
     onChange={handleChange(item.id)}
     className="accordionMui"
  >
  <AccordionSummary
     expandIcon={
     expanded === item.id ? <RemoveCircleIcon /> : 
     <AddCircleIcon />
     } 
  >
  ...
...

使分隔线变粗并缺少分隔线

--> 您需要删除此内容:(以显示背景颜色而不是 box-shadow)

box-shadow: none;

更新了演示:

希望这会有所帮助!