Is there a way to disable Material UI expansion panel's animation?

Question

I want to disable the animation of Material UI expansion panel in React. How can I disable all the animations applied to the expansion panel?

Tried overwriting the transitions but it didn't help. Let me know how you would overwrite that.

PS: If that is not possible let me know any other light weight expansion panel (accordion) to use with styling customization.

Answer 1

Yes. You can do this by manipulating the TransitionProps prop, as such:

  <ExpansionPanel
    defaultExpanded
    square
    TransitionProps={{
      timeout: 0
    }}
  >

The timeout: 0 prop can be discovered by looking at the Collapse API, which is the default TransitionComponent of ExpansionPanel: https://material-ui.com/api/collapse/