有反应的祝酒词不会关闭

Question

我有一个react应用程序，我使用react-toastify提示某些消息。然而，每当我在祝酒词上点击x键时，它们就不会关闭。但是，当我配置了autoClose: delay时，它们就会关闭，如下所示。我也可以把它们拖走，然后往那边靠近。

下面是我为祝酒而创建的一个小实用程序：

import { toast } from 'react-toastify';
export const notifyInfo = (msg, delay = 3000) => {
    toast.info(msg, {
        position: 'top-center',
        autoClose: delay,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined
    });
};

下面是我在想要展示吐司的组件上使用它的方式：

import { ToastContainer } from 'react-toastify';
import * as Msg from '../utils/messaging_utils';
...
...
Msg.notifyInfo("Test Message", 2500);

我非常感谢任何关于如何使关闭的点击工作的指示。

我使用的是最新的react-toastify，即7.0.4btw版本，在降级到6.2.0时，我可以看到关闭按钮工作得很好。

Answer 1

解决方案：

进口react toastify css

import 'react-toastify/dist/ReactToastify.css';

• App.js应该导入

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';