custom style / css is not being applied to toasts

[shirbr510]

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]

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]

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

[fkhadra]

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]

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]

I