css - 如何从 Material UI 更改组件的默认行为

Question

我正在使用 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” Prop 来执行此操作并修改代码如下:

 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

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

Answer 1

ExpansionPanelSummary使用 flex display周围content和 expandIcon .要重新订购这些，您可以使用 flex-direction CSS 属性或 order CSS 属性。使这看起来不错的另一个更改是翻转 edge IconButton 上的属性(property)来自 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>
  );
}

相关文档:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items