反应吐司不关闭

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 toast，即7.0.4版本顺便说一句，在降级到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';

Answer 2

在我的例子中，我添加了className"吐司习俗"；这与bootstrap类冲突。固定更新className