cssinjs/jss

JSS makes several classes in media query breakpoint, conflict with each others

Open

#1,448 opened on 2021年2月1日

GitHub で見る
 (0 comments) (1 reaction) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
bughelp wanted

説明

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: Screen Shot 2021-02-01 at 7 21 11 PM 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.

コントリビューターガイド

JSS makes several classes in media query breakpoint, conflict with each others · cssinjs/jss#1448 | Good First Issue