CODEWITHSUNDEEP
reactjsmaterial-ui
dfsdigging
dfsdigging

Reputation: 345

customizing the expansionpanel in material ui and overwriting the styles

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

Upvotes: 4

Views: 12995

Answers (3)

Timothy Hastie
Timothy Hastie

Reputation: 1

I ran into the same issue as you. There is a way to override the defaults in your own style classes:

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

Where 'root' is the className given to the Accordion component. This then ovverides whatever you need to. For me, I only changed it so that the size does not increase when expanding.

Upvotes: 0

jmc42
jmc42

Reputation: 424

I raised the same question here:

MUI Expansion Panel Summary expanded override

In https://codesandbox.io/s/zl4141wm44 if you add minHeight:0 to line 18 of demo.js, why does the minHeight gets ignored.

expanded: { width: "85%", minHeight: 0, backgroundColor: "red" }

I can see that this answer is somehow to suppress .MuiExpansionPanelSummary-root.Mui-expanded.

The solution above creates a custom component and the same issue raised in the github repo (https://github.com/mui-org/material-ui/issues/13576) overrides the expansion behaviour in a theme.

Basically I am asking whether you can override this CSS class in styles without creating a custom component or creating a new theme.

Could someone fork https://codesandbox.io/s/zl4141wm44 to show it can be done just with styles?

Upvotes: 0

Ryan Cogswell
Ryan Cogswell

Reputation: 80996

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:

Edit Compact ExpansionPanelSummary

Upvotes: 3

Related Questions