Material-UI防止AccordionDetails单击时折叠默认折叠

Material-UI是一个流行的React UI组件库，它提供了丰富的可重用组件，用于构建现代化的Web应用程序。其中，Accordion是Material-UI中的一个组件，用于创建可折叠的面板。

在使用Material-UI的Accordion组件时，默认情况下，单击AccordionDetails部分会触发折叠效果。如果希望在单击AccordionDetails时不触发折叠效果，可以通过一些自定义的方式来实现。

一种常见的方法是使用event.stopPropagation()方法来阻止事件冒泡。具体步骤如下：

导入所需的Material-UI组件和样式：

import React from 'react';
import { Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { makeStyles } from '@material-ui/core/styles';

创建自定义的样式：

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular,
  },
}));

创建一个函数组件，并使用自定义样式：

const CustomAccordion = () => {
  const classes = useStyles();

  const handleDetailsClick = (event) => {
    event.stopPropagation();
    // 执行其他操作
  };

  return (
    <div className={classes.root}>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>Accordion Title</Typography>
        </AccordionSummary>
        <AccordionDetails onClick={handleDetailsClick}>
          <Typography>
            Accordion Content
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
};

在上述代码中，我们通过在AccordionDetails组件上添加onClick事件处理程序，并在处理程序中调用event.stopPropagation()方法来阻止事件冒泡。这样，当单击AccordionDetails时，不会触发折叠效果。

需要注意的是，这只是一种实现方式，你可以根据具体需求和项目结构选择适合的方法来防止AccordionDetails单击时的默认折叠行为。