Material-UI - 如何将自定义 Snackbar 的过渡更改为 Slide

Posted 2023-02-22

【中文标题】Material-UI - 如何将自定义 Snackbar 的过渡更改为 Slide

【英文标题】：Material-UI - How to change transition of Customized Snackbar to Slide

【发布时间】：2020-10-09 04:58:11

【问题描述】：

我想将snackbar 的过渡更改为Slide 而不是Grow（默认行为），但我不能这样做，因为我正在使用带有Alert 的snackbar。

这是 Material-UI 的原始演示： https://codesandbox.io/s/e1dks

如果我导入这个：

import Slide from '@material-ui/core/Slide';
import  TransitionProps  from '@material-ui/core/transitions';

创建这个函数：

function SlideTransition(props: TransitionProps) 
  return <Slide ...props direction="up" />;

并在 Snackbar 标签上插入此属性：

TransitionComponent=SlideTransition

我有错误： Cannot read property 'getBoundingClientRect' of null

查看当我尝试同时使用 Snackbar 和 Alert 和 Slide 时出现的错误 https://codesandbox.io/s/material-demo-ysub3

https://material-ui.com/api/slide/ 有一个警告可以提供帮助，但我不明白这一点： A single child content element. ⚠️ Needs to be able to hold a ref.

我正在使用带有 Typescript 的 React。

【问题讨论】：

你可以试试这个：codesandbox.io/s/yfet4?file=/demo.js:121-130

【参考方案1】：

看你的例子，控制台报错：

Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Slide)`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://material-ui.com/r/caveat-with-refs-guide

在“更多信息”链接之后，它建议您需要将“普通功能组件”包装在 React.forwardRef 中。

这导致 Alert 函数从：

function Alert(props: AlertProps) 
  return <MuiAlert elevation=6 variant="filled" ...props />;

到

const Alert = React.forwardRef((props, ref) => <MuiAlert elevation=6 variant="filled" ...props ref=ref />);

进行此更改后，代码将按预期工作 - 警报从底部滑入而不是弹出视图。

【讨论】：

非常感谢您的帮助，我不知道如何使用forwardRef，它工作得很好。