减少材料ui中扩展面板的大小

Question

我有这个要求，我需要在打开或扩展时减小扩展面板的大小。我查看了元素和样式选项卡，但我发现我们需要覆盖样式。谁处理了这个案子？

这是沙箱。 https://codesandbox.io/s/yp9lmvwo1x我基本上想减少第一支手风琴中蓝色部分的大小。

Answer 1

你可以使用material-ui提供的withStyles HOC来做到这一点。

const CustomExpansionPanel = withStyles(() => ({
  root: {
    width: "100%",
  },
  expanded: {
    height: "110px"
  }
}))(ExpansionPanel);

但是，如果你使用它们，你还必须调整内部ExpansionPanelSummary和ExpansionPanelDetails。

以下是上面的工作示例：https://codesandbox.io/s/nr65w2qwp4