Material-UI - Как изменить переход Custom Snackbar в Slide

Question

Я бы хотел изменить переход закусочной панели на Slide вместо Grow (поведение по умолчанию), но я не могу этого сделать, так как я использую закусочную с Alert.

Это оригинал демо из 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 с предупреждениями и слайдами одновременно 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.

I ' m, используя React с Typescript.

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

После внесения этого изменения код работает как и ожидалось - предупреждение скользит снизу, а не появляется в поле зрения.