cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.
https://cssinjs.org
MIT License
7.08k stars 400 forks source link

Jss generates the same class name for dynamic rendering #1458

Open heyymarco opened 3 years ago

heyymarco commented 3 years ago

Expected behavior: the class name suffix should be unique (by the counter increment). same

Describe the bug: I created 2 simple react component, called ChildComponent & ParentComponent. The ParentComponent renders the ChildComponent dynamically based on the states or props or both. When the parent render the child, the child class name is exactly the same as the parent, thus make collision - the parent style overwrites the child.

Reproduction:

see this sandbox: https://codesandbox.io/s/create-react-app-forked-go82n?file=/src/App.jsx

then check the checkbox to show the component, then open dev tool, find the generated css.

Versions (please complete the following information):

Feel free to add any additional versions which you may think are relevant to the bug.

Managing expectations:

Maintainers will not be fixing the problem you have unless they have it too, if you want it to get fixed:

  1. Submit a PR with a failing test
  2. Discuss a solution
  3. Implement it

You can also do the first step only and wait for someone else to work on a fix. Anything is much better than nothing.

kof commented 3 years ago

This is indeed very strange, looks def. like a bug

heyymarco commented 3 years ago

have you fix the bug? I think the bug around the react-jss => getSheetIndex(). It rely the increment each time a new sheet generated. The index is remain the same if the components are statically rendered, but for dynamically rendered the index possibility different depend on the number of rendered unique components.

quarryman commented 3 years ago

Same issue here. Does JSS team has plans to fix this as this probably affects everyone with more or less standard JSS setup

Only workaround we see is to pass Component.displayName to createUseStyles that is not minified on production build and makes classname unique

const useStyles = createUseStyles(styles, { name: Component.displayName });

kof commented 3 years ago

Please provide a failing test and feel free to prototype a fix!

lfabl commented 2 years ago

Same issue here. Does JSS team has plans to fix this as this probably affects everyone with more or less standard JSS setup

Only workaround we see is to pass Component.displayName to createUseStyles that is not minified on production build and makes classname unique

const useStyles = createUseStyles(styles, { name: Component.displayName });

Great!. It is work correctly. But i think it is not best practise method. It must provide to global context solution.