如何将扩展面板图标位置更改为左侧？

Question

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

这个 ：

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

没有做到。

Answer 1

当然，您不能（轻松）更改组件在 HTML 中的显示顺序。但是，有一种方法只使用 CSS。ExpansionPanelSummary用途display: flex; 因此，您可以设置order图标上的属性，使其显示在内容的左侧。

这可以通过useStyles或withStyles（或者可能使用纯 CSS，但我没有尝试过）来实现；以下是您将如何使用后者：

import withStyles from "@material-ui/core/styles/withStyles";

const IconLeftExpansionPanelSummary = withStyles({
    expandIcon: {
        order: -1
    }
})(ExpansionPanelSummary);

然后，您可以使用IconLeftExpansionPanelSummary而不是ExpansionPanelSummary希望图标出现在左侧的时间编写其余代码。不要忘记IconButtonProps={{edge: 'start'}}在组件上设置适当的间距。

Answer 2

这很简单

1. <ExpansionPanelSummary>像这样添加类

<ExpansionPanelSummary className={classes.panelSummary}>

2. 像这样在jss中针对此类添加CSS

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

如果使用CSS

1. <ExpansionPanelSummary>像这样添加类

<ExpansionPanelSummary className="panelSummary">

2. 像这样在jss中针对此类添加CSS

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

Answer 3

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

您可以添加类并使用 flex-direction

accordionSummary: {
  flexDirection: 'row-reverse'
}

Answer 4

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

如果你看一下实现，你会发现代码如下

      <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 提供的内容创建您自己的组件。

希望有帮助。