在 material-ui 中打开扩展面板时移除额外空间

Question

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

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

Answer 1

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

这是修复。

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

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

Answer 2

最好的选择是使用 classes 覆盖默认的 CSS 样式。内置的 API 将帮助您拥有基于组件的条件样式。更具体地说，文档显示了您可以在扩展面板上修改的类。

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

1. 首先，将“扩展”添加到您的样式中

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

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

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

（固定CodeSandbox）

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