Как добавить имя класса для входа в SimpleSchema AutoForm в реагировать? - PullRequest
Новая
       69

Как добавить имя класса для входа в SimpleSchema AutoForm в реагировать?

0 голосов
/ 06 марта 2020

Я хочу добавить имя класса для отдельного ввода, но я не смог найти в документах ничего о свойстве имени класса для simple-schema или 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);
        }}
    />
);

1 Ответ

0 голосов
/ 06 марта 2020

Я не исследовал все API uniforms. Я нашел способ, которым вы можете добавить classNames к каждому полю.

Их FAQ говорит:

Как я могу настроить / стилизовать мои поля формы?
Вы можете стилизовать поля формы просто передав свойство className.

uniforms-antd-textfield

Приложение 

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{
}

Примечания:

1) Проверьте все поля uniforms-antd .

2) Настройка макета формы

...