react-jss styles do not work as expected in development mode

[mdo5004]

What version of Next.js are you using?

12.0.2-canary.1

What version of Node.js are you using?

12.22.5

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next export

Describe the Bug

Styles generated with react-jss do not work as expected in development mode on first render.

Expected Behavior

I expect the first load of a page/component in development mode to match the first load of a page/component in production mode.

To Reproduce

Min repo can be found here: https://github.com/mdo5004/nextjs-dynamic-css-values-bug

I used the official example as the starting point.

---

To see the expected behavior,

1. Run npm run build && npm run export && serve out
2. Navigate to localhost:5000
3. Press 'Toggle Box Color' button

Initially you should see a red box and a blue box. After toggling, you should see two blue boxes.

To see the unexpected behavior:

1. Start the project with npm run dev
2. Navigate to localhost:3000
3. Press 'Toggle Box Color' button

Initially you see a red box and an unstyled box. After toggling, you should see two blue boxes, but neither box has the expected background color.

After clicking the "About" link at the top and then navigating back, the styles load as expected.

[mdo5004]

I should note this behaves the same way in Next v11 and was not introduced in v12.

[mdo5004]

I suspect the issue has something to do with dynamic values in react-jss.

In MyDynamicComponent.js, if you comment out the two lines that use dynamic values to generate CSS, everything behaves as expected.

const useStyles = createUseStyles({
  root: {
    border: '1px solid black',
    // backgroundColor: ({ color }) => color,
    // color: ({ color }) => color === 'blue' ? 'white' : 'black',
    padding: 10,
    textAlign: 'center',
  },
  other: {
    border: '1px solid black',
    backgroundColor: 'green',
    padding: 10,
    textAlign: 'center',
  },
});