title: How can I change the styles of the react-toastify popup message?
body: <p>I want to add my own custom style to the react-toastify message popup, depending on whether its success or error. So far I tried the following approach:</p>
  <p><strong>toastify.js</strong></p>
  <pre><code>import { toast, Slide } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  import { css } from &quot;glamor&quot;;
  
  
  toast.configure({
      position: toast.POSITION.BOTTOM_RIGHT,
      autoClose: 3000,
      transition: Slide,
      pauseOnFocusLoss: false,
          className: css({
          backgroundColor: 'red',
      }),
      bodyClassName: css({
          backgroundColor: 'blue',
          height: '100%',
          width: '100%',
      })
  });
  
  export default function (message, type, styles = {}) {
      switch (type) {
          case type === 'success':
              toast.success(message);
              break;
  
          case type === 'error':
              toast.error(message);
              break;
  
          case type === 'info':
              toast.info(message);
              break;
  
          case type === 'warn':
              toast.warn(message);
              break;
              
          default:
              toast(message);
              break;
      }
  }
  </code></pre>
  <p>This is a function in which I define what type of message style toastify shows based on the type param. Then I call this function like this:</p>
  <p>export default function ({params}) {
  ...
  async function deleteTodo (id) {
  try {
  const res = await axios.delete(<code>http://localhost:8000/api/delete-task/${id}</code>);</p>
  <pre><code>        toastifyMessage(res.data, 'success');
      } catch (error) {
          errorInfo(toastifyMessage(error, 'error'));
      }
  }
  
  return (
      &lt;li className=&quot;menu-item&quot;&gt;
          &lt;i 
              className=&quot;fas fa-trash&quot; 
              onClick={() =&gt; deleteTask(task._id)}
          &gt;&lt;/i&gt;
      &lt;/li&gt;
  );
  </code></pre>
  <p>}</p>
  <p>And this is what I get:</p>
  <p><a href="https://i.stack.imgur.com/qyeu4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qyeu4.png" alt="enter image description here" /></a></p>
  <p>I still get that white background. All I want is to remove the default styles and add my own for success and error.</p>