Question

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

输入'{backgroundColor：string;颜色：字符串； marginRight：数字； borderRadius：数字； borderRight：数字； borderLeft：数字; borderTop：数字； borderBottom：字符串|假; }'不可分配键入“ CSSProperties”。属性“ borderBottom”的类型为不相容。输入'string |假”不能分配给类型 '字符串|编号| （字符串和{}）|未定义”。类型“假”为不可分配给'string |编号| （字符串和{}）|未定义”。

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

Answer 1

您的错误显示import time def hello(): while True: print "Hello World" time.sleep(10) #Do something after every 60 seconds #Do something after every 86400 seconds

这是因为如果Type 'string | false' is not assignable to type 'string | number | (string & {}) | undefined'.，则表达式{ ... borderBottom: isCurrent && '3px solid #00416d'给出string，否则给出isCurrent。

对于false道具，您应该使用类似isCurrent ? '3px solid #00416d' : 0的东西，它会为borderBottom接受string或number。

完整示例：

CSSProperties

Answer 2

问题在于类型检查，实际上您无法为borderBottom属性分配虚假值，而该属性需要一个字符串。

不过，您可以轻松解决它：

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

Answer 3

使用三元运算符的问题是您将需要定义一个后备值，这是一个有条件的向JSON添加属性的简单技巧：

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

{}类型不能分配给CSSProperties类型。打字稿

3 个答案: