Material-UI中展开面板时如何移除额外的空格

Question

我希望在Material UI中点击第二个手风琴时，能够去除额外的空间。当我们点击第二个手风琴时，它会向下移动，但是第一个手风琴和第二个手风琴之间会出现间隙。 我们能否在第二个手风琴打开时去除这个额外的间隙？这里是codesandbox的链接。 https://codesandbox.io/s/yp9lmvwo1x

- dfsdigging

---

这是它的工作原理，您应该修改核心库本身。打开开发工具并检查元素以查看应用了哪个类，以及是否可以更改它。 - Amir-Mousavi

Answer 1

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

这是修复方法。

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

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

- K Ramakrishna Vaidya

Answer 2

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

以您的代码沙箱为参考：

1. 首先，您需要将“expanded”添加到您的样式中

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

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

- leander