Как сделать так, чтобы текстовое поле React пользовательского интерфейса материала не перекрывалось текстом, если оно имеет фиксированное положение и прокручено вверх?

Question

Контекст:

У меня есть небольшое приложение чата с чатом посередине и липким текстовым полем внизу. Я хочу иметь его, когда прокручиваю список чата, чтобы текстовое поле всегда было внизу, но поверх сообщений чата (поэтому у него есть присутствие zIndex).

Проблема:

Но когда я прокручиваю сейчас, TextField из пользовательского интерфейса реагирующего материала находится за текстом, почти как будто он имеет непрозрачность или что-то в этом роде.

Что я пробовал:

Я установил высокий zIndex для TextField, а также для Elevation, но проблема не изменилась.

Фрагмент кода 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"}}
  />