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

custom style / css is not being applied to toasts #191

Closed
shirbr510 opened this issue Jun 6, 2018 · 5 comments
Closed

custom style / css is not being applied to toasts #191

shirbr510 opened this issue Jun 6, 2018 · 5 comments
Assignees
Labels

Comments

@shirbr510
Copy link

shirbr510 commented Jun 6, 2018

I am trying out your repo for my project and for now: love it!

but, I'm having an issue with customization.

I'm trying to change the color and size of my toasts like you can see here:
https://github.com/shirbr510/react-toastify-demo/blob/master/src/App.js

I've tried with glamor, but have failed to change the style at all.

can you please help me out?

react-toastify version: 4.0.2

@c2digital
Copy link

Same issue here, copy & pasted from examples, no luck.

React: 16.2.0
React-Toastify: 4.2.0

import React from "react";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { css } from 'glamor'

export default class Playground extends React.Component {

showToast() {

    console.log("showToast");

    toast("Custom style", {
        className: css({
            background: 'black'
        }),
        bodyClassName: css({
            fontSize: '160px'
        }),
        progressClassName: css({
            background: "repeating-radial-gradient(circle at center, red 0, blue, green 30px)"
        })
    });

}


render() {
    return (
        <div >
            <span onClick={() => this.showToast()}>TEST</span>
            <ToastContainer />
        </div >
    );
}

}`

@shirbr510
Copy link
Author

shirbr510 commented Jun 6, 2018

I have reverted to regular classnames & css (non glamor) and it seems to work....
maybe update the docs?

@fkhadra
Copy link
Owner

fkhadra commented Jun 6, 2018

Hello,

The v4 doesn't use glamor anymore. It relies on css to override styles.
Setting className with glamor should work. I'll check what's going on.

@fkhadra fkhadra self-assigned this Jun 6, 2018
@fkhadra
Copy link
Owner

fkhadra commented Jun 7, 2018

The following should work for the next release. I'm fixing the bug

oast("Custom style", {
        className: css({
            background: 'black'
        }),
        bodyClassName: css({
            fontSize: '160px'
        }),
        progressClassName: css({
            background: "repeating-radial-gradient(circle at center, red 0, blue, green 30px)"
        })
    });

@fkhadra
Copy link
Owner

fkhadra commented Jun 7, 2018

I

@fkhadra fkhadra closed this as completed Jun 7, 2018
@fkhadra fkhadra added the bug label Jun 7, 2018
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

3 participants