javascript - 当 Material UI React Textfield 具有位置粘性并且已向上滚动时，如何使它不被文本覆盖？

Question

上下文:

我有一个小聊天应用程序，聊天功能位于中间，底部有一个粘性文本字段。我希望当我向上滚动聊天列表时，文本字段将始终位于底部但位于聊天消息上方(因此它具有 zIndex 存在)。

问题:

但是当我现在滚动时，来自 React Material ui 的 TextField 位于文本后面，几乎就像它具有不透明度或其他东西。

我尝试过什么:

我在 TextField 和 Elevation 上设置了较高的 zIndex，但问题没有得到任何改变。

TextField 的代码片段:

<div
      style={{
        position: "sticky",
        bottom: 5,
      }}
    >

      <TextField
        placeholder="Your Message.."
        variant="outlined"
        fullWidth
        label="message"
        color="primary"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        onKeyDown={(e) => (e.keyCode === 13 ? submitMessage() : null)}
      />
    </div>

这是当前的屏幕截图:

Answer 1

只需向 TextField 添加背景颜色...

  <TextField
    placeholder="Your Message.."
    variant="outlined"
    fullWidth
    label="message"
    color="primary"
    value={"aaaaaaaaaaa"}
    onChange={(e) => setMessage(e.target.value)}
    onKeyDown={(e) => (e.keyCode === 13 ? submitMessage() : null)}
    style={{backgroundColor: "white"}}
  />