Css 反应-材料UI手风琴：如何居中标题和展开图标

我目前正在我的react项目中实现材质UI库的Accordion组件：

我想做的是将accordion摘要（标题为“accordion 1”、“accordion 2”）居中，并将下面的展开图标（箭头）也居中。

在材质UI文档（）中，显示的布局如下所示：

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

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Accordion”导入手风琴；
从“@material ui/core/AccordionSummary”导入AccordionSummary；
从“@material ui/core/AccordionDetails”导入AccordionDetails；
从“@material ui/core/Typography”导入排版；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
const useStyles=makeStyles（（主题）=>({
根目录：{
宽度：“100%”，
},
标题：{
fontSize：主题。排版。pxToRem（15），
fontWeight:theme.typography.fontWeightRegular，
},
}));
导出默认函数SimpleAccordion（）{
const classes=useStyles（）；
返回(
手风琴1
Lorem ipsum dolor sit amet，是一位杰出的领导者。Suspendisse malesuada lacus ex，
坐在艾米特·布兰迪特·利奥·洛博蒂斯·埃吉特旁边。
手风琴2
Lorem ipsum dolor sit amet，是一位杰出的领导者。Suspendisse malesuada lacus ex，
坐在艾米特·布兰迪特·利奥·洛博蒂斯·埃吉特旁边。
残疾人手风琴
);
}

谢谢大家!

从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);

---

第二个示例还演示了使用

with styles

而不是

makeStyles

/

use styles

为SimpleAccordion使用一个类（如注释中所要求），以实现示例中的其他样式。

。谢谢！两件事：1。是否可以将箭头放在底部限制器的中间，而不是在头2的旁边。我没有使用react钩子，而是使用react类。如何更改useStyles函数中的样式：const useStyles=（theme）=>（{…}）@MichelH。我更新了我的答案，加入了第二个例子。

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