如何在反应中将类名添加到 SimpleSchema AutoForm 的输入中？

Question

我想为单个输入添加一个类名，但我在文档中找不到关于 simpl-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);
        }}
    />
);

Answer 1

uniforms的所有API我都没有探索过。我发现这样你可以在每个字段中添加classNames。

他们的FAQ 说：

如何自定义/设置表单字段的样式？
您可以设置表单样式 字段只需传递一个 className 属性。

应用

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)Customizing your form layout