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

Question

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

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

我的问题是，我怎样才能让它像图片中的原始一样弹出聊天输入上方而不是在里面。是造型问题还是我必须添加任何特殊功能？ emoji window correct way

仅用于聊天输入的代码：

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 标签中添加了一个样式位置：absolute with bottom and right 20px，它工作得非常完美！ solution

Answer 2

你需要使用 Css

您可以使用的方法类型：

职位：

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

保证金：

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