React MUI Autocomplete组件中TextField标签被截断问题求助

我在使用React MUI的<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 }}
        />
    )}
/>

以下是几个可能解决问题的方向：

• 移除Autocomplete上的overflow: "hidden"样式
  你给Autocomplete设置的overflow: "hidden"会限制容器的显示范围，直接导致标签被截断。可以去掉这个属性，或者改成overflow: "visible"。

• 检查外层FormControl的宽度约束
  如果包裹Autocomplete的<FormControl>有固定宽度或者其他布局限制，会压缩内部元素空间。给FormControl加上fullWidth属性，或者排查是否有额外的宽度限制样式。

• 调整TextField标签的样式
  通过InputLabelProps给标签添加样式，确保它能完整显示：

  InputLabelProps={{ 
    shrink: true,
    sx: { whiteSpace: "nowrap", overflow: "visible" }
  }}
  

• 修正Autocomplete与TextField的样式冲突
  传递{...params}时可能覆盖了必要的布局样式，可以单独调整输入框的内边距，给标签留出空间：

  <TextField
    {...params}
    variant="outlined"
    fullWidth
    required={required}
    label={label}
    InputLabelProps={{ shrink: true }}
    InputProps={{
      ...params.InputProps,
      sx: { px: 1 }
    }}
  />
  

内容的提问来源于stack exchange，提问作者Shade Cornedrue