How to use styled-jsx with responsive design (media queries)?

Are there any best practices for using styled-jsx with responsive design (media queries)?

I’m experimenting with react-responsive but it doesn’t seem to accept <style jsx> inside like:

<MediaQuery query='(max-width: 600px)'>
	<style jsx>{`
		.my-element {
			background-color: tomato;
		}
	`}</style>
</MediaQuery>

[giuseppeg]

@joncursi that’s correct. You’d need do add an event listener and keep a boolean in the state:

class Media extends React.Component {
  _media = window.matchMedia(this.props.query)
 state = {
    matches: this._media.matches
 }
 onChange = ({matches}) => {  this.setState({ matches }) }
 componentDidMount() {
   this._media.addListener(onChange)
 }
 componentWillUnmount() {
   this._media.removeListener(onChange)
 }
 render() {
   return this.state.matches ? children : null
 }
}

which you can use like this

<Media query="max-width: 600px"><MyComponent /></Media>

I didn’t test or try the code above but it should work. I believe that https://www.npmjs.com/package/react-media is implemented in a similar way

[giuseppeg]

Anyway this is going out of topic 😃 I think that option 1) and 2) from my comment https://github.com/zeit/styled-jsx/issues/254#issuecomment-313841098 are a good way to go.

If you need now you can also use dynamic styles eg.

({children}) => {
 const small = window.matchMedia('max-width: 600px').matches
 return (
    <div>
        {children}
        <style jsx>{`div { background: ${small ? 'tomato' : 'hotpink' }`}</style>
    </div>
 )
}