question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to add a custom class without replacing 'toast'?

See original GitHub issue

Sorry if this is answered somewhere, but I want to add some custom styles to an individual toast popup (e.g. increase width). I see the toastClass config option - but this replaces the toast class which has essential styles applied to it (from bootstrap styles).

Is the only way to copy all the styles attached to .toast into my own custom class?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

8reactions
scttcpercommented, May 11, 2019

put 'yourclass ngx-toastr' for toastClass?

7reactions
scttcpercommented, May 11, 2019

i had success by being more specific with the classes. could also try !important.

.yourclass.toast-success {
  background-color: blue;
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to add custom css to the single Toast message in Angular?
You can use the titleClass property to apply the css class on the toast message. import { ...
Read more >
How to create a custom toast component with React
To demonstrate how to create custom toast components, we must first ... In React, you can either use class components, which requires you...
Read more >
Toasts · Bootstrap v5.0
Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup. Here we've created a simpler toast by...
Read more >
Bootstrap 5 Toasts Custom content - GeeksforGeeks
There are no predefined classes for toast custom content. You can custom-create them by giving additional controls and adding components ...
Read more >
How to style | React-Toastify - GitHub Pages
#Passing css classes to component · className: applied to the container · toastClassName: applied on the toast wrapper · bodyClassName: applied on the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found