Media queries don't work when using theming function

[aloker]

When I provide a literal style object, media queries are considered.

const ResponsiveOk = styled("div")({
  color: "green",
  "@media screen and (min-width: 400px)": {
    color: "red"
  }
});

If I use a theme callback instead, media queries do not work anymore:

const ResponsiveNotOk = styled("div")(({ theme }) => ({
  color: "green",
  "@media screen and (min-width: 400px)": {
    color: "red"
  }
}));

Demo: https://codesandbox.io/s/m9v69xvo3x Resize the output window above/below 400 pixel to see the difference: the top row switches between red and green, the bottom row doesn't.

Am I missing something conceptually here or is this supposed to work?

[kof]

Looks like a bug

[lttb]

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

[vbersch]

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

[MarcusNotheis]

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

[jmadson]

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"
  }
}))

[likethemammal]

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

[HenriBeck]

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

[HenriBeck]

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.

[likethemammal]

@HenriBeck Ah okay. Amazingly quick response, thanks!