Javascript 调整材质UI的大小<；TextField>；使光标退出其容器

我一直在尝试调整MaterialUI的

组件的大小，以适应动态容器。但是，这样做会导致光标输入被允许完全离开文本区域（请参见下面的图#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>
  );
}

const TextArea=（）=>
{
常量集装箱样式={
宽度：200，
身高：200
}
常量textFieldStyle={
玛金托普：8，
宽度：“100%”，
高度：'计算（100%-8px）'
}
常量输入样式={
宽度：“100%”，
高度：“100%”，
overflowY:'auto'//之后尝试了此操作，但无效
}
常量道具={
样式：textFieldStyle，
标签：“加工”，
多行：对，
变体：“概述”，
InputProps:{style:inputStyle}
}
返回(
);
}

我想知道如何调整

大小以填充容器，同时保留其预期功能

编辑：我正在使用

@material ui/core v3.6.0

和

react v16.4.1

---

编辑：显示问题。

主要问题是您没有指定

行

属性

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

多行文本字段的默认行为是从一行开始，并根据需要增长（因此最终增长到容器高度的边界之外）。您可以指定

maxRows

来限制此自动增长行为，也可以通过指定

rows

属性来固定行数（如果尝试输入更多行，则会显示滚动条）

您可以尝试根据容器高度计算

行的值

：

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

我没有承诺数学对于不同的尺寸是健壮的，但在这种情况下除以21似乎是可行的

另一种方法是删除显式高度，并允许

文本字段

上的

行

属性控制所有其他高度：

  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
  };

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

下面是一个沙箱，显示了两种方法：

---

您能说明到目前为止您做了哪些测试吗。例如：当你调整文本字段的大小时，你说你遇到了错误，我感兴趣的是，看看你是否能够使用不同的操作系统和浏览器在另一台机器上复制相同的问题，因为这可能不是你的编码问题，而是一个浏览器错误，在这种情况下，您对此无能为力。firefox、chrome和edgeNow的行为是一致的，您编辑了您的问题并提供了视觉效果，我们可以看到其元素以特定方式进行了样式设置，这可能是CSS或CSS库/扩展中的一个bug，你能提供CSS HTML JS ReactJS的所有代码吗？这样我们就可以帮助识别错误了，谢谢，我还会在你的CSS的文本区域周围添加一个边框，以直观地看到文本框，它可能是一个宽度问题。我产生的代码和视觉效果来自一个基本的测试程序。除了我提供的以外，没有其他CSS或HTML。唯一的其他JS/React代码是基本设置（

ReactDOM.render（）

），它在单个div中呈现

（

宽度：100%，高度：相对于页面的100%

）。你是说你不能产生这种行为吗？@DataCure我刚刚在问题中添加了一个CodeSandbox，你可以用它来查看问题并尝试解决方案。推动动态高度行为的是在文本区域下方包含一个固定大小的计算器。如果窗口高度发生变化，textarea将需要缩小/增大以适应任何剩余的可用空间。我希望有一个不需要计算行数的解决方案，但看看底层dom元素，它似乎是唯一合乎逻辑的解决方案。遗憾的是，MaterialUI没有预料到文本区域的增长（我认为这是很常见的事情）。