How to style different toast types globally ?

` // Verification email sent if (status === ‘checkMail’) { toast.success(‘Please check your email’, { className: { color: ‘#343a40’, minHeight: ‘60px’, borderRadius: ‘8px’, background: ‘#2FEDAD’, boxShadow: ‘2px 2px 20px 2px rgba(0,0,0,0.3)’ }, progressClassName: css({ background: ‘#007aff’ }) }); }

// Verification Success
if (status === 'emailVerified') {
  toast.success('Thankyou, your email has been verified!', {
    className: {
      color: '#343a40',
      minHeight: '60px',
      borderRadius: '8px',
      background: '#2FEDAD',
      boxShadow: '2px 2px 20px 2px rgba(0,0,0,0.3)'
    },
    progressClassName: css({
      background: '#007aff'
    })
  });
}

// password updated 
if (status === 'passwordUpdated') {
  toast.success('Password has been updated!', {
    className: {
      color: '#343a40',
      minHeight: '60px',
      borderRadius: '8px',
      background: '#2FEDAD',
      boxShadow: '2px 2px 20px 2px rgba(0,0,0,0.3)'
    },
    progressClassName: css({
      background: '#007aff'
    })
  });
}

// ---------   Signup Fail Toaster
if (status === 'signupFail') {
  toast.error('User Already Exists!', {
    className: {
      color: '#fff',
      minHeight: '60px',
      borderRadius: '8px',
      boxShadow: '2px 2px 20px 2px rgba(0,0,0,0.3)'
    },
    progressClassName: css({
      background: '#007aff'
    })
  });
}

// ---------   Login Fail Toaster
if (status === 'fail') {
  toast.error('Wrong User name and password!', {
    className: {
      color: '#fff',
      minHeight: '60px',
      borderRadius: '8px',
      boxShadow: '2px 2px 20px 2px rgba(0,0,0,0.3)'
    },
    progressClassName: css({
      background: '#007aff'
    })
  });
}`

As you can see i have multiple toasters maily two types. one is success toaster and another is error. both types of toaster have same css i.e., all success toasters have same css and all error toasters share same css. how do i define global css for both type ? or how can i declare global css for different toaster types on <ToastContainer/>. I dont want to manage my css from style.css or any css file.

[fkhadra]

Hello @sushmit-oodles,

It can be done easily with your own implementation as follow:

Cheers

[alexkhismatulin]

@fkhadra could you attach a snippet as well cause the link to sandbox is broken? I believe this is a very common question but it’s not covered in docs.