Material-UI：仅通过单击图标来展开手风琴

Question

我为我的项目创建了一个手风琴。但我希望仅在单击展开图标时才展开面板。目前，它正在通过单击面板上的任意位置进行扩展。我们可以定制它的扩展行为吗？

代码：

import React from "react";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@material-ui/core/Accordion";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";
import AccordionSummary from "@material-ui/core/AccordionSummary";

export default function App() {
return (
    <div style={{}}>
    <h4>How to create Accordion in ReactJS?</h4>
    <Accordion style={{ width: 400}}>
        <AccordionSummary 
         expandIcon={<ExpandMoreIcon />}
         aria-controls="panel1a-content"
        >   
          <div>Click to Expand</div>
        </AccordionSummary>
        <AccordionDetails>
        <Typography>Greetings of the day :)</Typography>
        </AccordionDetails>
    </Accordion>
    </div>
);
}

Answer 1

是的，我们可以这样做

1-使用处理程序创建我们自己的状态：

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

2- 将我们的状态添加到 Accordion 中：

<Accordion expanded={expand} style={{ width: 400 }}>

3-添加onClick图标：

    <AccordionSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1a-content"
      IconButtonProps={{
        onClick: toggleAcordion
      }}
    >

完整代码：

编辑：解释： Material-UI Accordion 有自己的状态（打开或关闭）和自己的单击处理程序，我们上面所做的是创建自己的状态并通过 prop 覆盖 Material-UI Accordion 状态，expanded并将事件侦听器添加onClick到icon 按钮通过 prop IconButtonProps，我们的事件监听器将通过更改我们的状态来打开或关闭手风琴。

注意：上面的代码不会改变光标指针的样式。

Answer 2

没有公共 API 可以开箱即用地执行您想要的操作，但您可以使用以下CSS 技巧：

V5

<AccordionSummary
  sx={{
    pointerEvents: "none"
  }}
  expandIcon={
    <ExpandMoreIcon
      sx={{
        pointerEvents: "auto"
      }}
    />
  }
>

V4

const useStyles = makeStyles({
  summary: {
    pointerEvents: 'none',
  },
  icon: {
    pointerEvents: 'auto',
  },
});

<AccordionSummary
  className={classes.summary}
  expandIcon={<ExpandMoreIcon className={classes.icon} />}
>
  <Typography>Accordion 1</Typography>
</AccordionSummary>

现场演示

Answer 3

对于 v5，并正确设置鼠标光标：

1-使用处理程序创建我们自己的状态：

const [accordionOpen, setAccordionOpen] = React.useState(false);

2- 将我们的状态添加到手风琴并点击切换：

<Accordion expanded={accordionOpen}>
    <AccordionSummary
      expandIcon={
        <ExpandMoreIcon
          style={{ cursor: 'pointer' }}
          onClick={() => setAccordionOpen(!accordionOpen)} />
      }
      sx={{ cursor: 'unset !important' }}
    >