调整Material-UI <textfield>的大小会导致光标退出其容器

Question

我一直在尝试调整material-ui的<TextField>组件的大小以适合动态容器。但是，这样做会导致允许光标输入完全离开文本区域（请参见下面的图像＃2 /＃3）。此外，如果没有输入任何文本，则光标将从相对于其容器高度的居中位置开始（请参见下面的图像＃1）。

以下是此操作的基本示例。

const TextArea = () =>
{
  const containerStyle = {
    width: 200,
    height: 200
  }

  const textFieldStyle = {
    marginTop: 8,
    width: '100%',
    height: 'calc(100% - 8px)'
  }

  const inputStyle = {
    width: '100%',
    height: '100%',
    overflowY: 'auto' // tried this afterwards to no avail
  }

  const props = {
    style: textFieldStyle,
    label: 'Workings',
    multiline: true,
    variant: 'outlined',
    InputProps: {style: inputStyle}
  }

  return (
    <div style={containerStyle}>
      <TextField {...props}/>
    </div>
  );
}

我想知道如何调整<TextField>的大小以填充容器，同时保留其预期的功能。

编辑：我正在使用@material-ui/core v3.6.0和react v16.4.1

编辑： Here is a CodeSandbox显示问题。

Answer 1

主要问题是您没有指定rows属性。

  

行将多行选项设置为true（docs）时要显示的行数。

多行TextField的默认行为是从一行开始并根据需要增长（因此最终增长到容器高度的范围之外）。您可以指定maxRows来限制此自动增长行为，也可以通过指定rows属性来固定行数（如果尝试输入更多行，则会显示滚动条）

您可以尝试根据容器高度计算rows的值：

  const props = {
    style: textFieldStyle,
    label: "derive rows from height",
    multiline: true,
    variant: "outlined",
    rows: containerStyle.height / 21,
    InputProps: { style: inputStyle }
  };

我不保证数学对于各种大小的稳健性，但是在这种情况下，除以21似乎是可行的。

另一种方法是删除显式的高度，并允许rows上的TextField属性控制所有其他高度：

  const props = {
    style: textFieldStyle, // style would not control height
    label: "no explicit height",
    multiline: true,
    variant: "outlined",
    rows: 9,
    InputProps: { style: inputStyle }  // style would not control height
  };

当您提到要填充动态容器的高度时，我不确定是什么驱动了动态特性，但是如果可能的话，我将避免动态更改容器的高度，而是动态更改行的数量文本区域（即使用第二种方法）。

这是显示两种方法的沙箱：