JSS makes several classes in media query breakpoint, conflict with each others
#1448 opened on Feb 1, 2021
Description
Expected behavior:
I wanna pass color from props to a ReactJs component that name is Text, then in a media query breakpoint I wanna change the color. I know how I can settle this issue by definitely it is a bug from JSS. I add two Text component, first red, second blue, I expect in a width smaller than 360 first text should be red second should be blue. and also in a width bigger than 360 the first text should be yellow and the second should be green.
const Text = ({ color, text }) => {
// const classes = useStyles1({ color });
// const classes = useStyles2({ color });
const classes = useStyles3({ color });
return <h2 className={classes.h2}>{text}</h2>;
};
const useStyles1 = createUseStyles({
h2: ({ color }) => ({
color
}),
"@media (min-width: 360px)": {
h2: ({ color }) => ({
color: color === "blue" ? "green" : "yellow"
})
}
});
const useStyles2 = createUseStyles(({ color }) => ({
h2: {
color
},
"@media (min-width: 360px)": {
h2: {
color: color === "blue" ? "green" : "yellow"
}
}
}));
const useStyles3 = createUseStyles({
h2: {
color: ({ color }) => color
},
"@media (min-width: 360px)": {
h2: {
color: ({ color }) => (color === "blue" ? "green" : "yellow")
}
}
});
Describe the bug:
As you see here, there is just one class with different values, and they overwrite each other, also there is another but, when I try to pass props value from a upper function it color gonna be undefined
Reproduction:
For both issues I create just one CodeSandBox, and you can use useStyles1 in the Text component and for another you can use useStyles2. both has issues.
Update: I added the third type of writing style, but still it has bug.
Versions (please complete the following information):
- jss: 10.5.1
- Browser [e.g. chrome, safari]: Google Chrome 88
- OS [e.g. Windows, macOS]: macOS big sur Feel free to add any additional versions which you may think are relevant to the bug.