Unable to change container width to 100%

My intention is to have emoji container with exactly same width as width of input element and also be responsive across all screen dimensions.However even after looking into #45 , I cannot exactly figure out if it is all i need to do to override existing style. No change in width was seen even after passing style as param.

I believe that it is because of Inline width on section element (which is 352px as in the first screenshot above) and a subsequent children (a div element which wraps all emojis) of inline width 324px.

My code :

function EmojiPicker(props) {
    const ref = useRef()

    useEffect(() => {
        new Picker({
            ...props,
            data,
            ref,
            set: 'apple',
            parent: document.querySelector('.emogipicker'),
            style: { width: '800px' }
        })
    }, [])

    return <div ref={ref} className="emoji_mart" />
}

const Emogi = ({ callback, emogibox }) => {
    const onEmojiClick = (emoji) => {
        console.log(emoji)
        callback(emoji)
    }

    return (
        <div aria-selected={emogibox} className="emogipicker">
            <EmojiPicker onEmojiSelect={onEmojiClick} />
        </div>
    )
}

export default Emogi

I have also applied few css rules for em-emoji-picker tag and that is working perfectly. But no css rule is working for its children.

[alexbakers]

width changed after added perLine={18}

I also think that the block should inherit the width and height of the parent.

[Haraldson]

Any updates on this? Frankly I’m a little bummed out by how limited the styling options has gotten after the move to Shadow DOM and Custom Elements – the picker was perfectly customizable with React and Styled Components before, and now I can’t even make the inner container adapt its width due to CSS variables having to be predefined in order to style things…?

I’m all for upgrading to more modern technologies, but this feels premature?