css - Material-UI:仅通过单击图标来展开 Accordion

Question

我为我的元素创建了一个 Accordion 。但我希望仅在单击展开图标时才展开面板。目前它正在扩展单击面板上的任何位置。我们可以自定义它的扩展行为吗？

代码:

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 有自己的状态(打开或关闭)和自己的点击处理程序，我们上面所做的是我们创建自己的状态并覆盖 Material-UI Accordion Prop 状态expanded并添加事件监听器onClick到 Prop IconButtonProps 的图标按钮，我们的事件监听器将通过改变我们的状态来打开或关闭 Accordion。

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