React - Material-UI Accordion: как центрировать заголовок и развернуть значок

В настоящее время я реализую компонент Accordion библиотеки 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>
  );
}

БЛАГОДАРЮ ВАС!


reactjs material-ui css react-material
person Michel H    schedule 11.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Изменение 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);

Редактировать сводку AccordionSummary по центру

Если вы хотите, чтобы стрелка находилась по центру под текстом сводки (а не рядом с ним, как в моем первом примере), вы можете использовать следующее:

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

Редактировать сводку по центру AccordionSummary (разветвленный)

Этот второй пример также демонстрирует использование класса для SimpleAccordion (как указано в комментариях) с использованием withStyles вместо _4 _ / _ 5_ для дополнительного стиля в примере.

person Ryan Cogswell    schedule 11.08.2020
comment
Привет, Райан. Большое спасибо! Две вещи: 1. Можно ли поместить стрелку посередине нижнего ограничителя, а не рядом с заголовком 2. Я не использую перехватчики реакции, а скорее классы реакции. Как изменить стиль в функции useStyles: const useStyles = (theme) = ›({....}) - person Michel H; 11.08.2020
comment
@MichelH. Я обновил свой ответ, включив в него второй пример. - person Ryan Cogswell; 11.08.2020