how can I customize css style? about react-alert HOT 9 CLOSED

You can also use css only.

Here is my code

<div className='alerts-container'>
  <AlertContainer ref={a => { this.msg = a; }} {...this.options} />
</div>

.alerts-container {
  > div[class^='css-'] > span > div[class^='css-'] {
    // entire alert styles here.

    div {

      // alert icon
      &:first-child {
      }
    
      // alert message div
      &:nth-child(2) {
      }

      // alert close div
      &:last-child {
      }
    }
  }
}

from react-alert.

with v3 you can now create custom alert templates, hope it helps!

from react-alert.

Hi @ok713, you can refer to #20:

You can use a React Element as a message, so to add a text-transform you could do something like this:
this.msg.success(<div style={{textTransform: 'capitalize'}}>TEXT WILL BE CAPITALIZED</div>)

Hope this helps!

from react-alert.

@ok713 did you solved your issue?

from react-alert.

It will be really handy if single alert container could have class depending on type. I'll ease stylying. Also each element (icon, content and close-btn) could have separated class.

from react-alert.

@davidhu2000 What kind of CSS syntax is this? VSCode is not accepting it

EDIT: And neither does CSSLint http://csslint.net/

from react-alert.

@neilyoung might be scss

from react-alert.

@davidhu2000 Thanks for enlighten me :)
EDIT: And it works

from react-alert.

Finally :) , but a little late. We had to migrate to another alerts package.
However this give us an oportunity to go back to use yours :)

from react-alert.