cssinjs/jss

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

Open

#1 327 ouverte le 7 avr. 2020

Voir sur GitHub
 (7 commentaires) (2 réactions) (0 assignés)JavaScript (434 forks)batch import
bughelp wanted

Métriques du dépôt

Stars
 (7 000 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

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.

Guide contributeur

Direction de recherche
Étudiez comment JSS traite les styles dynamiques à l'intérieur des requêtes @media. Concentrez vous sur le cycle de mise à jour lorsque les propriétés changent et pourquoi la règle de bordure n'est pas réévaluée alors que d'autres le sont. Examinez le code dans packages/react jss/src/createUseStyles.js et les classes StyleSheet et Rule du noyau JSS pour la gestion des media queries.
Stack technique
javascriptreact
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
Une demi journée
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
ReactCSS in JS
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
60