吐司未显示正确样式- nextjs

rjee0c15  于 2023-01-13  发布在  其他
关注(0)|答案(2)|浏览(131)

我使用的是react-toastify
_应用程序.tsx:

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

...

  return (
    <AppStateProvider>
      <MainProvider>
      <HeaderProvider>
        <Component {...pageProps} />
        <ToastContainer
          position="top-right"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={true}
          pauseOnFocusLoss
          draggable
          pauseOnHover
        />
       </HeaderProvider>
       </MainProvider>
    </AppStateProvider>
  );
}

在我组件中:

toast.success( "success")

但它是这样显示的:

但在演示中显示:

7vhp5slm

7vhp5slm1#

这是我对SO的第一个回答!在尝试React Toastify时也遇到了类似的情况。
基本上你需要陈述你想要你的吐司词的主题。
例如:

toast.success("success", {
  theme: "colored"
})

“colored”是你要找的主题

toast.success("success", {
  theme: "dark"
})

“黑暗”也可用。
如果您没有提供任何主题,您将在问题中上传的图片中获得结果

相关问题