在 Material ui 中自定义扩展面板并覆盖样式

我想在材质 ui 中自定义扩展面板。我发现由于扩展面板的默认样式，我想要在扩展面板上渲染的数据占用了太多空间。

   <ExpansionPanel   defaultExpanded={isCurrentInning}>
        <ExpansionPanelSummary  classes={{ expanded:classes.expandedPanel }} expandIcon={<ExpandMoreIcon className="label"/>}>
          <div className={classes.inningInfoContainer}>
            <div className={classes.teamNameOrderContainer}>
              <span  className="label">
                 <img   src={image} width="25em" />
                 <span > {battingTeamName}</span>
              </span>
            </div>
    // closing tags of ExpansionPanel and ExpansionPanelSummary 

我看到扩展面板默认就是这个样式

 MuiExpansionPanelSummary-root-209 {
     display: flex;
     padding: 0 24px 0 24px;
     min-height: 48px;
transition: min-height 150ms cubic-bezier(0.4, 0, 0.2, 1)           0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

我想覆盖这些默认样式。 这是codesandboxlink上的简单代码https://codesandbox.io/s/yp9lmvwo1x https://codesandbox.io/s/yp9lmvwo1x

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

为了更详细地了解如何适当地覆盖这些样式，查看ExpansionPanelSummary 的源代码 https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js以查看默认样式是如何定义的。

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

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 深层元素？ https://stackoverflow.com/questions/55426843/how-can-i-override-expansionpanelsummary-deep-elements-with-styled-components/55427389#55427389

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