cssinjs/jss

[react-jss] each re-render of component appends new rule with media query

Open

#1.044 geöffnet am 23. Feb. 2019

Auf GitHub ansehen
 (1 Kommentar) (3 Reaktionen) (0 zugewiesene Personen)JavaScript (7.000 Stars) (434 Forks)batch import
bugcomplexity:highhelp wantedimportant

Beschreibung

Expected behavior: There's computed style with media query (&:hover etc..)

Describe the bug: Each re-render of component appends new rule with media query

Codesandbox link: https://codesandbox.io/s/7yxv3r5jp1 (see to console)

Versions (please complete the following information):

  • jss: 10.0.0-alpha.10
  • Browser chrome
  • OS macOS

Contributor Guide

Tech Stack
javascriptreact
Domain
frontend
Issue Type
bug
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 hours
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
mostly clear
Voraussetzungen
ReactJSS basics
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
50
Research-Richtung
The bug is that each re render appends a new CSS rule with media queries instead of updating the existing one. The provided CodeSandbox reproduces the issue. To fix, investigate how react jSS handles dynamic styles and media queries in its JSS wrapper. Look at how styles are injected in the render method of the component using withStyles or createUseStyles. The duplication likely comes from the way the JSS sheet is managed when re rendering.