Change animation of material-ui dialog show

Question

Is it possible to change show animation of dialog in material-ui for react using css? I'm not advanced in css but I know that there exists something like transtion and transform.

Answer 1

12/2021 UPDATE:

The answer below was written for an early release of material-ui v1 and is ancient history. With material-ui version 5, the concept is basically the same and the current Dialog Demo shows how this can be accomplished.

Import the transition you want, but you need to use React.forwardRef because the transition expects to receive a ref (more on that in the React Docs):

import Slide from '@mui/material/Slide';

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

Then:

 <Dialog
   open={open}
   TransitionComponent={Transition}
   keepMounted
   onClose={handleClose}
   aria-describedby="alert-dialog-slide-description"
 >

---

Original Material-UI V1 Answer:

The Dialog component exposes a transition prop that can be used to override the default. There is an example in the Dialog demo (labeled Slide in Alert Dialog) that uses their provided Slide transition:

import Slide from 'material-ui/transitions/Slide';

Then:

<Dialog open={this.state.open} transition={Slide} onRequestClose={this.handleRequestClose}>

Here are the transition components they provide:

• Collapse
• Fade
• Grow
• Slide

If none of these serve your purpose, you can use them as a starting point for creating your own Transition component.