Expansion Panel Icon Transitions (Mat. UI)

Question

https://codesandbox.io/s/yp9lmvwo1x In this sandbox you can see the icon is an arrow and the rotation transition is perfectly fine. I'm using a + x for the icon, however, and I need a 45 degree rotation. How do I achieve this?

Answer 1

In the ExpansionPanelSummary source code you can find the syntax for the default styles controlling this:

      '&$expanded': {
        transform: 'translateY(-50%) rotate(180deg)',
      },

You can get a 45 degree rotation by using the following:

  expandIcon: {
    "&$expanded": {
      transform: "translateY(-50%) rotate(45deg)"
    }
  },
  expanded: {}

then in the JSX:

<ExpansionPanelSummary
          classes={{
            expandIcon: classes.expandIcon,
            expanded: classes.expanded
          }}
          expandIcon={<ExpandMoreIcon />}
        >