我最后使用该守则

import * as React from "react";
import Form from "@rjsf/material-ui";
import {FormProps, ObjectFieldTemplateProps} from "@rjsf/core";    
import Button from "@material-ui/core/Button/Button";
import styles from  ./LSForm.module.scss ;
import Grid from "@material-ui/core/Grid/Grid";

interface Props extends FormProps<any> {
   submitButtonText?: string
   showSuccessMessage?: boolean
   hide?: boolean
   columns?: number
   spacing?: 0 | 6 | 4 | 3 | 1 | 2 | 5 | 7 | 8 | 9 | 10 | undefined
}

const LSForm: React.FC<Props> = (props) => {
const getColumns = () => {
    if (props.columns === 1) {
        return 12;
    }
    if (props.columns === 2) {
        return 6;
    }
    if (props.columns === 3) {
        return 4;
    }
    if (props.columns === 4) {
        return 3;
    }
    // Default one colum
    return 12;
};

const getSpacing = (): 0 | 6 | 4 | 3 | 1 | 2 | 5 | 7 | 8 | 9 | 10 | undefined => {
    let spacing: 0 | 6 | 4 | 3 | 1 | 2 | 5 | 7 | 8 | 9 | 10 | undefined = 0;
    if (props.spacing != null) {
        spacing = props.spacing;
    }
    return spacing;
};

const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
    return (
        <div>
            <Grid container spacing={getSpacing()}>
                {props.title}
                {props.description}
                {props.properties.map(element => {
                    return <Grid item xs={getColumns()}><div         className="property-wrapper">{element.content}</div></Grid>
                })}
            </Grid>
        </div>
    );
};

return (
    <>
        { !props.hide &&
            <Form {......props} ObjectFieldTemplate={ObjectFieldTemplate}>
                { props.children &&
                <div className={styles.actionBar}>
                    {props.children}
                </div>
                }
                { !props.children &&
                <div className={styles.actionBar}>
                    <Button type={"submit"} disabled={props.disabled} variant="contained" color="primary">{ props.submitButtonText ? props.submitButtonText : "Speichern"}</Button>
                </div>
                }
            </Form>
        }

    </>
);
};

export default LSForm;

User it as follow: ......

return (
    <>

            <LSForm schema={schema}
                    hide={hideForm}
                    spacing={3}
                    columns={3}
                    uiSchema={uiSchema}
                    onSubmit={(data) => onSubmit(data)}>
                <Button type={"submit"} variant="contained" color="primary">Login</Button>
                &nbsp;<Button variant="contained" color="primary">Forgot Password</Button>
            </LSForm>
    </>
);

......

我找到的解决办法不是我喜欢的:

   const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
    return (
        <div>
            {props.title}
            {props.description}
            {props.properties.map(element => {
                return <div className="property-wrapper">{element.content}</div>
            })}
        </div>
    );
}
 <Form ObjectFieldTemplate={ObjectFieldTemplate}>

煽动好几小时的游乐,找到另一种解决办法:

const uiSchema = {
    "email": {
        "ui:widget": "email",
         ui:column :  xs6 
    },
    "password": {
        "ui:widget": "password",
         ui:column :  xs6 
    }
};

这里的问题:coumn:xs6只与boot锁主题合作。 原因一是使用材料,这种做法不能使用,或错过了。

更多或更好的解决办法,即真正地评估

对5.x反应型jsonschema-form而言,改变一栏的最好方法是:

反应/jsonschema-form/ Packages/mui/src/ObjectTemplate/Object FieldTemplate.tsx

xs={12} by xs={6}

<Grid item={true} xs={3} key={index} style={{ marginBottom:  10px  }}>
   {element.content}
</Grid>

您能够提供你的人数。