Override Material UI Expansion Panel Summary

Question

expansionPanelSummary: {
        content: {
            "& > :last-child": {
                paddingRight: 0
            }
        },
        expandIcon: {
            top: "80%"
        }
    }

I am trying override the styles of Material UI Expansion Panel Component but not able to get results

<ExpansionPanelSummary
                    expandIcon={<ExpandMoreIcon color="primary" />}
                    classes={{ content: classes.expansionPanelSummary.content, expandIcon: classes.expansionPanelSummary.expandIcon}}
                >

I cannot override it on a theme level as this component is being used elsewhere with default settings.

Ryan Cogswell Ryan Cogswell · Accepted Answer · 2019-02-20T12:52:20

It looks like you have put an extra level ("expansionPanelSummary") into your styles object. That is not valid. The top level properties on the styles object passed to withStyles are what will be turned into classes. In your example, classes.expansionPanelSummary would have a value that is a classname generated by JSS, but classes.expansionPanelSummary.content would not.

Here's an example of the syntax needed:

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

const styles = {
  expansionPanelSummaryContent: {
    "& > :last-child": {
      paddingRight: 100
    }
  },
  expansionPanelSummaryExpandIcon: {
    top: "80%"
  }
};

function SimpleExpansionPanel(props) {
  const { classes } = props;
  return (
    <div>
      <ExpansionPanel>
        <ExpansionPanelSummary
          classes={{
            content: classes.expansionPanelSummaryContent,
            expandIcon: classes.expansionPanelSummaryExpandIcon
          }}
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography className={classes.heading}>
            Expansion Panel 1 - increasing the amount of content so that I can
            tell a difference when the padding-right is altered.
          </Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  );
}

export default withStyles(styles)(SimpleExpansionPanel);

I changed the paddingRight to 100 just so I could easily see an effect to verify it was being applied.

Here it is in a CodeSandbox:

Override Material UI Expansion Panel Summary

1 Answers