Material ui - change the height of the Accordion

Question

I am working on the migration of a JavaFx HMI to a web application working with React.js. For the display of graphical widgets, I'm also working with Material.ui.

To match with the layout of the HMI I have to update the layout of some predefined components by Material ui.

In my case, I need to reduce the height of the Accordion. I did something like this :

const IconLeftAccordionSummary = withStyles({
  root: {
    minHeight: 15,
    maxHeight: 15,
    backgroundColor: '#a5a5a5',
})(AccordionSummary);

and then I basically use it like this

<IconLeftAccordionSummary>
</IconLeftAccordionSummary>

Here is the result, it's what I'm expected when it's collapsed.

However, when I expand it, it comes back to its original height, with some margins between blocks. Like this:

I tried different things like adding

'&$expanded': {
  minHeight: 15,
  maxHeight: 15,
},

or

expanded: {
  minHeight: 15,
  maxHeight: 15
},

in the definition of IconLeftAccordionSummary, but nothing changes.

Does anyone can help me on how to do this ? Am I at least trying to do it in the right way?

Thank you :)

Answer 1

It's just necessary to override Accordion's root on classes prop. Something like:

<Accordion classes={{ root: classes.accordionRoot }}>
...
</Accordion>

And then in your makeStyles :

accordionRoot: {
   height: "15px"
}

Here a working example.

Answer 2

After some tries I found an answer:

const StyledAccordionSummary = withStyles({
root: {
    minHeight: 15,
    maxHeight: 15,
    backgroundColor: '#a5a5a5',
    '&.Mui-expanded': {
      minHeight: 15,
      maxHeight: 15,
      backgroundColor: '#a5a5a5',
    }
},
expandIcon: {
    order: -1
}
})(AccordionSummary);

And I apply this style to the AccordionSummary component.

"root" applies on the accordion when it's closed, and the '&.Mui-expanded' applies on the accordion when it's opened.