Material-UI ExpansionPanelSummary expanded class

In the documentation for Material-UI ExpansionPanelSummary there are several class override names where expanded is one of them.
Could someone explain why it is not possible to use the following code to set the size of the root as well as expanded state?

<ExpansionPanelSummary classes={{ root: { midWidth: 30}, expanded: { minWidth: 30} }}>
foo bar
</ExpansionPanelSummary>


1 Answer
1

you need to follow the styles overriding methods as the material-ui suggested.

please find methods from here: https://material-ui.com/customization/overrides/

here I used classes overriding using withStyles from material ui

const styles = theme => ({
root: {
minWidth: 300
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
},
expanded: { minWidth: 30, backgroundColor: "red" }
});

function SimpleExpansionPanel(props) {
const { classes } = props;
return (
<div className={classes.root}>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
classes={{ root: classes.root, expanded: classes.expanded }}
>
<Typography className={classes.heading}>Expansion Panel 1</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);


find the working example from here: https://codesandbox.io/s/zl4141wm44

I have added expanded and root as you suggested but you can use the other properties as well.(changed the background color in expanded to understand it correctly)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.