Hi Lukasz, 

You raised a similar issue earlier, my answer now is the same as before. You can refer to my original response here:  https://www.outsystems.com/forums/discussion/103631/question-about-css-styles-inside-block/#Post454615 .

Instead of !important, use more specific selectors. For example

.screen .chat .chat-message {

  background-color: blue;

  color: white;

}

The more specific the selector, the more likely it will override the existing style without using !important.

2. Use a Custom Class at the Widget Level

Go to the widget (e.g., the ChatMessage container) and add a custom class like custom-chat-message. Then define:

css

Copy code

.custom-chat-message {

  background-color: blue;

  color: white;

}

This limits the override scope and avoids affecting other parts.

Hi,

Instead of using !important you can implement parent class it increases the specificity of an element if you use 2 classes instead of 1 like:-

.parent-class .child-class {}

so the css priority increases and it will automatically implement the CSS which has more specificity