How to change default behavior of components from Material UI

user_11352278 0
Viewed 766

I am using materialUI to display an Expansion Panel as shown in following code:

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

It works fine but by default, it displays the expand icon to the right of the screen , I want to modify this and display the icon to the left of panel.

I tried doing this using "IconButtonProps" prop given in the documentation https://material-ui.com/api/expansion-panel-summary/ and modified code as follows:

 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

But something is off, the code isn't working. Can someone suggest what's wrong or any other methods to display the icon to left

material-ui reactjs css
1 Answers

ExpansionPanelSummary uses a flex display around the content and expandIcon. To re-order these, you can use either the flex-direction CSS property or the order CSS property. One other change to make this look decent is to flip the edge property on the IconButton from end to start.

Here is a working example:

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>
  );
}

Edit ExpansionPanelSummary expand on left

Related documentation:

user_74959300
Related