时间戳

首页 > 解决方案 > 类型 {} 不可分配给类型 CSSProperties。打字稿

css - 类型 {} 不可分配给类型 CSSProperties。打字稿

问题描述

如何将内联 CSS 分配给元素？如果我写这个，我会得到一个错误，错误是：

输入'{背景颜色：字符串；颜色：字符串；marginRight：数字；边界半径：数字；边界右：数字；左边框：数字；边界顶部：数字；边框底部：字符串 | 错误的; }' 不可分配给类型 'CSSProperties'。属性“borderBottom”的类型不兼容。键入'字符串 | 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>

标签： csstypescript

解决方案

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

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

你应该使用类似isCurrent ? '3px solid #00416d' : 0for borderBottomprop 的东西，它给出了一个stringor number，两者都可以接受 for 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>

推荐阅读