材质 UI 网格项目或文本字段填充/边距

Question

我制作了一个组件来标准化我的文本输入（对于使用 Material UI 和 React-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>
    )
}

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

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

我对每个字段的边距或填充有疑问，这些字段粘在表单的边缘，我希望它们留下一个小填充。

我尝试过使用InputProps={{ ...输入属性， 风格： { paddingLeft: '8px', 右内边距：'8px' }, }} 但田地却没有动。我尝试在网格项的样式中添加边距，它似乎有效，但在上面的示例中，Apellido 落到另一行（边距加上 textField 的 fullWidth 太多了。

我尝试过在网格项中使用填充和边距，在文本字段中尝试使用填充和边距，但没有得到所需的结果...

Answer 1

我终于解决了添加 paddingX 来包装输入的问题。