时间戳

首页 > 解决方案 > 从 react-toastify 自定义烤面包机

javascript - 从 react-toastify 自定义烤面包机

问题描述

我正在使用这款烤面包机，它工作正常，但我正在努力改变它的风格。

到目前为止，这是我的代码：

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Thanks! We saved your changes.!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer 
          className="toaster-container"
          position="top-right"
          autoClose={111111100}
          hideProgressBar={true}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover/>
      </div>
    );
  }

我想让它看起来像这样：

在此处输入图像描述

添加了一个 css 类， ( className="toaster-container") 我可以在检查模式下看到它，它是有一个 div 的容器，里面有另一个 div 并且有实际的烤面包机。

我可以更改文本，但不能像上图那样只将其中的一部分加粗，也不能在那里添加图标。

有什么建议么？

标签： javascriptcssreactjstoastreact-toastify

解决方案

看起来你可以将 JSX 传递给toast函数，这样你就可以分解和设计你的内部设计，并结合使用 css 来运行外部 toast css。这也将允许您在此内部标记中的任意位置插入图标。像这样的东西：


const notify = () =>
    toast(
      <div style={{ height: "100%", borderLeft: "5px solid green" }}>
        {/* insert your icon here */}
        <span style={{ fontWeight: "bold", color: "#000" }}>Success</span>{" "}
        Default address update
      </div>
    );

查看此沙箱，了解如何使用 JSX 和主 css (style.css) 文件，以获得接近您共享的屏幕截图的内容。

推荐阅读