我在一个有材质界面的输入中使用芯片,当芯片占据大部分空间(例如80%)时,我需要将输入包起来,芯片放在顶部并包起来!
<MDInput
value={inputValue}
error={!!errors.tags}
onChange={(event) => setInputValue(event.target.value)}
onKeyDown={handleKeyDown}
onBlur={handleBlurChanges}
label="Press enter to add tag"
name="tags"
helperText={errors?.tags}
InputProps={{
startAdornment: (
<InputAdornment
sx={{
minHeight: "40px",
}}
spacing={1}
position="start"
>
{chips.map((chip, index) => (
<Chip
sx={{
marginRight: "5px",
}}
key={index}
label={chip}
onDelete={handleDelete(chip)}
variant="outlined"
onBlur={handleBlurChanges}
/>
))}
</InputAdornment>
),
}}
/>
1条答案
按热度按时间cnwbcb6i1#
这可以解决你现在的问题,通过添加
sx={{marginLeft: '5px', marginRight: '5px', }}
到芯片的sx prop 。以下是工作示例:demo