Use with no generated styles

[k-funk]

Is there any simple way to remove all inline styles?

I'd like to use only scss/classNames with no styles in .js (including the container border-radius and success/error/etc colors), but it seems like the only way to do that is a bunch of overrides using import { style } from 'react-toastify';, which doesn't help with styling the toastContainer.

[fkhadra]

Hello @k-funk,

The library is not using inline style but styled component. Only the needed css is injected. So if for example, you do the following:

toast('coucou', {
className: {
    borderRadius: '10px'
    }
});

The border radius will be added to the generated css class.

[k-funk]

Sorry, I meant generated styles. Is there a way that I can remove all generated/injected styles so that I can use purely css + and css classes for styling (no styles in js)?

[fkhadra]

Not for the moment but I think that I'll think about adding a way to choose which implementation suits your needs.

[jeron-diovis]

Also, it would be nice to have props for defining css classes for different toast types. Or, maybe, ability to make ToastContainer to render custom Toast component – so developer can wrap standard Toast and provide className based on type prop.

[fkhadra]

got your idea @jeron-diovis.

For the moment one could do the following instead of using toast directly:

import { toast } from 'react-toastify';

export default {
  error(msg, opt = {}){
   return toast.error(msg, {
     className: customClassHere,
     ...opt
   })
  },
   success(msg, opt = {}){
   return toast.success(msg, {
     className: customClassHere,
     ...opt
   })
  },
}

I'll take some time to review the internal implementation

[igrek8]

@fkhadra Nope, the example above does not solve the problem referenced by @k-funk. The problem is that glamour injects css right after the app main stylesheet.css. That way glamour's styles override the application styles. The lib does everything I need but having no option to disable glamour brings problems :(

[jeron-diovis]

@crabicode I ended up with this:

import { ToastContainer } from "react-toastify"

class MyToastContainer extends React.Component {
  render() {
    return <ToastContainer ...{this.props} /> 
  }

  componentDidMount() {
    const glamorStyles = document.querySelector("style[data-glamor]")
    if (glamorStyles) {
      glamorStyles.parentNode.removeChild(glamorStyles)
    }
  }
}

Quite rough and simple. Anyway I don't need anything from default styles.

[fkhadra]

Hello,

Sorry for the late reply. @crabicode does the solution of @jeron-diovis solve your issue? @jeron-diovis thanks for the solution btw.

[igrek8]

@fkhadra, @jeron-diovis example is good workaround. But I certainly beilieve the lib would require opt-in for using glamour (at least for message styling, not container). One could also use !important but it feels a bit hacky.

[fkhadra]

@crabicode I totally agree with you. I will work on it. You are not the first asking for that kind of feature.

Edit: Do you have any example or lib that allow choosing between styled component and normal Css ? Or if you have any idea on how to do it, I would love to hear it. Thanks

[fkhadra]

I released the v4. I switched back to css.