Conditional groups with nested not working (SSR)

Expected behavior:

const styles = ({ color, breakpoint }) => ({
  container: props => ({
    overflow: props.hidden ? 'auto' : 'unset',
    '&>h2': {
      color: color.text,
      fontSize: '1.5rem',
      paddingBottom: '1rem',
    },
  }),
  [breakpoint.small]: {
    container: {
      overflow: 'unset',
      '&>h2': {
        fontSize: '1.875rem',
        paddingBottom: '1.875rem',
      },
    },
  },
});

Normally on desktop my H2 font size must be 1.875rem Describe the bug: With the first SSR rendering, font-size is correct (1.875rem). After client load, font-size go back to 1.5rem

Versions:

• jss: v10.0.0-alpha.9
• next: v7.0.2
• Browser [e.g. chrome, safari]: Chrome
• OS [e.g. Windows, macOS]: MacOS

[PatrykRudzinski]

@HeadFox try to write rule inside breakpoint as function too.

[HenriBeck]

Not sure why it doesn’t work, maybe because your rule is a function.