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

只需要在 Widget build(BuildContext context) { return Scaffold( key: scaffoldKey, backgroundColor: Colors.white, floatingActionButton: FloatingActionButton( onPressed: () async { final selectedMedia = await selectMedia(); if (selectedMedia != null && validateFileFormat(selectedMedia.storagePath, context)) { showUploadMessage(context, 'Uploading file...', showLoading: true); final downloadUrl = await uploadData( selectedMedia.storagePath, selectedMedia.bytes); ScaffoldMessenger.of(context).hideCurrentSnackBar(); if (downloadUrl != null) { setState(() => uploadedFileUrl = downloadUrl); showUploadMessage(context, 'Success!'); } else { showUploadMessage(context, 'Failed to upload media'); } } final postsRecordData = createPostsRecordData( photoUrl: uploadedFileUrl, ); await PostsRecord.collection.doc().set(postsRecordData); }, backgroundColor: Colors.black, elevation: 8, ), 属性上覆盖 Accordion 的 root。类似的东西：

classes

然后在您的 <Accordion classes={{ root: classes.accordionRoot }}> ... </Accordion> 中：

makeStyles

Here 一个有效的例子。

Answer 2

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

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”在手风琴打开时应用在手风琴上。