Как изменить поведение компонентов по умолчанию из пользовательского интерфейса материала

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

Работает нормально, но по умолчанию отображает значок расширения справа от экрана, я хочу изменить это и отобразить значок слева от панели.

Я попытался сделать это, используя опору «IconButtonProps», приведенную в документации https://material-ui.com/api/expansion-panel-summary/, и изменил код следующим образом:

 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 использует гибкий дисплей вокруг content и expandIcon. Чтобы переупорядочить их, вы можете использовать либо свойство flex-direction CSS, либо свойство order CSS. Еще одно изменение для придания этому приличному виду - перевернуть свойство edge на IconButton с 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