Active class works with error but not message and warning-CodePudding

I have a component with a member called capsLockIsOn. And this works perfectly:

<div class="error" [class.active]="capsLockIsOn">Caps is on!</div>

However, when I change to class="warning" or class="message" it does not work. By "it does not work" I mean that it's constantly showing "Caps is on!" regardless if it's on or off. The code in the component is simply this:

this.CapsLockIsOn = event.getModifierState && event.getModifierState('CapsLock');

But as I said. It works for class error, but not warning and message. Why? And how do I solve it?

CodePudding user response：

From your description it sounds like there is no css describing the "active" state on your warning and message classes.

What you want to do is add the same class properties you have on your error with active, to warning and message.

So somewhere is your stylesheets you have something like:

.error.active{
  ...
}

but not:

.warning.active{
  ...
}
.danger.active{
  ...
}