React-toastify: css doesn't work in 3.1.0

[yq314]

setting css with glamor doesn't work in 3.1.0, tried the example in document, no effect at all.

[fkhadra]

Hey @yq314 ,

Could you share a sample ? It will be easier to troubleshoot.

Thanks

[yq314]

Hi @fkhadra ,

I just ran a simple react app with this code:

 import React from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import { css } from 'glamor';

 class App extends React.Component {
     closeAfter15 = () => toast("YOLO", { autoClose: 15000, className: css({
         background: "black"
       }) });

     closeAfter7 = () => toast("7 Kingdoms", { autoClose: 15000 })

     render(){
         return (
             <div>
             <button onClick={this.closeAfter15}>Close after 15 seconds</button>
             <button onClick={this.closeAfter7}>Close after 7 seconds</button>
             <ToastContainer autoClose={8000} />
             </div>
         );
     }
 }

 export default App;

click on the two buttons trigger the same toast with the default color, however the first one is supposed to be black.

[fkhadra]

@yq314 you have to use backgroundColor instead of background. My mistake, I'll fix the doc right now.

Here is a working snippet:

[fkhadra]

@yq314 I updated the doc btw 😁

[yq314]

The CodeSandbox example doesn't seem to work for me?

[yq314]

I'm using Chrome 62.0.3202.94 btw

[fkhadra]

We are using the same version. It's working for me. Could you try to refresh ? Maybe a cache issue.

[yq314]

hmm, so weird, I cleared cache still no luck, tried in incognito mode also same...

[yq314]

it doesn't work for me on both my PC and Mac...

[fkhadra]

I'll try with create-react-app to see what's going on

[fkhadra]

Css rules are not merged correctly.

[fkhadra]

@yq314 got a fix. I'll let you know when it's live

[yq314]

thanks for the quick action! @fkhadra

[fkhadra]

@yq314 the new release is live 🚀

[yq314]

marvellous, this saved my life thanks @fkhadra