How to add a class name to an input on a SimpleSchema AutoForm in react?

Question

I want to add a class name for an individual input, but I could not find anything on the docs about a class name property for simpl-schema or uniforms-bridge-simple-schema-2.

import { AutoForm } from "uniforms-antd";
import SimpleSchemaBridge from "uniforms-bridge-simple-schema-2";
import SimpleSchema from "simpl-schema";

const rawSchema = {
    name: {
      type: String,
      optional: true,
      // className - how to add a class name for an individual input?
    }
};

const schema = new SimpleSchemaBridge(new SimpleSchema(rawSchema));

return (
    <AutoForm
        schema={schema}
        model={model ? model : {}}
        onSubmit={(values: any) => {
        onUpdate(values);
        }}
    />
);

Hi! Yes, here: https://codesandbox.io/s/mystifying-night-l0hxu — Ioana, Mar 06 '20 at 11:36

blueseal · Answer 1 · 2020-03-06T12:56:36.640

I have not explored all the APIs of uniforms. I found this way you can add classNames to each field.

Their FAQ says :

How can I customize/style my form fields?
You can style your form fields simply by passing a className property.

App

import React from "react";
import "./styles.css";
import { AutoForm, AutoField, SubmitField, ErrorsField } from "uniforms-antd";
import SimpleSchemaBridge from "uniforms-bridge-simple-schema-2";
import SimpleSchema from "simpl-schema";

export default function App() {
  const rawSchema = {
    name: {
      type: String,
      optional: false,
      //className: 'test'// - not working
      // className - how to add a class name for an individual input?
    } 
  };
  const schema = new SimpleSchemaBridge(new SimpleSchema(rawSchema));

  return (
    <div className="App">
      <AutoForm schema={schema} >

      <AutoField name="name" className="test"/>
      <ErrorsField className="my-error"/>
      <SubmitField className="my-submit"/>

      </AutoForm>
    </div>
  );
}

css

.test{
  border: 1px solid navy;
  border-radius: 12px;
  height: 45px;
  font-size: 18px;
}

.my-error{ 
}

.my-submit{
}

Notes:

1) Check out all the fields of uniforms-antd.

2) Customizing your form layout

How to add a class name to an input on a SimpleSchema AutoForm in react?

1 Answers1