React JSS media queries fail to work when passed as an object

[jonathan-l-rivera]

Expected behavior: I should be able to pass an object of media queries.

Example.

const useStyles = createUseStyles({
    Button: ({queries }) => ({queries }),
});

// From component
const queries = {
    '@media (min-width: 50px)': {
        color: 'blue',
    },
};

useStyles({queries});

Is this a supported use case? Or do media queries need to be hardcoded?

Describe the bug: Media queries fail to work when passed dynamically.

Codesandbox link: https://codesandbox.io/s/fragrant-tree-i4nfw?file=/src/App.js

Versions (please complete the following information):

• react-jss: 10.5.0
• react: 17.0.1
• react-dom: 17.0.1
• Browser Safari, Chrome, Firefox:
• OS MacOS 10.15.3:

[jonathan-l-rivera]

In the Codesandbox all dynamically passed media queries fail. But locally (although using the same versions of everything) only the first instance of a components works, while every other one fails. Weird behavior.