Bug when using "style jsx" to add custom color in nextjs 15

[Wilian-Pereira-W]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/interesting-shtern-xxnk7m?file=%2Fapp%2Fcomponents%2FTest%2Findex.tsx%3A10%2C8-10%2C17

To Reproduce

When I reload the page, the default color is applied first, and then the custom color follows. This causes a flashing effect on the user's screen. It happens in development, build, and production environments.

Current vs. Expected behavior

When I reload the page it adds the default color first and then the custom color. Flashing on the user's screen. It should keep the custom color.
Gravação de tela de 03-10-2024 10:45:51.webm

Provide environment information

"dependencies": {
    "classnames": "^2.5.1",
    "next": "15.0.0-canary.177",
    "react": "19.0.0-rc-2d16326d-20240930",
    "react-dom": "19.0.0-rc-2d16326d-20240930"
  },
  "devDependencies": {
    "@types/node": "20.12.12",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "typescript": "5.3.3"
  }

Which area(s) are affected? (Select all that apply)

Developer Experience

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

No response

[samcx]

@Wilian-Pereira-W I believe you need to set it up like this with App Router → https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-jsx.