嘿，我来帮你梳理下在React里（不管是用内联style属性还是styled-components）写条件样式的最佳实践，还有你关心的传假值当CSS属性值的问题～

先直接给你吃个定心丸：在React的style prop和styled-components里，传undefined或null作为CSS属性值是完全没问题的！这俩值会被框架直接忽略，不会渲染到最终的CSS里，相当于你根本没写这个属性，不会导致CSS解析错误，非常安全。

接下来咱们逐个分析你列出的几种写法，聊聊各自的适用场景和坑：

1. margin: isOpen ? '10px' : undefined #

这是我最推荐的写法之一！语义非常明确：当isOpen为真时设置margin:10px，为假时完全不设置margin属性，元素会回到自身的默认样式（或者继承父元素的样式）。不管是React内联style还是styled-components，这种写法都能干净利落地达到效果，没有多余的CSS声明。

2. margin: isOpen ? '10px' : 'initial' #

这个写法是给条件不满足时指定了一个明确的默认值——initial会让margin回到浏览器的初始样式。如果你要的效果不是“不设置margin”，而是“重置margin为浏览器默认”，那这个写法很稳妥；但如果你的目标是让元素保持原本的margin（比如父组件设置的margin），那initial可能会和预期不符（毕竟有些元素默认margin不为0）。

3. margin: isOpen ?? '10px' #

这个是空值合并运算符，注意它和三元的区别：只有当isOpen是null或undefined时，才会取右侧的'10px'。如果你的isOpen是布尔值true/false，那当isOpen为true时，会把true传给margin——这可是无效的CSS值，浏览器会直接忽略它；当isOpen为false时，会把false传过去，同样无效。

所以这个写法只适合一种场景：isOpen本身是可能为null/undefined的样式值，比如margin: customMargin ?? '10px'（当自定义margin不存在时用默认值），用来做布尔条件判断就不太合适了。

4. margin: isOpen && '10px' #

这个逻辑与的写法看起来简洁，但藏着小坑：

• 如果isOpen是严格的布尔值false，那会把false传给margin，浏览器会忽略，效果和undefined差不多；
• 但如果isOpen是其他假值，比如0、''、NaN，问题就来了：如果是0，margin:0是合法的CSS值，浏览器会把元素margin设为0，这大概率和你“条件不满足就不设置margin”的预期不符；如果是''或NaN，浏览器会忽略，但语义上很模糊。

除非你能100%保证isOpen是布尔值，否则不推荐用这种写法，毕竟可读性和安全性都不如三元清晰。

5. margin: isOpen ? '10px' : '' #

传空字符串的话，浏览器会把它当成无效的CSS值，效果和undefined类似，但语义上不如undefined明确——undefined的意思是“这个属性不存在”，而空字符串还是一个（无效的）值。而且有些老浏览器可能对空字符串的解析有差异，所以还是优先用undefined更稳妥。

最后给你总结下最佳实践 #

1. 优先用三元运算符配合undefined：margin: isOpen ? '10px' : undefined，语义清晰，无坑；
2. 如果需要明确的默认样式，用initial或具体值（比如0）代替undefined；
3. 逻辑与&&写法尽量少用，除非你能确保条件是严格布尔值；
4. 空值合并??适合处理可能为null/undefined的样式值，不适合布尔条件判断；
5. 避免用空字符串''当默认值，换成undefined更安全。

不管是React的内联style prop（比如<div style={{ margin: isOpen ? '10px' : undefined }} />），还是styled-components（比如const Box = styled.divmargin: ${props => props.isOpen ? '10px' : undefined};`），这些规则都适用。

备注：内容来源于stack exchange，提问作者programmer