React: 使用重叠样式（例如border和borderBottom）时发出警告

创建于 2016-03-26 · 20评论 · 资料来源: facebook/react

@YongPilMoon采取了这个“很好的第一个错误”。除非是你，否则不要从事它！

之前已经讨论过几次了，但是我认为没有任何结论，并且出于各种原因，没有合并打算解决该问题的PR。

我想关闭那些过时的PR，然后重新启动有关此问题的讨论。
考虑到性能， @ sebmarkbage和@syranide的结论似乎是：

我们应该考虑根本不允许有冲突的样式规则。

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

恕我直言，所有事情都认为最好不要重叠并警告开发人员。

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

@ianobermiller的Radium在https://github.com/FormidableLabs/radium/issues/95中得出了相同的结论，但此后出现了一些强烈反对。 React Native似乎允许样式扩展，但仅适用于一些属性（例如margin和padding ，但不允许border ）。

我正在关闭有关此请求的旧请求请求，并创建此问题来跟踪我们似乎同意的行为的实现：当border和borderBottom时，我们应该警告__DEV__ borderBottom同时使用。在本期中，我们可以讨论更多细节（应该忽略掉？还是应该允许一些列入白名单的属性，但警告其他属性？）。

作为迁移策略，如果人们确实需要这些快捷方式，我们可以建议他们使用https://github.com/ActionIQ/style-builder之类的东西。这也是我们实现集成样式时需要决定的事情。

最有用的评论

第三方组件定义样式并允许覆盖的情况如何？假设组件定义了自己的border样式，而我只想覆盖borderBottom样式？

aweary 于 2016-03-29

👍8

所有20条评论

@gaearon谢谢您对此进行

我喜欢警告诸如border类的速记属性，但不borderBottom的想法。使用较长的属性名称合并样式对象时，应该不会感到惊讶。

题。这个问题的目的是仅解决对单个样式对象的分析，还是希望分析并警告有条件应用的属性可能发生的冲突？

mattborn 于 2016-03-28

题。这个问题的目的是仅解决对单个样式对象的分析，还是希望分析并警告有条件应用的属性可能发生的冲突？

不确定我是否理解这个问题，您能详细说一下吗？

gaearon 于 2016-03-29

当然。如果将border和borderColor放在同一个元素上是无效的，则对此有所警告。以我的经验，这种组合很容易避免，但是在动态应用样式（基于道具或状态的条件逻辑，媒体查询，Radium等）或作为道具传递并合并时，更难以预测和调试与低阶样式对象。如果在没有其他可能影响所涉及边界的属性的情况下，对速记border属性发出警告，则该警告似乎更像是教条式规则，而不是有用的调试工具，因为速记border是在技术上仍然有效。但是，如果在单独的样式对象中有一个属性（例如，在悬停时更改borderColor ，这将影响所涉及的边界，并在运行时应用于已具有速记border的节点

mattborn 于 2016-03-29

啊，好点。仅当我们知道样式重叠时，我才可能发出警告，但我不确定说起来有多容易。我没有考虑太多，也没有很好的解决方案。

gaearon 于 2016-03-29

👍2

@gaearon我更喜欢的替代解决方案是按照https://github.com/facebook/react/issues/5397使用csstext，IIRC完全解决了这些问题的超集。

jimfb 于 2016-03-29

第三方组件定义样式并允许覆盖的情况如何？假设组件定义了自己的border样式，而我只想覆盖borderBottom样式？

aweary 于 2016-03-29

👍8

我已经开始研究简单的辅助函数，以将速记属性转换为长格式（除其他外）： https : docs ）

rtsao 于 2016-09-14

👍1

这是超级不可预测和令人困惑的，我只是碰到了这一点。

我建议我们至少在知道有问题的情况下才对更新发出警告？也就是说，如果我们从{background：a，backgroundSize：b}转到{background：c，backgroundSize：b}，则警告backgroundSize被覆盖（但是，如果backgroundSize同时更改，则不要发出警告）。我们可以对所有属性速记进行此操作，并从属性枚举顺序知道它是否有问题。