javascript - Removing extra space when expansion-panel opens in material-ui - Stack Overflow

admin管理员组

文章数量:1287960

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 .

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

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Mar 25, 2019 at 14:35 kukkuz 42.4k66 gold badges6464 silver badges102102 bronze badges asked Mar 25, 2019 at 13:55 dfsdiggingdfsdigging 34511 gold badge55 silver badges1616 bronze badges 1

• this is how it works, you should modify the core library itself. open devtools and check the element to see what class is applied, and if you can change it or not – Amir-Mousavi Commented Mar 25, 2019 at 14:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

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 ponent. 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 /> ponent

...
<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.

本文标签： javascriptRemoving extra space when expansionpanel opens in materialuiStack Overflow