customizing the expansionpanel in material ui and overwriting the styles

Question

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

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

Can you explain as how to over ride in this case ?.MuiExpansionPanelSummary-root-210 — dfsdigging

Ryan Cogswell Ryan Cogswell · Accepted Answer · 2019-04-04T14:32:10

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";

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:

customizing the expansionpanel in material ui and overwriting the styles

2 Answers