html - 语义 UI - 为什么表单内没有消息？

Question

我正在使用 Semantic-UI 并尝试向我的 Form 添加警告 message，如下所示:

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

但由于某种原因，它根本没有出现在页面上。只有在我发现这是因为 SemanticUI 自己的内部 CSS 规则明确地将消息隐藏在表单中之后。来自 semantic.min.css:

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

这是为什么？我可以覆盖它吗？我有理由不这样做吗？

Answer 1

嗯，我不是 100% 确定，但我猜测 错误/成功/警告 类用于表单验证消息，因此它们默认隐藏的原因。我通过使用特定颜色类而不是 warning 解决了这个问题:

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

这非常有效，并且在视觉上与 warning 没有区别。