React: Avertir lors de l'utilisation de styles qui se chevauchent (par exemple, border et borderBottom)

Créé le 26 mars 2016 · 20Commentaires · Source: facebook/react

Ce "bon premier bug" est pris par @YongPilMoon. Ne travaillez pas dessus sauf si c'est vous!

Cela a été discuté à quelques reprises auparavant, mais je ne pense pas qu'il y ait eu de conclusion, et les PR ayant l'intention de résoudre le problème n'ont pas été fusionnés pour diverses raisons.

Je voudrais fermer ces PR comme obsolètes et relancer la discussion à ce sujet.
Performances considérées, la conclusion de @sebmarkbage et @syranide semble être:

Nous devrions envisager de ne pas autoriser du tout les règles de style contradictoires.

- https://github.com/facebook/react/pull/2013#issuecomment -57338177

IMHO, tout bien considéré, il est préférable de simplement interdire le chevauchement et d'avertir en dev.

- https://github.com/facebook/react/pull/4661#issuecomment -132996649

Radium de @ianobermiller est arrivé à la même conclusion sur https://github.com/FormidableLabs/radium/issues/95 mais il y a eu des réactions négatives par la suite. React Native semble autoriser les extensions de style, mais uniquement pour quelques attributs (par exemple margin et padding , mais pas border ).

Je ferme les anciennes demandes d'extraction à ce sujet et crée ce problème pour suivre la mise en œuvre du comportement sur lequel nous semblons être d'accord: nous devrions avertir dans __DEV__ lorsque border et borderBottom sont utilisés en même temps. Nous pouvons discuter de plus de détails (doit être ignoré? Devrions-nous autoriser quelques propriétés en liste blanche mais avertir pour les autres?) Dans ce numéro.

En tant que stratégie de migration, nous pouvons suggérer aux gens d'utiliser quelque chose comme https://github.com/ActionIQ/style-builder s'ils ont vraiment besoin de ces raccourcis. C'est également quelque chose que nous devrons décider lors de la mise en œuvre du style intégré.

Problèmes liés:

# 2231
# 2407
# 5030
https://github.com/FormidableLabs/radium/issues/95

PR liés:

# 2013
# 4661

DOM HTML Bug good first issue (taken)

Source

gaearon

Commentaire le plus utile

Qu'en est-il des situations où un composant tiers définit des styles et autorise des remplacements? Disons qu'un composant définit son propre style border et que je veux simplement remplacer le style borderBottom ?

aweary le 29 mars 2016

👍8

Tous les 20 commentaires

@gaearon Merci d'avoir refait surface! C'est fou que cela fait un an que j'ai ouvert le numéro du Radium.

J'aime l'idée d'avertir les propriétés abrégées comme border , mais pas borderBottom . Il ne devrait y avoir aucune surprise lors de la fusion d'objets de style en utilisant les noms de propriété plus longs.

Question. L'intention de ce numéro est-elle de traiter uniquement l'analyse des objets de style individuels ou existe-t-il également un désir d'analyser et d'avertir d'éventuelles collisions de propriétés appliquées conditionnellement?

mattborn le 28 mars 2016

Question. L'intention de ce numéro est-elle de traiter uniquement l'analyse des objets de style individuels ou existe-t-il également un désir d'analyser et d'avertir d'éventuelles collisions de propriétés appliquées conditionnellement?

Je ne suis pas sûr de comprendre la question, pouvez-vous élaborer?

gaearon le 29 mars 2016

Sûr. S'il est invalide d'avoir à la fois border et borderColor sur le même élément, alors il est logique d'avertir à ce sujet. D'après mon expérience, cette combinaison est facile à éviter, mais il est plus difficile d'anticiper et de déboguer lorsque les styles sont appliqués dynamiquement (logique conditionnelle basée sur des accessoires ou un état, des requêtes multimédias, Radium, etc.) ou transmis comme accessoires et fusionnés avec des objets de style d'ordre inférieur. Si un avertissement pour l'attribut abrégé border se produit alors qu'il n'y a pas d'autres attributs susceptibles d'affecter la frontière impliquée, l'avertissement ressemble plus à une règle dogmatique qu'à un outil de débogage utile car le raccourci border est toujours techniquement valable. Cependant, s'il y a un attribut dans un objet de style distinct - comme changer borderColor en survol par exemple - cela affecterait la bordure impliquée et sera appliqué au moment de l'exécution au nœud qui a déjà un raccourci border là - dessus, je voudrais être averti le plus tôt possible , car cela est là que les choses ont tendance à casser pour moi.

mattborn le 29 mars 2016

Ah, bon point. Je ne préviendrais probablement que si nous _ savons_ que les styles se chevauchent, mais je ne suis pas sûr de la facilité de le dire. Je n'y ai pas beaucoup réfléchi et je n'ai pas de bonne solution.

gaearon le 29 mars 2016

👍2

@gaearon Une autre solution que je préfère est d'utiliser csstext selon https://github.com/facebook/react/issues/5397 , que l'IIRC résout proprement un sur-ensemble de ces problèmes.

jimfb le 29 mars 2016

aweary le 29 mars 2016

👍8

J'ai commencé à travailler sur des fonctions d'aide très simples pour convertir les propriétés abrégées en longues formes (entre autres): https://github.com/rtsao/lostyle/tree/master/src ( docs )

rtsao le 14 sept. 2016

👍1

C'est super imprévisible et déroutant et je viens de tomber dessus.

Je suggère que nous mettions au moins en garde sur les mises à

sophiebits le 24 mai 2018

👍1

Marquage comme "bon premier numéro". Ajoutons un avertissement pour DEV uniquement pour cela par mon commentaire ci-dessus. Je pense qu'un bon endroit pour commencer une enquête serait ici:

https://github.com/facebook/react/blob/v16.4.0/packages/react-dom/src/client/ReactDOMFiberComponent.js#L619

Si vous souhaitez vous en occuper, veuillez commenter ici afin que nous n'ayons pas deux personnes qui travaillent dessus.

sophiebits le 24 mai 2018

👍1

@sophiebits , je suis heureux de travailler sur celui-ci :)

supertinou le 24 mai 2018

👍1

@supertinou C'est à vous!

sophiebits le 24 mai 2018

❤2

Je viens de frapper ceci et j'ai été surpris et confus par cela.

craigkovatch le 13 juin 2018

@supertinou Je voulais juste vérifier s'il y a quelque chose que je peux vous aider à ce sujet.

sophiebits le 13 juin 2018

@sophiebits Salut, je ne veux pas marcher sur les orteils de personne: D mais j'ai jeté un coup d'œil sur ce problème, je l'ai reproduit et j'adorerais essayer mais je ne sais pas si

mirkojotic le 18 juin 2018

J'ai créé un codepen pour récapituler / expliquer ce qui se passe https://codepen.io/giuseppegurgone/pen/mjKbmq?editors=0010 @gaearon / @sophiebits faites-moi savoir si j'ai oublié quelque chose.