reactjs - 如何使 Material UI ExpansionPanel 高度填充空间可用

Question

我正在使用Material UI ExpansionPanel 组件（自定义扩展面板示例）。我希望开放式面板能够填充 100% 的可用空间。

我曾尝试使用 css 为 ExpansionPanel 和 ExpansionPanelDetails 设置 root.height 和 root.minHeight，但这似乎不起作用：

const ExpansionPanel = withStyles({
  root: {
    height:'100%',
    minHeight:'100%',
  }
})(MuiExpansionPanel);

const ExpansionPanelDetails = withStyles({
  root: {
    height:'100%',
    minHeight:'100%',
  }
})(ExpansionPanelDetails);

这是ExpansionPanel 测试的代码框。

谢谢你的帮助

Answer 1

您可以通过 实现它flexGrow: 1，但扩展面板的父级应该具有display: 'flex'和flexDirection: 'column'属性。您可以分享一个可重复的示例以获得准确的答案。