Inline Alert: icon hidden by background

Hey there,

I am trying to implement a Inline Alert (both variants: Success and warning). The problem I have is the following:

The Icon is hidden behind the background image. It looks like the components puts both icon and backgound in the same color.

<Alert
  title="Debug information has been copied to your clipboard."
  variant={AlertVariant.success}
  isInline={true}
  action={<AlertActionCloseButton onClose={this.hideAlert} />}
/>

<Alert
  title="Debug information was copied to your clipboard, but is outdated now. It could be caused by new data received by auto refresh timers."
  variant={AlertVariant.warning}
  isInline={true}
  action={<AlertActionCloseButton onClose={this.hideAlert} />}
          />

After unmarking the background property from .pf-c-alert__icon, the Alert is properly rendered.

Am I doing something wrong?

Thank you,

[SpyTec]

PF3 has different classes for alerts so that wouldn’t be the problem. I would put my bets on the project importing PF4 CSS in an incorrect manner or if you’re importing multiple things from PF4, that it’s in the wrong order

[SpyTec]

For my app I’m using something like this, which will include everything that’s needed AFAIK. Which is documented on the website

@import '~@patternfly/patternfly/patternfly.scss';