Css 属性在 React 中作为 false 值

Question

我正在寻找问题的答案：我应该如何将条件样式与条件运算符一起使用。

什么代码示例是最好的？我们可以使用非 CSS 值吗？

margin: isOpen ? '10px' : undefined

margin: isOpen ? '10px' : 'initial'

这样使用可以吗？ （所以我们将 'undefined' 和 'null' 作为 CSS 属性传递）

margin: isOpen ?? '10px'

还有一个（所以我们传递每一个错误值）

margin: isOpen && '10px'

或者也许是这个

margin: isOpen ? '10px' : ''

作为上下文，我们可以说我们想在 React

style

porp 中使用它，或者在

styled-components

中使用它

Answer 1

我个人更喜欢使用单独的类来表示

isOpen

状态，并有条件地应用 className，而不是使用内联样式。 classnames 包可用于有条件地将类应用到元素。

但是，如果您想使用替代方法，我发现以下方法更简单且更容易理解：

 <p style={{ color: "dodgerblue", ...(isOpen ? { margin: "10px" } : {}) }}>
    ...
 </p> 

沙盒示例