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

Question

在我的slack克隆中有一个聊天输入字段。我遵循了一个关于添加emoji选择器（emoji-mart）的简单教程。聊天输入

然而，当我点击表情图标时，它会弹出表情图标所在的容器内的表情选择器窗口。（所以在聊天输入容器内部，同时改变其高度以包含emoji窗口）。emoji选择器窗口

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

仅用于聊天输入的代码：

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

您需要使用Css

可以使用的方法类型：

职位：

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

边距：

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