reactjs 如果芯片占用了输入80%的空间,我该如何 Package 输入

0md85ypi  于 2023-04-05  发布在  React
关注(0)|答案(1)|浏览(96)

我在一个有材质界面的输入中使用芯片,当芯片占据大部分空间(例如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>
                    ),
                  }}
                />

enter image description here

cnwbcb6i

cnwbcb6i1#

这可以解决你现在的问题,通过添加sx={{marginLeft: '5px', marginRight: '5px', }}到芯片的sx prop 。
以下是工作示例:demo

相关问题