您可以在此处的文档中找到覆盖 ExpansionPanelSummary 样式的示例：https : //material-ui.com/demos/expansion-panels/#customized-expansion-panel

为了更详细地了解如何适当地覆盖这些样式，查看ExpansionPanelSummary的源代码以了解如何定义默认样式会很有帮助。

这是默认样式的缩写版本，仅包含影响高度的部分：

export const styles = theme => {
  return {
    /* Styles applied to the root element. */
    root: {
      minHeight: 8 * 6,
      '&$expanded': {
        minHeight: 64,
      },
    },
    /* Styles applied to the root element if `expanded={true}`. */
    expanded: {},
    /* Styles applied to the children wrapper element. */
    content: {
      margin: '12px 0',
      '&$expanded': {
        margin: '20px 0',
      },
    },
  };
};

然后，您可以创建自己的自定义摘要组件，使用以下内容覆盖这些样式：

const summaryStyles = {
  root: {
    minHeight: 7 * 4,
    "&$expanded": {
      minHeight: 7 * 4
    }
  },
  content: {
    margin: "4px 0",
    "&$expanded": {
      margin: "4px 0"
    }
  },
  expandIcon: {
    padding: 3
  },
  expanded: {}
};
const CompactExpansionPanelSummary = withStyles(summaryStyles)(
  ExpansionPanelSummary
);
CompactExpansionPanelSummary.muiName = "ExpansionPanelSummary";

您可以muiName在此处找到有关为什么需要该属性的详细信息：如何使用样式组件覆盖 ExpansionPanelSummary 深层元素？

这是一个基于您在问题中包含的沙箱的工作示例：

我在这里提出了同样的问题：

MUI 扩展面板摘要扩展覆盖

在https://codesandbox.io/s/zl4141wm44 中，如果将 minHeight:0 添加到 demo.js 的第 18 行，为什么会忽略 minHeight。

展开：{ 宽度：“85%”，最小高度：0，背景颜色：“红色”}

我可以看到这个答案以某种方式抑制了 .MuiExpansionPanelSummary-root.Mui-expanded。

上面的解决方案创建了一个自定义组件，并且 github 存储库 ( https://github.com/mui-org/material-ui/issues/13576 ) 中提出的相同问题覆盖了主题中的扩展行为。

基本上我是问你是否可以在不创建自定义组件或创建新主题的情况下在样式中覆盖这个 CSS 类。

有人可以分叉https://codesandbox.io/s/zl4141wm44来表明它可以只用样式来完成吗？

我遇到了和你一样的问题。有一种方法可以覆盖您自己的样式类中的默认值：

root: {             
'& .Mui-expanded': {
minHeight: 0,
},
width: '100%',
},

其中 'root' 是提供给 Accordion 组件的 className。这将覆盖您需要的任何内容。对我来说，我只是改变了它，以便在扩展时尺寸不会增加。