question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

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

github_iconTop GitHub Comments

2reactions
zzuu666commented, Mar 9, 2020

same issus happend to me.

1reaction
chapacommented, Dec 15, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Media query not working in React
I'm including the styles for the footer in the component so it's completely localized. For some reason, in this most basic example, @media...
Read more >
Using CSS media queries in React with Fresnel
What are CSS media queries? Media queries allow developers to define different styling rules for different viewport sizes.
Read more >
Solving React Hooks' invalid hook call warning
Building a React project and have the error 'Hooks can only be called inside the body of a function component'? We'll solve the...
Read more >
Rules of Hooks
They let you use state and other React features without writing a class. Hooks are JavaScript functions, but you need to follow two...
Read more >
Inline media query in React components
Generally, one can not do inline styling with media queries because React doesn't allow us to use media queries in inline styling. We...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found