如何修改Material UI Expansion Panel展开图标至左侧？

Let's break down why your initial approach didn't work, then walk through the correct solutions to get that icon on the left side.

Why your first attempt failed #

The IconButtonProps prop is meant to pass props to the underlying IconButton component (like aria-label, onClick, etc.), not directly apply CSS styles. When you passed { float: "left" } directly to IconButtonProps, it wasn't being interpreted as a style object—even if you wrapped it in a style property like IconButtonProps={{ style: { float: 'left' } }}, it still wouldn't reliably work because the ExpansionPanelSummary uses flexbox for layout, which ignores float properties.

Solution 1: Reverse the flex direction (simplest method) #

The ExpansionPanelSummary has a default flex layout with flex-direction: row, which places the panel content first (left) and the expand icon second (right). By reversing this direction, we can flip their positions seamlessly.

For Material UI v5 (using sx prop):

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

function ExpansionPanelDemo(props) {
  const { curr } = props
  return (
    <div>
      <ExpansionPanel id={curr.id}>
        <ExpansionPanelSummary 
          expandIcon={<ExpandMoreIcon />}
          {/* Reverse flex direction to move icon to left */}
          sx={{ flexDirection: 'row-reverse' }}
        >
          <Typography>{curr.name}</Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            {curr.content}
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  )
}
export default ExpansionPanelDemo

For Material UI v4 (using makeStyles):

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';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  summary: {
    flexDirection: 'row-reverse'
  }
});

function ExpansionPanelDemo(props) {
  const { curr } = props
  const classes = useStyles();
  return (
    <div>
      <ExpansionPanel id={curr.id}>
        <ExpansionPanelSummary 
          expandIcon={<ExpandMoreIcon />}
          className={classes.summary}
        >
          <Typography>{curr.name}</Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            {curr.content}
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  )
}
export default ExpansionPanelDemo

Solution 2: Fine-tune with custom CSS targeting #

If you need more control (like adjusting spacing between the icon and text), you can target the icon's wrapper class directly:

// For MUI v5, add this to the sx prop of ExpansionPanelSummary
sx={{
  '& .MuiExpansionPanelSummary-expandIconWrapper': {
    order: -1, // Move icon to the first position in the flex container
    marginRight: '16px' // Add custom spacing between icon and text
  }
}}

This works by modifying the order property of the icon wrapper (flex items are sorted by this value, default is 0), giving you precise control over placement.

Key takeaway #

Work with the component's built-in flexbox layout instead of fighting it. Reversing the flex direction or adjusting the icon's order is the most reliable way to move the expand icon to the left.

内容的提问来源于stack exchange，提问作者karthik reddy