Styled-jsx: how to deal with 3rd party react elements?

[thisguychris]

for example, of react router for instance where the 3rd party controls how that element is rendered.

[rauchg]

I don't fully understand the question. Can you give me an example?

[tauren]

I just discovered this project, looks interesting! I'm not sure what @thisguychris is asking, but perhaps my question is similar. I'd be interested to see how easy it is to use something like https://github.com/JedWatson/react-select within an app that uses styled-jsx.

[thisguychris]

@rauchg to be clear, there are a lot of 3rd party React components in our ecosystem that people consume everyday.

Checking the api:

export default () => (
  <div>
    <p>only this paragraph will get the style :O</p>
    { /* you can include <Component />s here that include
         other <p>s that don't get unexpected styles! */ }
    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </div>
)

It seems the style object is inside, or adjacent to the component / jsx. What happens if you want to style a React Component, say

<Link to={/user/${user.id}}>{user.name}</Link>

How do you target the 'a' element of that react component?

Also this is how styled-components api looks like dealing with 3rd party components:

[rauchg]

I don't think <Link> in that example should be an element. It should decorate an element that you style statically:

<Link><a>hi</a></Link>
<style jsx>{`
  a {
    color: pink
  }
`}</style>

[rauchg]

(we've used this pattern on zeit.co with very high success)

[rauchg]

For react-select, you could combine optionClassName with a glamor class:

import css from 'next/css'
export default () => (
  <Select optionClassName={style} />
)
const style = css({ })

[thisguychris]

ah yes! if you can pass the classname then you can inject any arbitrary 3rd party react component, at least most. Thanks @rauchg !

[rauchg]

Also, in view of this, there's a strong benefit to the discussed selector #26.

export default () => (
  <div>
     <div className="select">
       <Select optionClassName="woot" />
     </div>
     <style jsx>{`
        .select >> .woot {
          color: red
        }
     `}</style>
  </div>
)

[thisguychris]

New API landed. Very useful for 3rd party React components via passing classes.

import Select from 'react-select'
export default () => (
  <div>
    <Select optionClassName="react-select" />

    <style jsx>{`
      /* "div" will be prefixed, but ".react-select" won't */
      div :global(.react-select) {
        color: red
      }
    `}</style>
  </div>
)

[reggi]

Just to help out any weary travelers with the react-router <Link/> issue. This totally works.

import React from 'react'
import {Link} from 'react-router'

const UseLink = (props) => (
  <div>
    <Link className='my-link' to='/hi'>Hi</Link>
    <style jsx>{`
      div :global(.my-link) {
        color: red
      }
    `}</style>
  </div>
)