Semantic UI - Why no message inside a Form?

Question

I'm using Semantic-UI and I was trying to add a warning message to my Form, like this:

<form>
    ...stuff...
    <div class="ui warning message">
        <div class="header">
            Title of the message
        </div>
        Text of the message
    </div>
</form>

But for some reason it wasn't showing up at all on the page. Only after I found out that it's because SemanticUI's own internal CSS rules explicitly hide messages inside forms. From semantic.min.css:

.ui.form .error.message, .ui.form .success.message, .ui.form .warning.message {
    display: none;
}

Why is this? Can I override it? Is there a reason why I shouldn't?

Answer 1

Well, I'm not 100% sure, but I'm guessing that the error / success / warning classes are used for form validation messages, thus the reason they are hidden by default. I solved the issue by using the specific color class rather than the warning one:

<form>
    ...stuff...
    <div class="ui yellow message">
        <div class="header">
            Title of the message
        </div>
        Text of the message
    </div>
</form>

This works perfectly and is visually indistinguishable from the warning one.