Rotate renderDetail arrows

[wmoore8]

Hello! Minor but curious question regarding the Detail Panel arrows on MRT grid.

I don't particularly enjoy the direction of the arrows, so I changed them!

muiExpandButtonProps: ({row}) => ({
    sx: {
       transform: `${row.getIsExpanded() ? 'rotate(180deg)' : 'rotate(-90deg)'}`,
       '&.Mui-disabled': {
          color: 'grey.300'
       }
    },
    disabled: !renderDetail(row.original as R)
})

However, this introduces a very interesting issue where the arrows, that are now pointing right when collapsed, and down when expanded, rotate a complete 270 degrees counter clockwise instead of 90 degrees clockwise.

detail.arrow.mov

I've tried different rotations, but they all seem to do the same thing no matter if I rotate -90 degrees or 270 degrees.

Without adding a complex transition, is there a way to override this default behavior?

[KevinVandy]

The icon itself is receiving a style transform. You could target the svg styles with an important override