尝试在react toastify上添加样式

Question

我试图在react toastify上添加自定义样式，首先我导入了这些

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

然后调用react toast:

const handleToast = () => {
toast("sent mail")
}

在toast容器中添加css:

<div>
<ToastContainer toastStyle={{
marginTop: "4rem",
borderRadius: "20px",
backgroundColor: "red"
}} />
<button onClick={handleToast} className='btn btn-info'>Click here</button>
</div >

但是在ToastContainer组件css不工作。提前感谢

Answer 1

您可以尝试将样式添加到根/全局CSS文件中。你使用的类名主要是:.Toastify.Toastify__toast-container.Toastify__progress-bar.Toastify__toast.Toastify__toast-body

Answer 2

我不太明白你的问题。我相信你想要烤面包片。如果是这样，您可以通过添加这样的类来轻松实现，

toast("Sent mail",{
className: 'black-background',
bodyClassName: "grow-font-size",
progressClassName: 'fancy-progress-bar'
});

你可以在global css文件上添加你喜欢的类名，并在那里应用你想要的样式。在这里,

• className:应用于toast包装(此覆盖toastClassName由容器设置)
• bodyClassName:应用于toast主体(此覆盖bodyClassName由容器设置)
• progressClassName:应用于进度条(这个覆盖的progressClassName是由容器设置的)
• 样式:应用于toast的内联样式

如果你想给ToastContainer设置样式，你也可以这样做。

<ToastContainer toastClassName="foo" style={{ width: "2000px" }} />

• toastClassName:应用于吐司包装

<ToastContainer className="foo" style={{ width: "2000px" }} />

要了解更多关于如何以不同的方式样式化它的信息，您可以查看这里的样式文档如何设置样式