CODEWITHSUNDEEP
reactjsmaterial-uiaccordion
cognitive_ninja
cognitive_ninja

Reputation: 13

How to align text to center in Accordion Component of Material-UI?

This is my Accordion component:

Basic Accordion Component

I want the above component to look like this:

Center Aligned Accordion

I want to make those headings (Accordion 1, Accordion 2) center aligned. But I'm unable to do it.

Please help, below is the code from Material-UI website:

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 Component Link: https://next.material-ui.com/components/accordion/#basic-accordion

Upvotes: 1

Views: 6733

Answers (3)

Burak Bayraktaroğlu
Burak Bayraktaroğlu

Reputation: 53

Here is Material 5, SX Solution if you don't want to use classes;

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

So, when you cover whole area with Typography component (which, you are already using), you can use Typography's align prop.

Upvotes: 1

AnsonH
AnsonH

Reputation: 3305

Code

First we create our styles using the useStyles() API:

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

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

Next, in every AccordionSummary component, we apply the styles using the classes prop like the following:

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

Edit on Code Sandbox

Explanation

With reference to the example from the documentation on customizing components, we open Chrome DevTools to inspect the accordion:

DevTools screenshot

Note that the class name of the content container is MuiAccordionSummary-content. This means we can apply styling to AccordionSummary component using the following format:

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

Therefore, we define a style object called content using makeStyles API, then we use this object to style every AccordionSummary component.

Upvotes: 3

krishna_tandon
krishna_tandon

Reputation: 393

To make this heading come in the center, there is a class "MuiAccordionSummary-content".

By-default, it is display: flex

Now, the only property you need to add to this class named as MuiAccordionSummary-content justify-content: center;

To override the css, please visit the link : Style Customisation in Material UI

At times, we have to OVERRIDE the default behaviour of the components or say override the styles as per our requirements.

If you don't want to directly override it, use the inlinestyle or a specific classname like we do for normal css.

Upvotes: 3

Related Questions