When used with bootstrap, the toast is not displayed.

[itouoti12]

Do you want to request a feature or report a bug? Perhaps a bug due to a conflict. Reporting is the main thing.

What is the current behavior? Toast does not appear when toast.success('hoge'); is executed.

What is the expected behavior? Executing toast.success('hoge'); will display toast.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• "vite":"^4.2.0",.
• "typescript": "*",.
• "react": "^18.2.0",.
• "react-bootstrap":"^2.7.3",.
• "react-toastify":"^9.1.2",.
• "bootstrap":"^5.2.3",
• Verified with Google Chrome.

Detail

I tried to use react-toastify on React with bootstrap installed to use the grid system to display toast, but it did not show up. I tracked down the cause and found that the bootstrap CSS was being applied against react-toastify.

/node_modules/bootstrap/dist/css/bootstrap.min.css

.toast:not(.show) {
    display: none; 
}

This CSS is applied to the following tags <div class="Toastify__toast">... </div>

Workaround

My workaround for this event is to explicitly specify the CSS using the style option.

toast.success('hoge', {
   style:{
      display: 'flex'
   }
 });

[TobiTenno]

heyo! i had a similar problem. I'm using parcel and scss for my main styles. what fixed this for me was importing the main scss styles last in my root styles def.

specifically....

@import '~bootstrap/scss/bootstrap';

/*[... all my other styles ...]*/

@import '~react-toastify/scss/main';