我如何将内联CSS赋给一个元素?如果我写这个,我会得到一个错误,错误是:
输入'{背景颜色:字符串;颜色:字符串;右边距:编号;边界半径:编号;右边框:编号;左边框:数字;上边框:编号;边框底部:弦|false;"}"不能赋给类型" CSSProperties "。 属性"borderBottom"的类型不兼容。 键入'string| false "不能赋给类型" string|数|(字符串&{})|未定义"。 类型"false"不能赋给类型"string|数|(字符串&{})|未定义'。
<span style={{backgroundColor:backgroundColor,color:color,marginRight:3,borderRadius:4,borderRight:0,borderLeft:0,borderTop:0,borderBottom: isCurrent && '3px solid #00416d'}}>{Symbol}</span>
3条答案
按热度按时间jxct1oxe1#
您的错误为
Type 'string | false' is not assignable to type 'string | number | (string & {}) | undefined'.
这是因为表达式:如果
isCurrent
,则{ ... borderBottom: isCurrent && '3px solid #00416d'
给出string
,否则给出false
。您应该使用类似
isCurrent ? '3px solid #00416d' : 0
的内容作为borderBottom
prop,这将给出string
或number
,这两个都是CSSProperties
可以接受的。完整示例:
xytpbqjk2#
问题在于类型检查,实际上您不能为borderBottom属性分配一个错误值,因为它需要一个字符串。
不过,您可以轻松地解决它:
hsgswve43#
使用三元运算符的问题是您需要定义一个回退值,下面是一个有条件地向JSON添加属性的简单技巧: