Dashboard widget class vs msg.className

[jbudd]

I have a widget, eg a text node, with class set to "green" in the config. This is intended to define default styling. It works fine.

.green p {
color: green;
}
.red p {
color: red;
}

If I send a message with msg.className "red" then that message is indeed displayed in red.

But subsequent messages without msg.className never revert to green.

I'm guessing it's a feature of CSS rather than a bug in NR. Is there a work-around for this?

[hotNipi]

Empty string does the trick, if you wan to remove all added classes

 msg.className = ""

But reverting by magic will not happen. If you are controlling it, you'll need to control it for all conditions you need.

[jbudd]

Happy cake day @hotNipi

@hotNipi

Empty string does the trick

Not really.

It stops the display in red but still overrides the class set in the widget config.
The text is displayed in white (the default for a dark theme dashboard), it does not revert to green.

I'm not sure I want magic, I just think that if msg.className does not exist, then the class specified for the widget should be applied. Maybe it is and I just misinterpret the results.

[hotNipi]

It still think the logic is - if msg.className does not exist, it means that list of the class names should remain as is. Reverting is an operation you need to describe somehow. There isn't any built in logic for that.

If you want default color be something else than dashboard default then you can set it with using node-id attribute selector.

[node-id="7fa7a07fe2814d5d"] p{
        color:green;
    }

But that has higher specificity so if you then want to change it with msg.className, that class must have rules with the !important flag.

 .red p {
        color: red !important;
    }

Then still you'll need to send empty string to remove any added class to get it back to your desired default