React-toastify: Styles defined by classes seem to be overridden by cx

[prmichaelsen]

If I create my toast like so:

    return toast('toast', {
        className: 'my-toast',
    });

with scss

.my-toast {
    border-radius: 4;
}

The final resulting Toast has my styles applied and then the Toastify__toast style applied on top of that.

[fkhadra]

Hello @prmichaelsen,

classNames library preserve css order. In the sample below, the class foobar is applied last:

Can you try to replicate the issue on codesandbox?

Thanks

[prmichaelsen]

Hello @fkhadra, thank you for the fast response. I will try to recreate the issue for you in the sandbox by EOD

[prmichaelsen]

Here is a code sandbox:

I added the border-radius property to the css for foobar. I applied the class to both className and bodyClassName options and saw results with neither. From inspection, it appears the border-radius property is being overridden.

[fkhadra]

Hey @prmichaelsen,

Thanks for the feedback. The file style.css was loaded before ReactToastify.css, you need to load ReactToastify.css first:

import 'react-toastify/dist/ReactToastify.css';
import './style.css';

[prmichaelsen]

Ok, I see that you are correct. Thank you again for the help.