React mui TextField 标签在自动完成中被切断

Question

我目前在使用 React MUI 的

Autocomplete

组件时遇到困难。

Autocomplete

放置在

FormControl

组件中。

在自动完成的

renderInput

属性中，我添加了一个 TextField，但它的标签被剪切了：

我尝试使用填充和边距，但它没有改变任何东西，我不知道问题出在哪里。

我的代码如下所示：

<Autocomplete
    autoHighlight
    value={value ?? null}
    onChange={(event, newValue) => {
        updateValue(newValue);
    }}
    inputValue={inputValue}
    onInputChange={(event, newInputValue) => {
        setInputValue(newInputValue);
    }}
    sx={{ overflow: "hidden", whiteSpace: "pre-wrap", p: 0, m: 0 }}
    options={displayedOptions}
    getOptionValue={(option) => option?.optionValue ?? ""}
    getOptionLabel={(option) => option?.optionLabel ?? ""}
    renderInput={(params) => (
      <TextField
          {...params}
          variant="outlined"
          fullWidth
          required={required}
          label={label}
          InputLabelProps={{ shrink: true }}
        />
    )}
/>

有人遇到过这个问题吗？

Answer 1

问题与样式有关。

来自这个

sx

道具：

 sx={{ overflow: "hidden", whiteSpace: "pre-wrap", p: 0, m: 0 }}

您需要删除这部分

overflow: "hidden",

，所以它应该是这样的：

sx={{ whiteSpace: "pre-wrap", p: 0, m: 0 }}