Styled-jsx: style child component from parent component

[gsambrotta]

How can i apply style to a child component that i define in the parent?
for example:

// Footer.js
export default function Footer () {
  return (
    <div className='footer-col'>
    <Button> i'm a button </Button>

      <style jsx>{`
          span {
            background-color: red;
            font-weight: 500;
          }
      `}</style>
      </div>
  )
}

// Button.js
export default function Button ({children}) {
  return (
    <button>{children}</button>
  )
}

I want my button to be red but i need to set this from Footer component because maybe in my Header the button must be yellow.
How can i do that?
(i would prefer to not give a class because this is quite simple example but i have other cases where the style is not so simple like .btn-primary and .btn-secondary)

Btw, i also try to use the "external style" feature exactly like in the read me example, but it doesn't work for me.
I get an error saying styled-jsx is expecting a regular string, instead there is an identifier (lie in the examples, i used a variable name i.e. styles)

[giuseppeg]

if you're not willing to pass a className or inline styles the only option left is :global

// Footer.js
export default function Footer () {
  return (
    <div className='footer-col'>
    <Button> i'm a button </Button>

      <style jsx>{`
          span {
              background-color: red;
              font-weight: 500;
          }
          .footer-col > :global(button) {
              color: red;
          }
      `}</style>
      </div>
  )
}

[giuseppeg]

Btw, i also try to use the "external style" feature exactly like in the read me example, but it doesn't work for me.

this is because we haven't published styled-jsx 1.0.0 to npm yet