Question

在Material-UI ExpansionPanelSummary的文档中，有几个类替代名称，其中expand是其中之一。有人可以解释为什么无法使用以下代码设置根的大小以及扩展状态吗？

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

Answer 1

您需要遵循material-ui建议的样式覆盖方法。

请从此处查找方法：https://material-ui.com/customization/overrides/

在这里，我使用了材料ui中使用 withStyles 覆盖的类

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

我已经按照您的建议添加了expand和root，但是您也可以使用其他属性。（更改了expand的背景色以正确理解它）

Material-UI ExpansionPanelSummary扩展类

1 个答案: