html - 更改material-ui对话框显示的动画

Question

是否可以使用 css 更改 material-ui 中对话框的显示动画以进行 react ？我在 css 方面并不先进，但我知道存在诸如转换和转换之类的东西。

Answer 1

12/2021 更新:

下面的答案是为 material-ui v1 的早期版本编写的，是古老的历史。使用 material-ui 版本 5，概念与当前基本相同 Dialog Demo展示了这是如何实现的。

导入你想要的转换，但你需要使用 React.forwardRef 因为转换需要接收一个 ref(更多信息在 React Docs 中):

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

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

然后:

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

---

原创素材-UI V1答案:

Dialog 组件公开了一个可用于覆盖默认值的转换属性。 Dialog demo 中有一个示例(标记为警报对话框中的幻灯片)使用他们提供的幻灯片转换:

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

然后:

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

这是他们提供的过渡组件:

• Collapse
• Fade
• Grow
• Slide

如果这些都不符合您的目的，您可以将它们用作创建您自己的 Transition 组件的起点。