使用 WTForms 的 render_kw() 覆盖默认 CSS 类

Question

在带有Bootstrap-Flask 扩展名的Flask 应用程序中，当表单的HTML 使用render_form() 自动呈现时，如何使用WTForms 的render_kw 类参数覆盖默认样式？ [*]

我定义了一个简单的表单，它提供了一个确认删除数据库记录的按钮，我希望该按钮是红色而不是标准的灰色：

class DeleteMappingForm(FlaskForm):
    submit = SubmitField(_l('Delete mapping'))

自动生成的 HTML（仅关注 <input> 元素）是：

<input class="btn btn-secondary btn-md" id="submit" name="submit" type="submit" value="Delete mapping">

我想使用btn-alert 而不是默认的btn-secondary Bootstrap class 以红色而不是灰色显示按钮。 WTForms 定义“在渲染时将提供给小部件的关键字”的方法是将它们作为字典传递给render_kw。这可以很好地添加新关键字，但它不会替换现有的，我尝试这样做：

class DeleteMappingForm(FlaskForm):
    submit = SubmitField(_l('Delete mapping'), render_kw={'class':'btn btn-alert btn-md'})

最终将我定义的 CSS 类添加到预定义的 CSS 类列表中，最终得到以下 HTML：

<input class="btn btn-secondary btn-md btn btn-alert btn-md" id="submit" name="submit" type="submit" value="Delete mapping">

有没有办法让通过render_kw 传递的值覆盖默认类，并且只有class="btn btn-alert btn-md"？

额外信息

看看render_kw 是如何被 WTForms 的 handled 覆盖的，似乎值应该被覆盖（dict 被连接起来，它覆盖了相同的键，例如：

>>> a={"class":"abc", "other":"aaa"}
>>> a
{'class': 'abc', 'other': 'aaa'}
>>> b={"class":"def", "other":"aaa"}
>>> b
{'class': 'def', 'other': 'aaa'}
>>> dict(a, **b)
{'class': 'def', 'other': 'aaa'}

在Bootstrap-Flask 对render_form() 的处理中我也无法确定其来源...

[*] 我使用的是Bootstrap-Flask 扩展而不是原来的 Flask-Bootstrap，因为后者不支持 Bootstrap 4+。 render_form() 是 Fl​​ask-Bootstrap 的 quick_form() 的 Bootstrap-Flask equivalent。

Answer 1

原来解决方案可以在 Bootstrap-Flask 一侧找到，并且它已经为 render_form 宏提供了一个 button_style 参数，允许直接传递一个 Bootstrap 类。

下面的模板让我找到了我正在寻找的红色按钮；）就这么简单......

{% extends "base.html" %}
{% import 'bootstrap/form.html' as wtf %}

{% block app_content %}
    <h1>{{ title }}</h1>
    <div class="row">
        <div class="col-lg-8">
            {{ wtf.render_form(form, button_style="danger") }}
        </div>
    </div>
{% endblock %}

嗯，这有点尴尬 - 但我很高兴找到了解决方案，这对于花时间写这个问题来说太糟糕了，但因为这可能会帮助其他面临同样挑战的人，所以我正在添加我的答案在这里。