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

Question

Context:

I have a little chat app with the chat in the middle, and a sticky textfield on the bottom. I want to have it when I scroll up the chatlist, that the Textfield will always be on the bottom but over the chat messages (so it has zIndex presedence).

The Problem:

But when I scroll now, the TextField from react material ui, is behind the text, almost like it has a opacity or something.

What have I tried:

I have set a high zIndex on the TextField and also Elevation, but nothing changes the problem.

Code snippet of the 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>

Here is a screenshot how it looks currently:

Answer 1

just add background-color to the 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"}}
  />