React - Material-UI Accordion：如何使标题居中并展开图标

Posted 2023-02-22

【中文标题】React - Material-UI Accordion：如何使标题居中并展开图标

【英文标题】：React - Material-UI Accordion: How to center header and expand icon

【发布时间】：2020-12-01 04:04:26

【问题描述】：

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

我想要做的是将手风琴摘要（带有“Accordion 1”、“Accordion 2”的标题）居中，并将展开图标（箭头）放在正下方，也居中。 p>

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

谢谢！

【参考方案1】：

将flex-grow on the summary content 从 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 的类（根据 cmets 中的要求）使用 withStyles 而不是 makeStyles/useStyles 来获得示例中的附加样式。

【讨论】：

嗨瑞恩。非常感谢！两件事：1.是否可以将箭头放在底部限制器的中间，而不是在标题 2 旁边。我没有使用反应钩子，而是反应类。我将如何更改 useStyles 函数中的样式： const useStyles = (theme) => (....)

@MichelH。我已更新我的答案以包含第二个示例。