Question: CSS strange classnames... about react-alert HOT 3 CLOSED

Hi @Tzaphkiel ,

The reason why the classes names are like that it's because we are using glamourous under the hood. It generates the className for us, so our classes won't mess up with your project's own classes or with any other dependency you may be using.

Also, this lib is not really designed to be that flexible, that's why we have the dark and light themes, the idea was to it be a drop-in-ready-to-use-already-looks-beautiful alert.

But if all you want is to change the style of the message (not the alert itself) you can do so. All you have to do is to pass a react component as the message like this:

this.msg.success(<div className="your-class">The Message</div>)

Is that what you are trying to do? Or you have another use case?

Oh, and the demo is still using the v1 of the lib, that's why it's using the old classes, sorry if that's confusing, I didn't have the time to change the demo and the appearance would be identical, so I didn't think it would matter.

from react-alert.

Hi @schiehll ,

Thank you for the clarification. I thought indeed that it had to do with the Glamor used.
Btw, I was still using "react-alert": "1.0.14" in the previous application...

My idea was to tailor the size of the text in the notification content. I actually wanted a (more) discreet notification that could potentially thus be ignored or not impact too much the user when manipulating the interface, especially when it is an info and not a warning or an error.

Your solution works and is good enough for the moment, but I still find the buttons, etc. a bit big:

If you ever have the time, inclination or are looking for a challenge ;-) perhaps you could consider allowing the addition of an extra class at multiple level to tweak the defaults or some similar solution?

from react-alert.

Nice! Glad it did help!

But yeah, that's something that could be really useful for some use cases, I may add it in the future if I have the time.

from react-alert.