CODEWITHSUNDEEP
reactjsmaterial-uijss
Raheel
Raheel

Reputation: 9024

Override Material UI Expansion Panel Summary

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.

Upvotes: 2

Views: 5500

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80996

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:

Edit ExpansionPanelSummary

Upvotes: 8

Related Questions