如何在React的MUI组件中缩小AccordionSummary高度

要缩小“hi”文本周围的间距，你需要针对性覆盖MUI AccordionSummary的几个默认样式——之前的方案没命中核心样式才会无效，以下是两种可行方案：

方案一：直接用sx属性内联覆盖（推荐） #

在AccordionSummary组件上添加sx属性，同时覆盖最小高度、内边距、内容容器边距和展开图标的内边距：

<AccordionSummary
  aria-controls="panel1bh-content"
  id="panel1bh-header"
  className="accSummary"
  expandIcon={<BsChevronDown />}
  sx={{
    minHeight: '24px', // 自定义你想要的最小高度
    padding: '0 16px', // 左右内边距可按需调整，上下设为0
    '& .MuiAccordionSummary-content': {
      margin: '4px 0', // 内容上下间距，默认是12px 0，调小到你需要的数值
    },
    '& .MuiAccordionSummary-expandIconWrapper': {
      padding: '2px', // 展开图标的内边距，默认8px，缩小后减少额外空间
    }
  }}
>
  <div>hi</div>
</AccordionSummary>

方案二：通过外部CSS文件覆盖 #

如果你习惯用外部样式表，在InventoryTrackingHeading.css中添加以下样式（利用你已加的accSummary类名）：

.accSummary {
  min-height: 24px !important;
  padding: 0 16px !important;
}

.accSummary .MuiAccordionSummary-content {
  margin: 4px 0 !important;
}

.accSummary .MuiAccordionSummary-expandIconWrapper {
  padding: 2px !important;
}

为什么之前的方法无效？ #

• 直接设height: 0没用：因为MUI默认给AccordionSummary设置了min-height，优先级比height高
• disableGutters仅移除左右的 gutter 间距，不会影响上下的内边距和最小高度
• 审查元素改样式没生效可能是因为样式优先级不够，或者没覆盖到内部的内容容器（.MuiAccordionSummary-content）和图标容器样式

内容的提问来源于stack exchange，提问作者Divakar R