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

Question

我想将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。

Answer 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} />);

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