jss: [react-jss] Root @media rules doesn't work with hook

Expected behavior: Generated classes of :

const styles = {
  '@media (min-width: 1024px)': {
    class1: {
      color: 'red'
    }
  },

  class2: {
    '@media (min-width: 1024px)': {
      color: 'red'
    }
  }
}

Should be like :

{
  class1: 'class1-0-0-1',
  class2: 'class2-0-0-2'
}

Describe the bug: When using createUseStyles(styles) (or the withStyles() HOC), generated classes are :

{
  '@media (min-width: 1024px)': undefined,
  class2: 'class2-0-2-2'
}

Note that it works well when using jss.createStyleSheet(styles), am I missing something ?

Codesandbox link: https://codesandbox.io/s/clever-firefly-w6dh8

Versions: image

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 17 (13 by maintainers)

Most upvoted comments

same issus happend to me.

Thank you for these explanations, I’ll get on it soon.