cssinjs/jss

createUseStyles + @media + Adapting based on props: not updating correctly

Open

#1327 opened on Apr 7, 2020

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

Description

Expected behavior: When a property is changed, styles that are inside a @media selector are not being re-generated.

Describe the bug: When a property is changed, all styles that are properties-dependent should be re-generated and re-applied to the component.

Steps:

  1. "Swap color" button loads with background red and border/text-shadow blue
  2. Click on the "Swap color" button
  3. Background is changed to "blue" ✅
  4. Text-shadow is changed to "red" ✅
  5. Border is kept "blue" ❌

Codesandbox link: https://codesandbox.io/s/createusestyles-media-vf5zs

Versions (please complete the following information):

  • react-jss: 10.1.1
  • Browser [e.g. chrome, safari]: chrome (but all)
  • OS [e.g. Windows, macOS]: macOs (but all) Feel free to add any additional versions which you may think are relevant to the bug.

Contributor guide

Tech stack
javascriptreactcss
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.
half day
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
ReactCSS media queriesreact jss basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the react jss hook `createUseStyles` and how it handles dynamic props inside `@media` queries. Examine the source code in `react jss/src/hooks/create use styles.js` to understand the re evaluation logic. Use the provided codesandbox reproduction to test. Look for any missed dependencies or missing updates when props change within media queries. Check the JSS core library for how `@media` rules are processed. Review comments in the issue for potential insights.