Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there a way to set margin:0?

See original GitHub issue

I’ve tried multiple ways to remove the margins with no luck. I need to render the emojis without the margin, otherwise, it creates layout problem for responsive.

I’ve tried the following: <Emoji text={name} style={{ margin: 0 }} /> and

import styled from "styled-components";

const StyledAEmoji = styled(Emoji)`
  margin: 0;
`;

Can you provide an alternative way to remove margin when using one Emoji?

Issue Analytics

State:
Created 5 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

ShimiSuncommented, Mar 5, 2019

So I don’t think styled-components are accepting class. and I ended up not using onlyEmojiClassName and just doing:

const StyledEmoji = styled(Emoji)`
  span {
    margin: 0px !important;
  }
`;

...
<StyledEmoji text=":+1:" />

and the !important was a mustin order to override the inline style.

0reactions

ShimiSuncommented, Jul 3, 2019

@tommoor feel free to close this issue, I was able to work around it.

Just an FYI, in case you are interested to see the React.js+ Grommet example that uses the react-emoji-render library, take a look at Demo: https://l1klxkjwm.codesandbox.io/ Source: https://codesandbox.io/s/l1klxkjwm