时间戳

首页 > 解决方案 > 如何在 Material-UI 的 Accordion 组件中将文本对齐到中心？

reactjs - 如何在 Material-UI 的 Accordion 组件中将文本对齐到中心？

问题描述

这是我的手风琴组件：

基本手风琴组件

我希望上面的组件看起来像这样：

中心对齐手风琴

我想让这些标题（Accordion 1，Accordion 2）居中对齐。但我无法做到。

请帮助，以下是 Material-UI 网站的代码：

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

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

标签： reactjsmaterial-uiaccordion

解决方案

为了使这个标题居中，有一个类“ MuiAccordionSummary-content ”。

默认情况下，它是display: flex

现在，您需要添加到名为MuiAccordionSummary-content justify-content 的此类的唯一属性：center;

要覆盖 css，请访问链接： Material UI 中的样式自定义

有时，我们必须覆盖组件的默认行为，或者说根据我们的要求覆盖样式。

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

推荐阅读