尝试在react上添加样式

Question

我试图添加自定义风格的反应，首先，我有进口这些。

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

而不是叫反应吐司：

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

在这里，我在土司容器中添加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文件中。您将使用的classNames主要是：.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:应用于吐司包装器(此重写toastClassName由容器设置)
• bodyClassName:应用于吐司体(这个覆盖bodyClassName由容器设置)
• progressClassName:应用于进度条(容器设置了此重写progressClassName )
• 风格:适用于吐司的内联风格。

另外，如果您想要对ToastContainer进行样式设置，您可以使用相同的方式。

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

• toastClassName:应用在吐司包装纸上

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

要了解更多关于如何以不同方式对其进行样式设置的信息，您可以查看有关从这里进行如何风格样式设置的文档。