Next.js: Bug CSS in JS with !important rule

[RapSherlock]

Bug report

Describe the bug

can't get CSS in JS with !important working

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create a div with some style
   <div style={{ margin: "200px", textAlign: "center", width: "100px", height: "100px", border: "1px solid black", background: "red !important" }} > some text </div>
2. result
   
3. when i'm inspect element, style rule for background is gone.
   
4. if i remove the !important it works

Expected behavior

style rule is working with !important

System information

• OS: Windows 10
• Browser : Chrome Version 72.0.3626.109
• Version of Next.js: 8.0.0

[timneutkens]

This is an issue in React: https://github.com/facebook/react/issues/1881

[timneutkens]

You could use github.com/zeit/styled-jsx for this though.

[RapSherlock]

Thanks for the confirmation