style jsx always affects global.

[pruge]

I am performing the following example. https://nextjs.org/learn/basics/styling-components/no-effect-for-nested-components

The expected state is as follows.

But in reality it looks like this:

The example works fine. https://github.com/zeit/next-learn-demo/tree/master/7-styling-components

But if you put .babelrc here, style affects global.

{
  "plugins": [
    "transform-react-pug",
    "transform-react-jsx",
    [
      "transform-jsx-classname-components",
      {
        "objects": [
          "React"
        ]
      }
    ]
  ]
}

Is there a way to enable scope style?

[ezhlobo]

@pruge sorry for the delay. I'll take a closer look at examples soon and will be able to discuss the things.

[ezhlobo]

@pruge I see that you use Next and you try to customize babel config. According to their documentation, when you add own .babelrc file, you must include Next's stuff there (including jsx-styled).

https://nextjs.org/docs#customizing-babel-config

So in your case, simply modify your .babelrc file:

  {
+   "presets": ["next/babel"],
    "plugins": [
      "transform-react-pug",
      "transform-react-jsx",
      [
        "transform-jsx-classname-components",
        {
          "objects": [
            "React"
          ]
        }
      ]
    ]
  }

If you continue experiencing the issue, will be really helpful if you provide your repository with reproduced issue.

[pruge]

thank you very much