title: React - Material-UI Accordion: How to center header and expand icon
body: <p>I'm currently implementing the Accordion component of the Material-UI library in my react project:</p>
  <p><strong>What I want to do is to have the accordion summary (header with &quot;Accordion 1&quot;, &quot;Accordion 2&quot;) centered and the expand icon (arrow) right below, also centered.</strong></p>
  <p>In the Material-UI documentation (<a href="https://material-ui.com/components/accordion/" rel="nofollow noreferrer">https://material-ui.com/components/accordion/</a>), the displayed layout looks like the following:
  <a href="https://i.stack.imgur.com/yZYKe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yZYKe.png" alt="enter image description here" /></a></p>
  <p>With the following code (as shown in the documentation):</p>
  <pre><code>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) =&gt; ({
    root: {
      width: '100%',
    },
    heading: {
      fontSize: theme.typography.pxToRem(15),
      fontWeight: theme.typography.fontWeightRegular,
    },
  }));
  
  export default function SimpleAccordion() {
    const classes = useStyles();
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;Accordion&gt;
          &lt;AccordionSummary
            expandIcon={&lt;ExpandMoreIcon /&gt;}
            aria-controls=&quot;panel1a-content&quot;
            id=&quot;panel1a-header&quot;
          &gt;
            &lt;Typography className={classes.heading}&gt;Accordion 1&lt;/Typography&gt;
          &lt;/AccordionSummary&gt;
          &lt;AccordionDetails&gt;
            &lt;Typography&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
              sit amet blandit leo lobortis eget.
            &lt;/Typography&gt;
          &lt;/AccordionDetails&gt;
        &lt;/Accordion&gt;
        &lt;Accordion&gt;
          &lt;AccordionSummary
            expandIcon={&lt;ExpandMoreIcon /&gt;}
            aria-controls=&quot;panel2a-content&quot;
            id=&quot;panel2a-header&quot;
          &gt;
            &lt;Typography className={classes.heading}&gt;Accordion 2&lt;/Typography&gt;
          &lt;/AccordionSummary&gt;
          &lt;AccordionDetails&gt;
            &lt;Typography&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
              sit amet blandit leo lobortis eget.
            &lt;/Typography&gt;
          &lt;/AccordionDetails&gt;
        &lt;/Accordion&gt;
        &lt;Accordion disabled&gt;
          &lt;AccordionSummary
            expandIcon={&lt;ExpandMoreIcon /&gt;}
            aria-controls=&quot;panel3a-content&quot;
            id=&quot;panel3a-header&quot;
          &gt;
            &lt;Typography className={classes.heading}&gt;Disabled Accordion&lt;/Typography&gt;
          &lt;/AccordionSummary&gt;
        &lt;/Accordion&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>THANK YOU!</p>