Material-UI ExpansionPanelSummary расширенный класс

Question

В документации для Material-UI ExpansionPanelSummary есть несколько имен переопределения классов, где раскрыто одно из них. Может кто-нибудь объяснить, почему нельзя использовать следующий код для установки размера корня, а также расширенного состояния?

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

Answer 1

вам нужно следовать методам переопределения стилей в соответствии с предложенным Material-UI.

пожалуйста, найдите методы здесь: https://material -ui.com / customization / overrides /

здесь я использовал переопределение классов, используя withStyles из материала 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);

найти рабочий пример здесь: https://codesandbox.io/s/zl4141wm44

Я добавил расширенный и root, как вы предложили, но вы также можете использовать и другие свойства (изменил цвет фона в расширенном, чтобы понять его правильно)