Django：在 UpdateView 中添加自定义 CSS答案

【问题标题】：Django: Adding custom CSS in UpdateViewDjango：在 UpdateView 中添加自定义 CSS
【发布时间】：2020-05-17 23:29:52
【问题描述】：

我正在尝试找到一种将自定义 css 添加到生成的表单的方法。向这些字段添加自定义 CSS 的合适方法是什么？

views.py

class ProfileUpdateView(UpdateView):
    template_name = "users/profileUpdate.html"
    model = models.User
    fields = (
        "first_name",
        "last_name",
        "about",
        "displayImg",
    )

    def get_object(self, queryset=None):
        return self.request.user

models.py

class User(AbstractUser):
    about = models.TextField(default="")
    displayImg = models.ImageField(blank=True, upload_to="users")

profileUpdate.html

    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}
        <button
            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full">Update</button>
    </form>

【问题讨论】：

自定义 css、css 文件或向小部件添加类是什么意思？
@WillemVanOnsem 将类添加到小部件。很抱歉没有说清楚
请出示表格

标签： django django-models django-views

【解决方案1】：

你可以定义一个ModelForm，带有css属性，例如：

# app/forms.py

from django import forms

class ProfileForm(forms.ModelForm):
    class Meta:
        model = models.User
        fields = (
            'first_name',
            'last_name',
            'about',
            'displayImg',
        )
        widgets = {
            'first_name': forms.TextInput(attrs={'class': 'myclass'})
        }

接下来我们可以在基于类的视图中“注入”该表单：

# app/views.py

from app.forms import ProfileForm

class ProfileUpdateView(UpdateView):
    template_name = "users/profileUpdate.html"
    model = models.User
    form_class = ProfileForm

    def get_object(self, queryset=None):
        return self.request.user

【讨论】：

【解决方案2】：

执行以下操作：

class CommentForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={'class': 'special'}))
    url = forms.URLField()
    comment = forms.CharField(widget=forms.TextInput(attrs={'size': '40'}))

或者对于 ModelForms 使用这个：

class CommentForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['name'].widget.attrs.update({'class': 'special'})
        self.fields['comment'].widget.attrs.update(size='40')

请参阅 django 文档的来源：https://docs.djangoproject.com/en/3.0/ref/forms/widgets/#styling-widget-instances

【讨论】：