Slack-Clone项目中的表情符号选取器

Question

在我的slack克隆中有一个聊天输入字段。我遵循了一个关于添加表情符号选取器(emoji-mart(的简单教程。聊天输入

然而，当我点击表情符号图标时，它会在表情符号图标所在的容器内弹出表情符号选取器窗口。(因此，在聊天输入容器内，同时更改其高度以包含表情符号窗口(。表情符号选取器窗口

我的问题是，我如何才能让它弹出在聊天输入的上方，而不是像图片中的原始一样出现在里面。这是一个造型问题，还是我必须添加任何特殊功能？？表情符号窗口正确方式

仅用于聊天输入的代码：

import React from 'react'
import styled from 'styled-components'
import SendIcon from '@material-ui/icons/Send';
import {ChatInputIconsData} from '../data/ChatInputIcons'
import {ChatIconsInputData} from '../data/ChatInputIcons'
import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
import "emoji-mart/css/emoji-mart.css";
import { Picker } from "emoji-mart";
import {useState} from 'react'

function ChatInput() {
const [emojiPickerState, SetEmojiPicker] = useState(false);
const [message, SetMessage] = useState("");
let emojiPicker;
if (emojiPickerState) {
emojiPicker = (
<Picker
title="Pick your emoji…"
emoji="point_up"
onSelect={emoji => SetMessage(message + emoji.native)}
/>
);
}
function triggerPicker(event) {
event.preventDefault();
SetEmojiPicker(!emojiPickerState);
}
return (
<Container>
<InputContainer>
<form>
<input type="text" placeholder="Message here..."  value={message}
onChange={event => SetMessage(event.target.value)} />
</form>
<IconsContainer>
<LeftIcons>
{
ChatInputIconsData.map(item => (
<LeftIconsItem>
{item.icon}
</LeftIconsItem>
))
}
</LeftIcons>
<RightIcons>
{
ChatIconsInputData.map(item => (
<RightIconsItem>
{item.icon}
</RightIconsItem>
))
}
{emojiPicker}
<Emoji onClick={triggerPicker}/>
<SendButton>
<Send />
</SendButton>
</RightIcons>
</IconsContainer>
</InputContainer>
</Container>
);
}
export default ChatInput

const Container = styled.div`
padding-left:20px;
padding-right: 20px;
padding-bottom: 24px;
`;
const InputContainer = styled.div`
border: 1px solid #8D8D8E;
border-radius: 4px;
form {
display: flex; 
height: 42px; 
align-items: center;
padding-left: 10px;
input {
flex: 1;
border: none;
font-size: 13px;
}
input:focus{
outline: none;
}
}
`;
const IconsContainer = styled.div`
display: flex;
justify-content: space-between;
background: rgba(var(--sk_foreground_min_solid,248,248,248),1);
border-top: 1px solid rgba(83, 39, 83, .13); 
overflow: visible;
`;
const LeftIcons = styled.div`
display: flex;
justify-content: center;
align-items: center;
`;
const LeftIconsItem = styled.div`
border-radius: 2px;
width: 32px;
height: 32px; 
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
cursor: pointer;
color: #606060;
`;
const RightIcons = styled.div`
display: flex;
justify-content: center;
align-items: center;
`;
const RightIconsItem = styled.div`
border-radius: 2px;
width: 32px;
height: 32px; 
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
cursor: pointer;
color: #606060;

`;
const Emoji = styled(EmojiEmotionsIcon)`
border-radius: 2px;
width: 32px;
height: 32px; 
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
cursor: pointer;
color: #606060;
`;
const SendButton = styled.div`
background: #007a5a;
border-radius: 2px;
width: 32px;
height: 32px; 
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
cursor: pointer;
.MuiSvgIcon-root {
width: 18px;
}
:hover {
background: #148567;
}
`;
const Send = styled(SendIcon)`
color: #D9D9D9;
`;

Answer 1

好的解决了：在我的Picker标签中添加了一个样式位置：底部和右侧都是20px的absolute，效果很好！解决方案

Answer 2

您需要使用Cs

你可以使用的方法类型：

职位：

.EmojiPicker {
position: relative / absolute;
top: -30px;
right: 0;
left: 0;
bottom: 0;    
}

保证金：

.element {
margin-bottom: 10px; // THIS WILL CHANGE OTHER CLASSES SO USE POSITIONS
}