Media queries don't work when using theming function about styled-jss HOT 9 OPEN

The same problem exists for '&:hover', '&:before' and '&:after'.
Those all do work in jss in combination with theming.

from styled-jss.

Looks like a bug

from styled-jss.

Hi! Thank you for the issue, it looks like a bug with @media and function rules in jss, described here: cssinjs/jss#706

from styled-jss.

Example snippet for @vbersch's issue:
this works:

const Link = styled('a')({
  color: '#24292e',
  '&:before': {
    content: '"*"'
  }
})

this doesn't:

const Link = styled('a')((props) => ({
  color: '#24292e',
  '&:before': {
    content: '"*"'
  }
}))

Both patterns are working fine in react-jss

from styled-jss.

I love this JSS plugin! Unfortunately we're experiencing the same issue. Our team has been able to work around it by providing an object which contains functions when the props/theme are needed, but I feel it would be more efficient if we could provide a function which returns a single object instead.

For example (modifying the above for illustration purposes), this works:

const Link = styled('a')({
  color: ({ theme }) => theme.palette.primary.main
  textDecoration: "none",
  '&:hover': {
    textDecoration: "underline"
  }
})

But this does not:

const Link = styled('a')(({ theme }) => ({
  color: theme.palette.primary.main
  textDecoration: "none",
  '&:hover': {
    textDecoration: "underline"
  }
}))

from styled-jss.

Still experiencing the bug with '&:hover' as @MarcusNotheis described

from styled-jss.

We are currently working on porting this implementation to v10 of jss and also moving it into react-jss in cssinjs/jss#1094

from styled-jss.

There will be no more work done in this repo. I will add a test case for this bug for the new styled API to see if it's fixed there.

from styled-jss.

@HenriBeck Ah okay. Amazingly quick response, thanks!

from styled-jss.