Question

在我的应用中，展开箭头必须位于面板的左侧。但是，默认情况下它显示在右侧。

此：

<ExpansionPanelSummary
    className={classes.panelSummary}
    expandIcon={<ExpandMoreIcon />}
    IconButtonProps={{edge: 'start'}}
    aria-controls='panel1a-content'
    id='panel1a-header'
>

没有做到。

Answer 1

当然，您不能（轻松地）更改组件在HTML中的显示顺序。但是，有一种方法仅使用CSS。 Cursor cursor = sb.rawQuery("select * from " + Constants.TABLE_NAME + " where " + Constants.C_ID + "=" + id + " and " + Constants.KEY_TODO_USER_ID_FK + "=" + userid, null);使用ExpansionPanelSummary；因此，您可以在图标上设置display: flex属性，使其显示在内容的左侧。

这可以通过order或useStyles来实现（或者可以使用普通CSS，但是我还没有尝试过）；这是使用后者的方法：

withStyles

然后，当您希望图标显示在左侧时，可以使用import withStyles from "@material-ui/core/styles/withStyles"; const IconLeftExpansionPanelSummary = withStyles({ expandIcon: { order: -1 } })(ExpansionPanelSummary);而不是IconLeftExpansionPanelSummary编写其余代码。不要忘记在组件上设置ExpansionPanelSummary以获得适当的间距。

Answer 2

您可以通过从expandIcon中删除扩展面板图标并将其作为子代添加到摘要中，从而在左侧获得扩展面板图标

<ExpansionPanel defaultExpanded={true}>
    <ExpansionPanelSummary aria-controls="panel1a-content">
     {this.state.expanded ? <RemoveIcon/> : <ExpandIcon />}
     <Typography component='h4' variant='h4'>My Expansion Panel</Typography>
    </ExpansionPanelSummary>
    <ExpansionPanelsDetails />
</ExpansionPanel>

Answer 3

很简单

像这样在<ExpansionPanelSummary>上添加课程

<ExpansionPanelSummary className={classes.panelSummary}>

像这样在jss中针对此类添加css

panelSummary:{flexDirection: "row-reverse"},

如果使用CSS

像这样在<ExpansionPanelSummary>上添加课程

<ExpansionPanelSummary className="panelSummary">

像这样在jss中针对此类添加css

.panelSummary{flex-direction: row-reverse;}

Answer 4

<AccordionSummary
      className={classes.accordionSummary}
      classes={{
        expandIcon: classes.expandIcon,
        expanded: classes.expanded
      }}
      IconButtonProps={{
        disableRipple: true
      }}
    ></AccordionSummary>

您可以添加类并使用弹性方向

accordionSummary: {
  flexDirection: 'row-reverse'
}

Answer 5

挑战在于，订单已硬编码到代码库中，您将无法照常使用ExpansionPanel。

如果您查看implementation，则会发现以下代码

      <div className={clsx(classes.content, { [classes.expanded]: expanded })}>{children}</div>
      {expandIcon && (
        <IconButton
          disabled={disabled}
          className={clsx(classes.expandIcon, {
            [classes.expanded]: expanded,
          })}
          edge="end"
          component="div"
          tabIndex={-1}
          aria-hidden
          {...IconButtonProps}
        >
          {expandIcon}
        </IconButton>
      )}

您看到<div>包含文本，然后显示IconButton。

因此，您可能必须使用开箱即用的产品或根据material-UI提供的内容创建自己的组件。

希望有帮助。

Answer 6

您可以像这样修改CSS类：

注意绝对位置，通过这种方式，您可以使用“ left”或“ right”属性将包含图标的div移动到任意位置

const useStyles = makeStyles((theme) => ({
  ExpansionPanelSummaryExpandedIcon: {
    '& div.MuiExpansionPanelSummary-expandIcon': {
      position: 'absolute',
      right: '5%',
    },
  }
}));

，然后在ExpansionPanelSummary中使用

<ExpansionPanelSummary
     expandIcon={<ExpandMoreIcon />}
     aria-controls="panel1-content"
     id="panel1bh-header"
     className={classes.ExpansionPanelSummaryExpandedIcon}
>

参考： https://cssinjs.org/?v=v10.3.0 https://v4-8-3.material-ui.com/customization/components/#overriding-styles-with-classes

如何在左侧更改扩展面板图标的位置？

6 个答案: