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

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'}}在组件上以获得适当的间距。