title: Error with place holder on jsx
body: <p>I have a simple react HTML input component and as it used on different sections/pages, I added some props for styling it and its placeholder. The problem is that sometimes I got an error on the compilation(we are using nextjs). 
  This the code:</p>
  
  <pre><code>{placeHolderColor &amp;&amp; (&lt;style jsx&gt;{`input::placeholder{color:${placeHolderColor}}`}&lt;/style&gt;)}
  </code></pre>
  
  <p>Basically, I'm using an <a href="https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical--operator" rel="nofollow noreferrer">inline If with Logical &amp;&amp; Operator</a> inside the <strong>render</strong> function to check if the prop <strong>placeHolderColor</strong> exists, and if exist add the style tag.</p>
  
  <p>The error I'm getting:</p>
  
  <blockquote>
    <p>Warning: Unknown prop <code>jsx</code> on  tag. Remove this prop from the element.</p>
  </blockquote>
  
  <p>The error only occurs when you reload the page. If you made a change and the hot code reloading run, there is no error. Not sure if the problem is the var inside the literal, the '::placeholder' pseudo-element or what. The code works anyway, and if the <strong>placeHolderColor</strong> var is defined the style is applied.</p>