在 React 中使用 MUI 为 Snackbar 添加过渡效果-js教程-PHP中文网

在 React 中使用 MUI 为 Snackbar 添加过渡效果

聖光之護

发布： 2025-08-16 20:26:01

原创

439人浏览过

在 react 中使用 mui 为 snackbar 添加过渡效果

本文介绍了如何在 React 应用中使用 Material-UI (MUI) 的 Snackbar 组件，并为其添加滑动过渡效果。通过定义自定义的过渡组件，并将其作为 TransitionComponent 属性传递给 Snackbar，可以实现平滑的动画效果，提升用户体验。文章提供了详细的代码示例，帮助开发者快速掌握该技巧。

在使用 Material-UI (MUI) 构建 React 应用时，Snackbar 组件是一个常用的用于显示简短消息的提示框。为了提升用户体验，通常会为 Snackbar 添加过渡效果。本文将介绍如何实现这一目标，并避免常见的错误。

1. 创建自定义过渡组件

首先，我们需要创建一个自定义的过渡组件。这个组件本质上是一个简单的 React 函数组件，它使用 MUI 提供的 Slide 组件来实现滑动效果。

import Slide, { SlideProps } from '@mui/material/Slide';

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

登录后复制

在这个例子中，我们创建了一个名为 SlideTransition 的组件，它接收 SlideProps 类型的 props，并使用 Slide 组件，设置 direction 属性为 "up"，表示从底部向上滑动。你可以根据需要调整 direction 属性的值，例如 "down", "left", "right"。

2. 将过渡组件传递给 Snackbar

接下来，将创建的过渡组件作为 TransitionComponent 属性传递给 Snackbar 组件。

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

function MyComponent() {
  const [open, setOpen] = React.useState(false);

  const handleClose = (event: React.SyntheticEvent | Event, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  };

  return (
    <Snackbar
      open={open}
      onClose={handleClose}
      TransitionComponent={SlideTransition}
      message="This is a snackbar with slide transition!"
    />
  );
}

登录后复制

在这个例子中，我们将 SlideTransition 组件作为 TransitionComponent 属性传递给 Snackbar 组件。当 open 属性为 true 时，Snackbar 将会使用 SlideTransition 组件来显示。

3. 完整示例

以下是一个完整的示例，展示了如何在 React 应用中使用 MUI 的 Snackbar 组件，并为其添加滑动过渡效果：

import React from 'react';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import Slide, { SlideProps } from '@mui/material/Slide';

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

function MyComponent() {
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event: React.SyntheticEvent | Event, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  };

  return (
    
      
      
    
  );
}

export default MyComponent;

登录后复制

注意事项