从react-toastify自定义烤面包机

Question

我正在使用这个烤面包机，它工作得很好，但我正在努力改变它的风格。

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

  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")我可以在inspect模式下看到它，它是一个有div的容器，里面有另一个div，这是实际的烤面包机。

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

有什么建议吗？

Answer 1

看起来你可以把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>
    );

查看this sandbox，看看如何使用JSX和主要的css (style.css)文件，以获得与您共享的屏幕截图相近的内容。