Removing extra space when expansion-panel opens in material-ui

Question

I want to remove the extra space when the second accordion is clicked in material UI. I see that as we click on the second accordion, it moves down but then there is a gap between the first accordion and the second accordion . Can we remove that extra gap when the second accordion opens ?

Here is the link to the codesandbox . https://codesandbox.io/s/yp9lmvwo1x

Answer 1

As in the code implementation, it is &$expanded. So the margin will be applied only when the panel is expanded. but applying some style using expanded option will not override the default margin.

Here's the fix.

  const styles = theme => ({
    root: {
      width: "100%"
    },
    heading: {
      fontSize: theme.typography.pxToRem(15),
      fontWeight: theme.typography.fontWeightRegular
    },
    expanded: {
      '&$expanded': {
          margin: '4px 0'
       }
    }
  });

Click here to view the solution --> CodeSandbox

Answer 2

Your best bet is to override the default CSS styling with classes. The built in API will help you have conditional styles based on the component. More specifically, the docs show the classes you can modify on the Expansion panel.

Using your code sandbox as a reference:

1. First you add 'expanded' to your styles

const styles = theme => ({
  root: {
    width: "100%"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  },
  expanded: {
    margin: "0 auto"
  }
});

2. Then you specify the CSS on the <ExpansionPanel /> component

...
<ExpansionPanel classes={{ expanded: classes.expanded }}>
...

(Fixed CodeSandbox)

Now it should work as expected, and you can even extend more style by adding to the the object in step one.