如何从 Material UI 更改组件的默认行为答案

【问题标题】：How to change default behavior of components from Material UI如何从 Material UI 更改组件的默认行为
【发布时间】：2020-03-09 23:34:03
【问题描述】：

我正在使用 materialUI 来显示扩展面板，如下代码所示：

import React from 'react'
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

function ExpansionPanelDemo(props) {
  const {curr} = props 
  return (
    <div>

        <ExpansionPanel id={curr.id}>

             <ExpansionPanelSummary  expandIcon={<ExpandMoreIcon />}>
                <Typography>{curr.name}</Typography>
             </ExpansionPanelSummary>

             <ExpansionPanelDetails>
                <Typography> {curr.content} </Typography>
             </ExpansionPanelDetails>

        </ExpansionPanel>

    </div>
)
}

export default ExpansionPanelDemo

它工作正常，但默认情况下，它会在屏幕右侧显示展开图标，我想修改它并在面板左侧显示图标。

我尝试使用文档https://material-ui.com/api/expansion-panel-summary/ 中给出的“IconButtonProps”道具进行此操作，并修改代码如下：

 import React from 'react'
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

 function ExpansionPanelDemo(props) {
   const {curr} = props
   const icon = {
     float: "left"
   }

   return (
    <div>

        <ExpansionPanel id={curr.id}>

             <ExpansionPanelSummary  expandIcon={<ExpandMoreIcon />} IconButtonProps={icon}>
                <Typography>{curr.name}</Typography>
             </ExpansionPanelSummary>

             <ExpansionPanelDetails>
                <Typography> {curr.content} </Typography>
             </ExpansionPanelDetails>

        </ExpansionPanel>

    </div>
)
 }

 export default ExpansionPanelDemo

但是有些问题，代码不起作用。有人可以建议出什么问题或任何其他方法来显示左侧的图标

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

ExpansionPanelSummary 在content 和expandIcon 周围使用flex display。要重新排序这些，您可以使用flex-direction CSS 属性或order CSS 属性。使这个看起来不错的另一项更改是将IconButton 上的edge 属性从end 翻转为start。

这是一个工作示例：

import React from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  }
}));

const FlippedOrderExpansionPanelSummary = withStyles({
  root: {
    flexDirection: "row-reverse"
  }
})(ExpansionPanelSummary);
FlippedOrderExpansionPanelSummary.defaultProps = {
  IconButtonProps: { edge: "start" }
};

export default function SimpleExpansionPanel() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <ExpansionPanel>
        <FlippedOrderExpansionPanelSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>Expansion Panel 1</Typography>
        </FlippedOrderExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
      <ExpansionPanel>
        <FlippedOrderExpansionPanelSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header"
        >
          <Typography className={classes.heading}>Expansion Panel 2</Typography>
        </FlippedOrderExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  );
}