gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 20:57:39 25 4
gpt4 key购买 nike

上下文:

我有一个小聊天应用程序,聊天功能位于中间,底部有一个粘性文本字段。我希望当我向上滚动聊天列表时,文本字段将始终位于底部但位于聊天消息上方(因此它具有 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>

这是当前的屏幕截图:

enter image description here

最佳答案

只需向 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"}}
/>

关于javascript - 当 Material UI React Textfield 具有位置粘性并且已向上滚动时,如何使它不被文本覆盖?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61432871/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com