在 material-ui 中打开扩展面板时删除多余的空间答案

【问题标题】：Removing extra space when expansion-panel opens in material-ui在 material-ui 中打开扩展面板时删除多余的空间
【发布时间】：2019-03-25 13:55:45
【问题描述】：

我想在材质 UI 中单击第二个手风琴时删除多余的空间。我看到当我们点击第二个手风琴时，它会向下移动，但是第一个手风琴和第二个手风琴之间有一个间隙。当第二个手风琴打开时，我们可以消除额外的间隙吗？

这里是代码框的链接。 https://codesandbox.io/s/yp9lmvwo1x

【问题讨论】：

这就是它的工作原理，你应该修改核心库本身。打开 devtools 并检查元素以查看应用了什么类，以及是否可以更改它

标签： javascript reactjs material-ui

【解决方案1】：

在代码实现中，它是&$expanded。因此，仅当面板展开时才会应用边距。但是使用扩展选项应用一些样式不会覆盖默认边距。

这是解决办法。

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

点击这里查看解决方案 --> CodeSandbox

【讨论】：

【解决方案2】：

最好的办法是覆盖默认的CSS styling with classes。内置 API 将帮助您根据组件设置条件样式。更具体地说，文档显示the classes you can modify on the Expansion panel。

使用您的代码沙箱作为参考：

首先将“扩展”添加到样式中

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

然后在 <ExpansionPanel /> 组件上指定 CSS

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

(Fixed CodeSandbox)

现在它应该可以按预期工作了，您甚至可以通过在第一步中添加对象来扩展更多样式。

【讨论】：