Material-UI TextField 宽度可以设置为匹配输入文本的宽度吗？

Question

是否可以让 Material-UI 自动调整 TextField 元素的宽度以匹配输入文本的宽度？

我正在创建一个表单视图/编辑页面，并将数据渲染回相同的字段，但是服务器还设置了一系列参数。如果能够在禁用的表单元素中进行渲染并自动调整其宽度，那就太好了。

我已经正确调整了 TextField 和底层输入的宽度，但没有成功。我可以在 JS 中计算字符数并设置宽度，但我更喜欢 CSS 解决方案。

<TextField
    disabled={true}
    label={"UUID"}
    value={"7be093a5647d41ff8d958928b63d11f5"}
    style={{width: "auto"}}
    InputProps={{
        style: {width: "100%"}
    }}
/>

https://codesandbox.io/s/material-demo-forked-c3llv

Answer 1

您可以根据文本的长度来确定输入的宽度

const FONT_SIZE = 9
const DEFAULT_INPUT_WIDTH = 200

const [textValue, setTextValue] = useState("")
const [inputWidth, setInputWidth] = useState(DEFAULT_INPUT_WIDTH)

useEffect(() => {
  if (textValue.length * FONT_SIZE > DEFAULT_INPUT_WIDTH) {
    setInputWidth((textValue.length + 1) * FONT_SIZE)
  } else {
    setInputWidth(DEFAULT_INPUT_WIDTH)
  }
}, [textValue])

return (
  <div>
    <TextField
      label={"UUID"}
      value={textValue}
      onChange={(e) => setTextValue(e.target.value)}
      InputProps={{
        style: { width: `${inputWidth}px` },
      }}
    />
  </div>
)

下面是分叉的codesandbox

参考：这个答案