Material UI InputAdornment 图标放置在 TextField 的输入区域之外

Question

我不知道我的 InputAdornment 是如何放置不当的。

我在我的样式中看不到任何会影响 TextField 中图标位置的内容（例如填充、弹性内容）。

它目前的样子 - 日历不在 line/within 文本字段输入

上

我希望它看起来如何 - 但当然带有日历图标而不是 'kg' :)

我的样式对象（有一些...用于简洁）

const useStyles = makeStyles(theme => ({
    input: {
        '& input, textarea': {
            paddingTop: 8,
            paddingBottom: 12,
            fontSize: 15,
            marginTop: 15,
            '&:focus': {
                borderBottomColor: COLORS.BLACK
            },
            '&::placeholder': {
                fontSize: 15
            }
        },
    },
    ...
    dashboardInput: {
        '& .MuiInputLabel-root': {
            color: theme.palette.text.primary,
            fontSize: 16,
        },
        '& input, textarea': {
            borderBottom: `1px solid ${COLORS.BLACK}`,
            fontSize: 16,
            '&::placeholder': {
                color: theme.palette.grey[400],
            },
            '&:disabled': {
                color: COLORS.BLACK
            }
        },
        '& .MuiFormHelperText-root': {
            color: theme.palette.grey[500],
            fontSize: 10
        },
    },
   ...
    inputLimiter: {
        textAlign: 'right',
        fontSize: 10
    },
    ...
    },
}));

组件的相关内容：

    <FormControl
        fullWidth
        className={classNames(classes.input, getInputStyle(appearance), {
            [classes.error]: error
        })}
    >
        <InputLabel shrink htmlFor={name}>
            <div className={classes.divcontrol}><div>{label}</div><div className={classes.redAsterisk}>*</div></div>
        </InputLabel>
        <TextField
            id={name}
            placeholder={placeholder}
            fullWidth
            multiline={multiline}
            rows={multiline ? rows : 0}
            type={type}
            style={style}
            inputProps={{
                maxLength,
            }}
            defaultValue={defaultValue}
            disabled={disabled}
            onChange={e => onChangeWithRightType(e)}
            InputLabelProps={{
                shrink: true,
            }}
            value={value}
            {...props}
            InputProps={{
                disableUnderline: true,
                endAdornment: (
                    <InputAdornment position="end">
                        <DateRange />
                    </InputAdornment>
                ),
            }}
            error
            helperText={helperText}
        />
        {maxLength && (
            <Typography variant="body2" className={classes.inputLimiter}>
                {value ? String(value).length : 0}/{maxLength}
            </Typography>
        )}
    </FormControl>

Answer 1

关于你的问题，我认为你应该将 InputProps 中的 disableUnderline 设置为 false。

InputProps={{
              disableUnderline: false,
              ......
           }}

Material UI InputAdornment 图标放置在 TextField 的输入区域之外

Material UI InputAdornment icon placement is outside the input area of TextField

css

textfield

typescript

reactjs

material-ui