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:

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)

来源：https://stackoverflow.com/questions/51122546/material-ui-expansionpanelsummary-expanded-class

标签

material-ui