React - Material-UI手风琴：如何将标题和展开图标居中

Question

我目前正在我的React项目中实现Material-UI库的手风琴组件：

我想要做的是让手风琴摘要（标题为“手风琴1”，“手风琴2”）居中，展开图标（箭头）也居中显示。

在Material-UI文档（https://material-ui.com/components/accordion/）中，显示的布局如下所示：

使用以下代码（如文档中所示）：

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

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

export default function SimpleAccordion() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>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 className={classes.heading}>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 className={classes.heading}>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>
    </div>
  );
}

谢谢！

- Michel H

Answer 1

将摘要内容上的flex-grow从1更改为0似乎已经足够：

import { withStyles } from "@material-ui/core/styles";
import MuiAccordionSummary from "@material-ui/core/AccordionSummary";
const AccordionSummary = withStyles({
  content: {
    flexGrow: 0
  }
})(MuiAccordionSummary);

如果您希望箭头居中显示在摘要文本下方（而不是像第一个示例中一样显示在旁边），则可以使用以下代码：

const AccordionSummary = withStyles({
  root: {
    flexDirection: "column"
  },
  content: {
    marginBottom: 0
  },
  expandIcon: {
    marginRight: 0,
    paddingTop: 0
  }
})(MuiAccordionSummary);

这个第二个例子也展示了如何使用一个类来实现SimpleAccordion（正如评论中所请求的），并使用withStyles而不是makeStyles/useStyles来进行额外样式的设置。

- Ryan Cogswell

---

嗨，Ryan。非常感谢！有两件事：

1. 是否可能将箭头放在底部限制符的中间，而不是在标题旁边
2. 我没有使用React Hooks，而是使用React类。我该如何更改useStyles函数中的样式：const useStyles =（theme）=>（{....}）

- Michel H

@MichelH。我已经更新了我的答案，包括第二个示例。 - Ryan Cogswell