Warning: Unknown prop `jsx` on <style> tag (version 2.3.0)

[paulbrie]

I've updated to 2.3.0. When loading from the server I get this warning:

...Warning: Unknown prop jsx on <style> tag. Remove this prop from the element. ...

My code:

import { styles } from '../constants'

const FooterStyle = () => (
  <style jsx>
    {`
    
    footer {
      background-color: ${styles.mainColor2};
      text-align: center;
    }

    li {
      color: white
    }
    
  `}
  </style>
)

module.exports = FooterStyle

If if delete the jsx attribute and then put it back the warning does not appear anymore which makes me think that the issue is on the server-side only.

Thanks,
Paul

[arunoda]

That's weird.
We all use style jsx in our apps.
Could you send us a sample repo for this?

Also check the .babelrc file which is used in your app.
You can see it when you run npm run dev.

[paulbrie]

Hi @arunoda! I put the code here: https://github.com/cluj-javascripters/jsheroes.io
I'm not using any .babelrc file.

[arunoda]

Hey @paulbrie we don't support styling as you did it.
You need to use it inside the component like this:

<div style={{ minHeight: 800, backgroundColor: styles.mainColor5 }}>
    <Container>
      <h1>JavaScript <br /> International Conference</h1>
      <style jsx>{`
        h1 {
          font-size: 55px;
          font-family: Arial;
        }
      `}</style>
    </Container>
  </div>

As you can see here, it only gets affected to h1 in this component only.
See this lesson for more info: https://learnnextjs.com/basics/styling-components

[paulbrie]

Thanks, got it.