Search code examples
cssreactjstwittermaterial-ui

Removing margin from React Twitter Embed's TwitterTweetEmbed component

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: enter image description here

And this is what they look like on the page: enter image description here

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

Solution

  • A solution I found is just to add

    marginTop: '-10px'

    to the listItem style.