How to style or add a className to a Widget component?

[OnAnOpenField]

Hello. What is the recommended way to style or add a className to a Widget component?

For example, If i implement a Widget like this:
<Widget field={field} />
it will render <textarea name="story-text"></textarea>, but the lack of styles is a problem. If i write <Widget field={field} className={"form-control"} />, typescript complains that className does not exist in the Widget type. Thanks.

[silviogutierrez]

So the Widget component is mainly designed for quick prototyping. From the source you can see it barely even handles the input tag:

reactivated/packages/reactivated/src/forms/index.tsx

Line 464 in 6922107

export const Widget = (props: {field: FieldHandler<widgets.CoreWidget>}) => {

The best thing to do is define your own Widget class like so:

import {
    FieldHandler
} from "@reactivated";

const Widget = ({field}: {field: FieldHandler}) => {
// Exhaustive case statement, see linked source above.
}

Note that FieldHandler is automatically generated and will force you to handle all widgets. Including custom ones you may have defined.

I hesitate to add a className prop to Widget because it really shouldn't be used except for the most basic of prototypes. But if enough people ask for it here I could look into it, or of course, you may open a PR.

[silviogutierrez]

Note that widgets.CheckboxInput, widgets.TextArea, etc all take className so you can just use those in your case statement.

[OnAnOpenField]

ok thank you. so are all of the methods for rendering forms that are included in https://www.reactivated.io/documentation/api/#form just meant for quick prototyping? <Form form={props.form} as="p" /> for example doesn't include the field restrictions that i declared in my python form's fields, such as required=True, max_length=100 etc

[silviogutierrez]

The rendering is meant for quick prototyping. But your own custom components can certainly factor in all these props. They're in the object.

Add ?raw to any page to see what the form contains. Example: https://www.silviogutierrez.com/contact/?raw

Notice there's a lot of attributes in those fields.

[OnAnOpenField]

So is there no built in automatic way to do something like this that allows us to modify django forms on template like django-widget-tweaks allows us to do?

{% render_field form.title class+="css_class_1 css_class_2" %}
{% render_field form.text placeholder=form.text.label class="css_class_3" %}

the reason for this is to allow the template to automatically handle setting any restrictions to a form that were declared in the python forms class definition while also allowing me to add extra attributes via the template as well. Kinda following along with django-widget-tweaks mission of

Tweak the form field rendering in templates, not in python-level form definitions. Altering CSS classes and HTML attributes is supported.

That should be enough for designers to customize field presentation (using CSS and unobtrusive javascript) without touching python code.

thanks

[silviogutierrez]

Yes if you create your own Widget class, it can take extraClassNames.

<Widget field={form.fields.foo} extraClassNames={...} /> and so forth. Entirely up to you.