Removing margin from React Twitter Embed's TwitterTweetEmbed component

Question

I'm using Material UI and have a TwitterTweetEmbed from React Twitter Embed that I can't figure out how to remove the top and bottom margins.

This is my current code:

const styles = theme => ({
  listItem: {
    padding: '0px',
  },
  tweetSize: {
    margin: 0,
  },
  tweet: {
    margin: 0,
  }
});


class TweetItem extends Component {

  render() {
    return (
      <ListItem className={this.props.classes.listItem}>
        <div className={this.props.classes.tweetSize}>
          <TwitterTweetEmbed className={this.props.classes.tweet} tweetId={blah} options={{ width: 'auto'}} />

        </div>
      </ListItem>
    );
  }
}

export default withStyles(styles)(TweetItem);

Also, using the inspect tool in Chrome, I found that the margins appear here:

And this is what they look like on the page:

Is there a way to force those margins to 0, by any means necessary?

score 0 · Accepted Answer · answered Feb 17 '20 at 15:46

0

A solution I found is just to add

marginTop: '-10px'

to the listItem style.

answered Feb 17 '20 at 15:46

Davie88

93
6

Althought, it would still be nice to have an actual solution to "inject" CSS or something similar because I want to remove the border radius from the embeded as well. – Davie88 Feb 17 '20 at 15:55

score 0 · Answer 2 · answered Mar 29 '23 at 13:49

I'm using css modules and had to override the css class on the component.

This is my render code:

<div className={styles.testimonialItem} key={item}>
   <TwitterTweetEmbed tweetId={item} options={tweetOptions} />
</div>

And I target it with this in my scss file:

.testimonialItem {
    width: 462px;
        &>div {
            &>:global(.twitter-tweet) {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }
        }
 }

The use of :global() was indicated in this Q&A https://stackoverflow.com/a/71414987/3258059

Removing margin from React Twitter Embed's TwitterTweetEmbed component

2 Answers2