How do I add custom css to embedded tweet?

[berlirumapea]

There is an example of how to do it in doc but with no code on how to implement the styles. https://saurabhnemade.github.io/react-twitter-embed/?path=/story/twitter-tweet-embed--tweet-with-custom-css

[pinkhoodie]

Agreed. Looking for that same documentation

[vernonjohnson]

The code for all of the samples can be found here.

[saurabhnemade]

Updated the example storybook.

Latest api to achieve this is as follows:

<TwitterTweetEmbed
  tweetId={'1083592734038929408'}
  onLoad={tweetWidgetEl => {
    const tweetEl = tweetWidgetEl.shadowRoot.querySelector('.EmbeddedTweet')
    tweetEl.style.border = '5px solid red'
}} />

[saurabhnemade]

With v3.0.1 documentation you find example on how to achieve this. You can find example at https://saurabhnemade.github.io/react-twitter-embed/?path=/story/twitter-tweet-embed--tweet-with-custom-css

[nypinstripes]

@saurabhnemade I'm not certain, but i don't think this method works any longer or perhaps doesn't work on the Timeline embed (even after updating the selector).

However, tweetWidgetEl.contentWindow.document does so all good thanks.

[rejas]

Having the same problem with adding custom styles after load. Using the example code with the latest version (3.0.3)

<TwitterTweetEmbed tweetId={tweetId}
                     onLoad={tweetWidgetEl => {
                       const tweetEl = tweetWidgetEl.shadowRoot.querySelector('.EmbeddedTweet')
                       tweetEl.style.border = '5px solid red'
                     }}

yields:

Tweet.js?7119:64 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'querySelector')
    at onLoad (Tweet.js?7119:64)
    at eval (index.es.js?48f2:656)

Any ideas what goes wrong?

[sbassalian]

You don't need to access the specific Twitter Iframe directly, You can style the first Iframe element and adjust the css accordingly, the only problem with this solution is if you have multiple Iframes on one page

      onLoad={()` => {
        // Twitter timeline is embedded in an iframe
        const twitterTimelineIFrame = document.querySelector('iframe');

        // Select every tweet in the iframe
        const tweetTextElements =
          twitterTimelineIFrame.contentWindow.document.querySelectorAll(
            '.timeline-Tweet-text',
          );

        for (const tweet of tweetTextElements) {
          // @ts-ignore
          tweet.style.fontSize = '17px';
        }
      }}

[binal-12]

<TwitterTweetEmbed tweetId={tweetId} onLoad={tweetWidgetEl => { const tweetEl = tweetWidgetEl.shadowRoot.querySelector('.EmbeddedTweet') tweetEl.style.border = '5px solid red' }}``

this is not working

[gorkamolero]

This gets blocked by a cross origin error. Is there a way to style tweets? Like hide actions, follow button etc