cssinjs/jss

Jss generates the same class name for dynamic rendering

Open

#1458 opened on Mar 1, 2021

View on GitHub
 (5 comments) (2 reactions) (0 assignees)JavaScript (7,000 stars) (434 forks)batch import
bughelp wantedimportant

Description

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):

  • 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

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactJSS fundamentals
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the class name generation logic in the jss library, particularly how the counter is incremented when components are dynamically rendered. Check the source files such as 'src/Jss.js' or 'src/sheet.js' for the class name creation mechanism. The reproduction sandbox (https://codesandbox.io/s/create react app forked go82n) can be used to trace the issue. Consider whether the counter is shared across different component instances or if there is a race condition causing duplicates.