Styled JSX magic

styled.jsx

import React from 'react';
import connectApollo from '../lib/connectApollo';
import withRegion from '../lib/withRegion';

const InnerComponent = props => (
  <div {...props}>
    <p>Hello World</p>
    <style jsx>{`
      p {
        color: blue;
      }

      @media only screen and (min-width: ${props.min}) {
        [color] {
          background-color: ${props.color};
        }
      }
    `}
    </style>
  </div>
);

const Home = ({ className }) => (
  <div className={className}>
    <div className="outer-context">
      <InnerComponent color="blue" min="768px" />
    </div>
    <style jsx>{`
      .outer-context {
        background-color: black
      }
    `}
    </style>
  </div>
);


export default connectApollo(withRegion('home')(Home));