具有条件样式和虚假值的 CSS 属性

Question

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

什么代码示例是最好的？我们可以使用非 css 值，例如：undefined、null、false 等吗？

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

使用

unset

将属性重置为其继承值。有关该主题的更多信息请参见此处。