Material ui - 更改手风琴的高度

Question

我正在致力于将 JavaFx HMI 迁移到使用 React.js 的 Web 应用程序。为了显示图形小部件，我也在使用 Material.ui。

为了与 HMI 的布局相匹配，我必须通过 Material ui 更新一些预定义组件的布局。

就我而言，我需要降低手风琴的高度。我做了这样的事情：

const IconLeftAccordionSummary = withStyles({
  root: {
    minHeight: 15,
    maxHeight: 15,
    backgroundColor: '#a5a5a5',
})(AccordionSummary);

然后我基本上像这样使用它

<IconLeftAccordionSummary>
</IconLeftAccordionSummary>

这是结果，这就是我所期望的折叠后的结果。

然而，当我展开它时，它会回到原来的高度，块之间有一些边距。像这样：

我尝试了不同的事情，比如添加

'&$expanded': {
  minHeight: 15,
  maxHeight: 15,
},

或者

expanded: {
  minHeight: 15,
  maxHeight: 15
},

在 IconLeftAccordionSummary 的定义中，但没有任何变化。

有谁可以帮助我如何做到这一点？我至少尝试以正确的方式去做吗？

谢谢 ：）

Answer 1

经过一番尝试，我找到了答案：

const StyledAccordionSummary = withStyles({
root: {
    minHeight: 15,
    maxHeight: 15,
    backgroundColor: '#a5a5a5',
    '&.Mui-expanded': {
      minHeight: 15,
      maxHeight: 15,
      backgroundColor: '#a5a5a5',
    }
},
expandIcon: {
    order: -1
}
})(AccordionSummary);

我将此样式应用于 AccordionSummary 组件。

“root”适用于手风琴关闭时的情况，“&.Mui-expanded”适用于手风琴打开时的情况。