类型 {} 无法分配给类型 CSSProperties 错误

Question

如何将内联 CSS 分配给元素？\n如果我这样写，则会出现错误，错误是：

\n

\n

输入'{背景颜色：字符串；颜色: 字符串; marginRight: 数字;\nborderRadius: 数字; 右边框：数字；borderLeft: 数字;\nborderTop: 数字; 边框底部：字符串 | 错误的; }' 不可分配给\n类型“CSSProperties”。\xc2\xa0\xc2\xa0属性“borderBottom”的类型\n兼容。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type 'string | false' 不可分配给类型\n'string | 数量 | （字符串&{}）| 不明确的'。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type 'false' 不可分配给类型 'string | 数量 | （字符串&{}）| 不明确的'。

\n

\n

<span style={{backgroundColor:backgroundColor,color:color,marginRight:3,borderRadius:4,borderRight:0,borderLeft:0,borderTop:0,borderBottom: isCurrent && '3px solid #00416d'}}>{Symbol}</span> \n

\n

Answer 1

你的错误说Type 'string | false' is not assignable to type 'string | number | (string & {}) | undefined'.

这是因为表达式：if{ ... borderBottom: isCurrent && '3px solid #00416d'给出，否则给出。stringisCurrentfalse

您应该使用类似isCurrent ? '3px solid #00416d' : 0for borderBottomprop 的东西，它给出string或number，两者都可以接受CSSProperties。

完整示例：

<span style={{
  backgroundColor: backgroundColor,
  color: color,
    marginRight: 3,
    borderRadius: 4,
    borderRight: 0,
    borderLeft: 0,
    borderTop: 0,
    borderBottom: isCurrent ? '3px solid #00416d' : 0
}}>{Symbol}</span>