Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css doesn't work in 3.1.0 #103

Closed
yq314 opened this issue Dec 14, 2017 · 15 comments
Closed

css doesn't work in 3.1.0 #103

yq314 opened this issue Dec 14, 2017 · 15 comments
Assignees
Labels

Comments

@yq314
Copy link

yq314 commented Dec 14, 2017

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

@fkhadra
Copy link
Owner

fkhadra commented Dec 14, 2017

Hey @yq314 ,

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

Thanks

@yq314
Copy link
Author

yq314 commented Dec 14, 2017

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
Copy link
Owner

fkhadra commented Dec 14, 2017

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

Here is a working snippet:
Edit React-toastify fix issue #103

@fkhadra fkhadra closed this as completed Dec 14, 2017
fkhadra added a commit that referenced this issue Dec 14, 2017
@fkhadra fkhadra self-assigned this Dec 14, 2017
@fkhadra
Copy link
Owner

fkhadra commented Dec 14, 2017

@yq314 I updated the doc btw 😁

@yq314
Copy link
Author

yq314 commented Dec 14, 2017

react toastify fix issue 103 codesandbox
The CodeSandbox example doesn't seem to work for me?

@yq314
Copy link
Author

yq314 commented Dec 14, 2017

I'm using Chrome 62.0.3202.94 btw

@fkhadra
Copy link
Owner

fkhadra commented Dec 14, 2017

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

@yq314
Copy link
Author

yq314 commented Dec 14, 2017

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

@yq314
Copy link
Author

yq314 commented Dec 14, 2017

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

@fkhadra fkhadra reopened this Dec 14, 2017
@fkhadra
Copy link
Owner

fkhadra commented Dec 14, 2017

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

@fkhadra fkhadra added the bug label Dec 14, 2017
@fkhadra
Copy link
Owner

fkhadra commented Dec 14, 2017

Css rules are not merged correctly.

@fkhadra
Copy link
Owner

fkhadra commented Dec 14, 2017

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

@yq314
Copy link
Author

yq314 commented Dec 14, 2017

thanks for the quick action! @fkhadra

@fkhadra
Copy link
Owner

fkhadra commented Dec 14, 2017

@yq314 the new release is live 🚀

@fkhadra fkhadra closed this as completed Dec 14, 2017
@yq314
Copy link
Author

yq314 commented Dec 15, 2017

marvellous, this saved my life thanks @fkhadra

vasiliydolmatov pushed a commit to vasiliydolmatov/react-toastify that referenced this issue Apr 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants