styled-jsx: Can't style single elements that can't accept children

How do you style a single element component, if the element does not accept children?

For example, this will not work:

export default ({url, alt}) => (
  <img src={url} alt={alt}>
    <style jsx>{`
      img {
        max-width: 100%;
        max-height: 40vh;
      }
    `}</style>
  </img>
)

Is there a way to avoid adding a superfluous container div?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 19 (3 by maintainers)

Most upvoted comments

With the introduction of Fragments it’s now possible to do this.

function Input(props) {
  return (
    <Fragment>
      <input {...props} />
      <style jsx>{`
        input {
          border-bottom: 1px solid red;
        }
      `}</style>
    </Fragment>
  )
}

sergiodxa on Feb 1, 2018

@corysimmons img { vertical-align: middle } should fix that

giuseppeg on Dec 11, 2017

Yes, I used <Fragment></Fragment> in the end. Soon this will be even easier with <></> syntax.

jaydenseric on Feb 2, 2018