如何在材料UI手风琴中添加更多动作图标？

Question

我想在上图中实现类似的目标。除了向下箭头（倒塌）​​，我还想添加一个编辑和删除图标。我该如何实现？这是材料UI手风琴的一些代码。

export default function SimpleAccordion() {
  return (
    <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
          sx={{display: 'flex', justifyContent: 'space-between'}}
        >
          <Typography>Accordion 1</Typography>

        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header"
        >
          <Typography>Accordion 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion disabled>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3a-content"
          id="panel3a-header"
        >
          <Typography>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>
    </div>
  );
}
 

Answer 1

将它们放入盒子中，并按照以下方式进行样式：

     <Accordion>
        <Box sx={{ display: "flex" }}>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel2a-header"
            sx={{ flexGrow: 1 }}
          >
            <Typography>Accordion 1</Typography>
          </AccordionSummary>
          <Box>
            <IconButton>
              <EditIcon onClick={() => alert("Edit Me!")} />
            </IconButton>

            <IconButton>
              <DeleteIcon onClick={() => alert("Delete Me!") />
            </IconButton>
          </Box>
        </Box>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>

就是这样！

您可以使用fragments：

 expandIcon = {
    <>
      <IconButton>
        <ExpandMoreIcon />
      </IconButton>
    </>
  }

如果要通过单击“编辑”或“删除”按钮扩展，则需要”>用处理程序添加您自己的状态。

在这里，作为示例，我将展开功能添加到按钮。首先添加状态和处理：

const [expand, setExpand] = React.useState(false);
  const toggleAccordion = () => {
    setExpand((prev) => !prev);
  };

在手风琴中：

    <Accordion expanded={expand}>
        <Box sx={{ display: "flex" }}>
          <AccordionSummary
            iconbuttonprops={{ onClick: toggleAcordion }}
            onClick={() => toggleAccordion()}
            expandIcon={
              <>
                <IconButton>
                  <ExpandMoreIcon />
                </IconButton>
              </>
            }
            aria-controls="panel1a-content"
            id="panel2a-header"
            sx={{
              flexGrow: 1,
            }}
          >
            <Typography>Accordion 1</Typography>
          </AccordionSummary>
          <Box>
            <IconButton
                IconButtonProps={{ onClick: toggleAccordion }}
                onClick={() => toggleAccordion()}
            >
              <EditIcon/>
            </IconButton>

            <IconButton>
              <DeleteIcon />
            </IconButton>
          </Box>
        </Box>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>