在材质ui中自定义扩展面板并覆盖样式 [英] customizing the expansionpanel in material ui and overwriting the styles

问题描述

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

I want to customize the expansionpanel in material ui.I see that the data i want to render on expansion panel takes too much space because of the default styling of the expansion panel.

   <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 

我看到扩展面板默认具有这种样式

I see that the expansion panel has this style by default

 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

I want to overwrite these default styles . Here is the simple code on codesandboxlink https://codesandbox.io/s/yp9lmvwo1x

推荐答案

您可以在以下文档中找到覆盖ExpansionPanelSummary样式的示例:

You can find examples of overriding ExpansionPanelSummary styles in the documentation here: https://material-ui.com/demos/expansion-panels/#customized-expansion-panel

为了更详细地了解如何适当地覆盖这些样式，请查看

In order to understand in more detail how to override these styles appropriately, it is helpful to look at the source code for ExpansionPanelSummary in order to see how the default styles are defined.

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

Here is an abbreviated version of the default styles that only includes the parts impacting the height:

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',
      },
    },
  };
};

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

You can then create your own custom summary component that overrides these styles with something like the following:

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属性的详细信息:

You can find details about why the muiName property is necessary here: How can I override ExpansionPanelSummary deep elements with styled-components?

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

Here is a working example based on the sandbox you included in your question:

这篇关于在材质ui中自定义扩展面板并覆盖样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！