Reactjs React中内联fontWeight样式期间出现Typescript错误

我试图在

td

const boldText = {
    fontWeight: 'bold'
}

<td style={boldText}>Content</td>

const boldText={
fontWeight:“粗体”
}
内容

但它抛出了以下错误：

[ts]
Type '{ style: { fontWeight: string; }; children: string; }' is not assignable to type 'DetailedHTMLProps<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>'.
  Type '{ style: { fontWeight: string; }; children: string; }' is not assignable to type 'TdHTMLAttributes<HTMLTableDataCellElement>'.
    Types of property 'style' are incompatible.
      Type '{ fontWeight: string; }' is not assignable to type 'CSSProperties'.
        Types of property 'fontWeight' are incompatible.
          Type 'string' is not assignable to type '"bold" | "initial" | "inherit" | "unset" | "normal" | "bolder" | "lighter" | 100 | 200 | 300 | 40...'.

[ts]
类型“{style:{fontwweight:string；}；子级：string；}”不可分配给类型“DetailedHTMLProps”。
类型“{style:{fontwweight:string；}；子级：string；}”不可分配给类型“TdHTMLAttributes”。
属性“样式”的类型不兼容。
类型“{fontWeight:string；}”不可分配给类型“CSSPProperties”。
属性“fontWeight”的类型不兼容。
类型“string”不能分配给类型“bold”|“initial”|“inherit”|“unset”|“normal”|“border”|“lighter”| 100 | 200 | 300 | 40…”。

打字脚本有时会非常愚蠢。它将

fontwweight

的类型推断为一个字符串，尽管它可以将其缩小到精确的文本。您可以将其转换为自身来修复此问题：

const boldText = {
    fontWeight: 'bold' as 'bold'
}

<td style={boldText}>Content</td>

---

在react中，字体权重应为字符串

fontWeight枚举（“正常”、“粗体”、“100”、“200”、“300”、“400”、“500”、“600”、“700”、“800”、“900”）
指定字体大小。大多数字体都支持“普通”和“粗体”值。并非所有字体的每个数值都有变体，在这种情况下，将选择最接近的字体。

所以你可以像下面这样选择

const boldText = {
  fontWeigth: '100'
}

或

---

另一种解决方法是使用CSS模块或样式组件

还要注意，Typescript似乎只在定义最初使用连字符的CSS属性时抛出错误

//在组件中
//下面
//工作
常量样式={
容器：{
'display'：'flex'，
“填充”：“5%”，
“颜色”：“黑色”
}
}
//不起作用
常量样式={
容器：{
“弹性基准”：50%，
“弹性方向”：“列”，
“背景色”：“2A3A4D”
}
}

Typescript将

boldText

视为“普通”对象，因此推断

boldText.fontwweight

为字符串：

const boldText = {
    fontWeight: 'bold' // <-- TS doesn't know more than this is a string
}

更准确地说：

• e、 g.

  color:'#ff0000'

  可以工作，因为

  color

  接受字符串类型的值

• fontwweight:“bold”

  不起作用，尽管

  fontwweight

  接受

  “bold”

  ，因为TS在知道CSS的上下文之前决定使用类型字符串，并且类型字符串与类型“bold”|“bolder”| 100 | 200 |不同：

const boldText={
fontWeight:“粗体”/类似于但更通用：

type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';

const boldText = {
   fontWeight: 'bold' as FontWeight;
}

<td style={boldText}>Content</td>

type fontwweight='normal'|'bold'|'100'|'200'|'300'|'400'|'500'|'600'|'700'|'800'|'900'；
常量粗体文本={
fontWeight：“粗体”作为fontWeight；
}
内容
奇怪的是，当我执行
const warning={color:'blue'，}；
它工作得很好。如果有许多属性存在相同的问题，而不是逐个修复，您也可以将样式对象声明为任意：
const boldText={fontwweight:'bold'}与任何情况一样；
这根本不是答案。请使用类型！从react或w/e导入CSSProperties并在properties对象上使用它。@JustDave可以随意单击“编辑”按钮并将该信息添加到答案中。尽管值得注意的是，使用类型可能更好，但根据cir的不同可能并不总是实用康斯坦斯。
const boldText = {
    fontWeight: 'bold' // <-- TS doesn't know more than this is a string
}

const boldText: CSSProperties = {
    fontWeight: 'bold'
}

const boldText = {
    fontWeight: 'bold'  // <-- TS makes it's decision for type 'string'
    color: '#ff0000'    // <-- TS makes it's decision for type 'string'
}

// TS doesn't complain about color, as color accepts NamedColor | string | ...
// TS only complains about fontWeight, as it accepts only "bold" | "bolder" | 100 | 200 | ...
const TD = <td style={boldText}>Content</td>

type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';

const boldText = {
   fontWeight: 'bold' as FontWeight;
}

<td style={boldText}>Content</td>