title: Customize toaster from react-toastify
body: <p>I'm using this toaster, it works fine but I'm struggling to change it's style.</p>
  <p>This is my code so far:</p>
  <pre><code>  import { ToastContainer, toast } from 'react-toastify';
    import 'react-toastify/dist/ReactToastify.css';
    
    function App(){
      const notify = () =&gt; toast(&quot;Thanks! We saved your changes.!&quot;);
  
      return (
        &lt;div&gt;
          &lt;button onClick={notify}&gt;Notify!&lt;/button&gt;
          &lt;ToastContainer 
            className=&quot;toaster-container&quot;
            position=&quot;top-right&quot;
            autoClose={111111100}
            hideProgressBar={true}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover/&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  <p>I want to make it look like this:</p>
  <p><a href="https://i.stack.imgur.com/ahUZF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ahUZF.png" alt="enter image description here" /></a></p>
  <p>Added a css class, (<code>className=&quot;toaster-container&quot;</code>) I can see it in inspect mode, it is the container that has a div, which has another div inside and there is the actual toaster.</p>
  <p>I can change the text but cannot make bold only a part of it like in the above picture neither to add an icon there.</p>
  <p>Any suggestions?</p>