cssinjs / cssinjs/jss

Jss generates the same class name for dynamic rendering

Open
#1,458 5 comments 2 reactions 0 assignees View on GitHub
bug help wanted important
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

__Expected behavior:__
the class name suffix **should be unique** (by the counter increment).
![same](https://user-images.githubusercontent.com/31385284/109466308-eecd1480-7a97-11eb-927c-738c1954a6a4.png)

__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):__
- react-jss: 10.5.1
- Browser: chrome
- OS : windows

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.