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

问题描述

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

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

我正确地使用了TextField和基础Input的宽度，但没有成功。我可以计算字符数并在JS中设置宽度，但是我宁愿使用CSS解决方案。

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

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

解决方法

您可以将输入的宽度基于文本的长度

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>
)

下面是分叉的代码和框

参考：this answer