Seemingly unnecessary image styling in custom emojis inside picker

[jrnxf]

Due to the rigid styling decisions made inside the Emoji.tsx file here, custom emojis render with position: relative and top: '.1em', making them not render in line with native emojis.

<span class="emoji-mart-emoji" data-emoji-set={props.set}>
  {imageSrc ? (
    <img
      style={{
        height: props.size || '1em',
        width: 'auto',
        display: 'inline-block',
        position: 'relative',
        top: '.1em',
      }}
      alt={emojiSkin.native || emojiSkin.shortcodes}
      src={imageSrc}
    />
  ) ...

Here's some sample output:

Given the css styling happens in the shadow-root, I'm unable to change the styling here, otherwise I happily would. I don't see a good reason to have these styles forced upon the end user, and am not sure if there's a reason they are there in the first place. Am I okay to submit a PR to remove them? At the very least could we add a custom styles prop to be passed in that sets the styles here?

[EtienneLem]

I will admit that I don’t 100% recall why that is 🤔. Definitely sounds like we should remove; all in for a PR! 👍🏼

[jrnxf]

Sounds great @EtienneLem. I'm out right now but will open a PR tonight!

A friend of mine pointed out that the styling may have been done this way to make the custom emoji section render similar to the others, but I haven't double-checked that yet. Even if this is the case I can fix that bug without subjecting the user to the conflicting styles above. 🍻