React-toastify: How to style different toast types globally ?

[ghost]

` // 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 . 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

[ghost]

Hello @fkhadra ,

thanx it works. just one more thing is there any way to overwrite close button's css also ? some how in my code the close button is little lower because of inherited line height. if i inspeact from dev tools and give it line height:1 then it moves little up where it should be as usual. so i was wondering if i could change line height property somehow instead of rendering custom component for close button ?

[fkhadra]

You're welcome.
For the close button you need to create your own for the moment. I updated the sanbox example.
You can set the closeButton globally or per toast

[megelismi]

@fkhadra How do you style default toast using this construct? I tried the following. All of the rest work, but I got 'Uncaught TypeError: (0 , _toastify.toast) is not a function' when trying to render the default.

export default { default(msg, options = {}){ return toast.error(msg, { ...options, className: { color: '#000', }, progressClassName: css({ background: '#707070' }) }); } }

[fkhadra]

Hello @megelismi,

Could you tell me which version you are using?
For the default notification you just need to do as follow:

toast(yourContent, options); instead of default(...)

This is what you are looking for?

[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.

[iepur1lla]

An option would be, as from @fkhadra suggest on bountysource, to change the style of the already existing classes.

.Toastify__toast-container {
  width: 320px;
}
.Toastify__toast--default {
    background: #fff;
    color: #aaa;
 }
  .Toastify__toast--info {
    background: #3498db;
 }
  .Toastify__toast--success {
    background: #07bc0c;
 }
  .Toastify__toast--warning {
    background: #f1c40f;
 }
  .Toastify__toast--error {
    background: #e74c3c;
 }

[sofianeOuafir]

.Toastify__toast--info {
background: #3498db;
}

add !important if it doesn't work.

For instance:

.Toastify__toast--info {
  background: $navy !important;
}