update so classes get correctly applied with Styled JSX

[dylanjha]

styled-jsx is a popular method for css-in-js in the React ecosystem.

The way it works is like this:

function Home() {
  return (
    <div className="container">
      <h1>Hello Next.js</h1>
      <p>Let's explore different ways to style Next.js apps</p>
      <style jsx>{`
        .container {
          margin: 50px;
        }
        p {
          color: blue;
        }
      `}</style>
    </div>
  )
}

The p tag in this style only gets applied to this component. Internally, the library creates a unique class, and it applies that class to the HTML elements in the component AND the selectors in the CSS. So the DOM and CSS ends up looking like this:

<div class="container jsx-1234">
  <h1 class="jsx-1234">Hello Next.js</h1>
  <p class="jsx-1234">Let's explore different ways to style Next.js apps</p>
</div>

The css looks like:

<style>
  .container.jsx-1234 {
    margin: 50px;
  }
  p.jsx-1234 {
    color: blue;
  }
</style>

When I attempted to do this with media-container I got the following:

return (
  <div className="video-container">
    <media-container>
    </media-container>
    <styled jsx>{`
       .video-container {
          // some styles here
       }
       media-container {
          // these styles don't get applied
       }
    `}
    </styled>
  </div>
)

media-container classname="jsx-1234" should be media-container class="jsx-1234". It's almost as if styled-jsx things media-container is a react component and it's passing in className down and it ends up being an attribute on the web component.

There is a way to workaround this by using .video-container :global(media-container), but ideally the above code should work.

I don't know if the fix would be on the media-chrome side or the styled-jsx side to make this compatible. This issue might be relevant

[heff]

I'm gonna guess something in the styled-jsx/react stack is whitelisting native elements, which would make it incompatible with web components. We're not doing anything with class/classname in media-chrome that would cause this.

The answer for a lot of react ecosystem things is probably react wrappers for each component, at least until they support custom elements more cleanly.

[heff]

Looks like there's an answer to this, just not quite merged in yet.

[dylanjha]

@heff good find! that's exactly it 👌

[heff]

If anyone else is running into this, please go thumbs-up the PR.

[heff]

@dylanjha is there anything else we can do here besides wait? If not let's close this issue.

[dylanjha]

@heff actually #85 would resolve this on our end (react folk start using the react components) -- I'm in favor of getting #85 shipped