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

Question

我想在材质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

Answer 1

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

为了更详细地了解如何适当地覆盖这些样式，请查看source code for 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: 8 * 4,
    "&$expanded": {
      minHeight: 8 * 4
    }
  },
  content: {
    margin: "8px 0",
    "&$expanded": {
      margin: "8px 0"
    }
  },
  expanded: {}
};
const CompactExpansionPanelSummary = withStyles(summaryStyles)(props => {
  return <ExpansionPanelSummary {...props} />;
});
CompactExpansionPanelSummary.muiName = "ExpansionPanelSummary";

您可以在此处找到有关为什么需要muiName属性的详细信息：How can I override ExpansionPanelSummary deep elements with styled-components?

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

Answer 2

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

MUI Expansion Panel Summary expanded override

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

扩展：{宽度：“ 85％”，minHeight：0，backgroundColor：“红色”}

我看到这个答案在某种程度上抑制了.MuiExpansionPanelSummary-root.Mui展开。

以上解决方案创建了一个自定义组件，并且在github存储库（https://github.com/mui-org/material-ui/issues/13576）中引发的同一问题将覆盖主题中的扩展行为。

基本上，我在问您是否可以在样式中覆盖此CSS类，而无需创建自定义组件或创建新主题。

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