如何将文本对齐在材料UI的手风琴组件中居中？

Question

这是我的手风琴部件：

​

​

我希望上面的组件看起来如下：

​

​

我想使这些标题(手风琴1，手风琴2)中心对齐。但我做不到。

请帮助，下面是资料用户界面网站的代码：

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';

export default function SimpleAccordion() {
  return (
    <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>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>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>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>
    </div>
  );
}

材料-Ui组件链接：https://next.material-ui.com/components/accordion/#basic-accordion

Answer 1

为了使这个标题出现在中间，有一个类“MuiAccordion汇总-content”。

默认情况下，它是显示器: flex。

现在，您需要向这个名为MuiAccordionSummary content的类添加的惟一属性是: center;

若要覆盖css，请访问以下链接：材料用户界面中的风格定制

有时，我们必须重写组件的默认行为，或者说根据我们的需求重写样式。

如果您不想直接覆盖它，请使用inlinestyle或特定的类名，就像我们对普通css所做的那样。

Answer 2

代码

首先，我们使用useStyles() API创建我们的样式：

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  content: {
    justifyContent: "center"
  }
});

接下来，在每个AccordionSummary组件中，我们使用classes支柱应用样式，如下所示：

<AccordionSummary
  classes={{ content: classes.content }}  // <-- Add this line
  /* ... */
>

​

​

解释

参考来自关于自定义组件的文档的示例，我们打开Chrome DevTools来检查手风琴：

​

​

注意，内容容器的类名是MuiAccordionSummary-content。这意味着我们可以使用以下格式将样式应用于AccordionSummary组件：

<AccordionSummary classes={{ content: XXXX }} />

因此，我们使用content API定义一个名为makeStyles的样式对象，然后使用这个对象对每个AccordionSummary组件进行样式化。

Answer 3

这是材料5，SX解决方案，如果你不想使用类；

<AccordionSummary>
   <Typography align="center" sx={{width: '100%'}}>Accordion 1</Typography>
</AccordionSummary>

所以，当你用排版组件覆盖整个区域时(你已经在使用了)，你可以使用排版的对齐支柱。