reactjs - ReactToastify 位置在 React 中不起作用

Question

toastify/dist/ReactToastify.css` 我无法管理 Toast 以显示在右下角。我正在使用确切的代码作为文档。但它不工作

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

function myComponent () {
   
   ...
   const submit = () => {
       toast.success('Your Message was sent to Wasfa Team', { poistion: toast.POSITION.BOTTOM_RIGHT });
   }
   ...
   return (
     ...
     <ToastContainer />
   )
}

Answer 1

只需设置位置属性

   <ToastContainer position="bottom-right"/>

Answer 2

您必须将位置定义为道具ToastContainer

<ToastContainer position="bottom-right" />

Answer 3

只使用位置

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

function myComponent () {
   
   ...
   const submit = () => {
       toast.success('Your Message was sent to Wasfa Team', { poistion: "bottom-right" });
   }
   ...
   return (
     ...
     <ToastContainer />
   )
}