In my project, I am using materialUI to showcase an Expansion Panel. Here is the code snippet:
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
Although it performs well, by default, the expansion icon appears on the right side of the panel. I aim to change this and have the icon displayed on the left side instead.
To achieve this, I tried adjusting the "IconButtonProps" property based on the information provided in the documentation here. However, after making changes to the code as per the instructions, it doesn't seem to work properly.
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
If anyone knows what might be causing the issue or has alternative solutions to position the icon on the left, your insights would be greatly appreciated.