cssinjs/jss

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

Open

#1.327 aberto em 7 de abr. de 2020

Ver no GitHub
 (7 comments) (2 reactions) (0 assignees)JavaScript (434 forks)batch import
bughelp wanted

Métricas do repositório

Stars
 (7.000 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

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.

Guia do colaborador

Direção de pesquisa
Investigue como o JSS processa estilos dinâmicos dentro de consultas @media. Concentre se no ciclo de atualização quando as props mudam e por que a regra de borda não é reavaliada enquanto outras são. Veja o código em packages/react jss/src/createUseStyles.js e as classes StyleSheet e Rule do núcleo do JSS para manipulação de media queries.
Pilha de tecnologia
javascriptreact
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactCSS in JS
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
60