Question

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

这是codesandbox的链接。 https://codesandbox.io/s/yp9lmvwo1x

Answer 1

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

使用代码沙箱作为参考：

首先，您需要在样式中添加“扩展”

Common ancestor --> (V1 + V2) --> V3
                        |          |
                        |          |
conflicted stated after merge      new state after resolved conflict

然后您在const styles = theme => ({ root: { width: "100%" }, heading: { fontSize: theme.typography.pxToRem(15), fontWeight: theme.typography.fontWeightRegular }, expanded: { margin: "0 auto" } });组件上指定CSS

<ExpansionPanel />

（Fixed CodeSandbox）

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

Answer 2

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

这是解决方法。

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

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

在Material-UI中打开扩展面板时删除多余的空间

2 个答案: