I made a component to standarize my text imputs (for forms using Material UI and React-Hook-Forms).

我制作了一个组件来标准化我的文本输入(对于使用Material UI和Reaction-Hook-Forms的表单)。

import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";

const inputSm = {xs: 12, sm: 12, md: 6, lg: 6, xl: 4};
const inputLg = {xs: 12, sm: 12, md: 12, lg: 6, xl: 6};

function setSize(size){
    if (size === "s") return inputSm;
    if (size === "m") return inputLg;
    return inputLg;
}

export function StdTextInput({label, name, register, helperText = " ", errors, errorText = " ", 
                              size = "m", fullWidth = true, autoComplete = "on", variant = "standard", 
                              inputProps = {}, validationRules = {}})
{
    let inputSize = setSize(size);
    const isError = !!errors[name];  //!! para forzar a booleano
    return(
        <Grid item {...inputSize}>
            <TextField
                label={label}
                {...register(name, validationRules)}
                helperText={errors[name] ? errors[name]?.message || errorText : helperText}
                fullWidth={fullWidth}
                size="small" 
                autoComplete={autoComplete}
                variant={variant}   
                InputProps={{
                    ...inputProps,
                    style: {
                      paddingLeft: '8px', 
                      paddingRight: '8px'
                    },
                  }}
                error={isError}
                >
            </TextField>
        </Grid>
    )
}

I use this components in this way:

我以这种方式使用这些组件：

<Box>
                <Grid container spacing={1}>
                    <StdTextInput label="Email" name="email" register={register} helperText="Ingresar un mail con una @ y al menos 1 punto"
                                  errors={errors} errorText="Este campo es requerido" size="l" 
                                  validationRules={{required: true, 
                                                    pattern: {value: /^[\w.-]+@[\w.-]+\.\w+$/, 
                                                              message: "La dirección de correo electrónico no es válida"}
                                                    }}/>

                    <StdTextInput label="Teléfono" name="telefono" register={register} errors={errors} size="s" validationRules={{validate: {validaTelefono}}}/>

                    <StdTextInput label="Nombre" name="nombre" register={register} errors={errors} validationRules={{required: "El campo Nombre es requerido"}}/>

                    <StdTextInput label="Apellido" name="apellido" register={register} errors={errors}/>
    
                </Grid>
            </Box>

I have a problem with the margins or paddings of each field, the fields are glued to the edges of the form and I would like them to leave a small padding.

我有一个问题的利润率或每个领域的填充，该领域是粘在形式的边缘，我希望他们留下一个小填充。

I've tried with InputProps={{
...inputProps,
style: {
paddingLeft: '8px',
paddingRight: '8px'
},
}}
but the fields didnt move. I have tried adding margin to the style of the Grid item and it seems to work but in the example above Apellido falls to another line (the margin plus de fullWidth of the textField is too much.

我尝试使用InputProps={{...inputProps，style：{paddingLeft：‘8px’，paddingRight：‘8px’}，}}，但是字段没有移动。我试过在网格项目的样式中添加边距，似乎很管用，但在上面的例子中，Apellido掉到了另一行(文本字段的边距加全宽太多了。

Ive tried with padding and margin in Grid item, with padding and marging in the TextField without the desired result...

我已经尝试了在网格项目中填充和边距，在文本字段中填充和行进，但没有得到预期的结果……

I finally solve the problem adding a paddingX to the Box that wrap the imput.

我终于解决了这个问题，向包装输入的Box添加了一个paddingX。