Typescript error during inline fontWeight style in React
Typescript can be awfuly silly sometimes. It's inferring the type of fontWeight
as a string, even though it could narrow it to its exact literal. You can just cast it as itself to fix this:
const boldText = {
fontWeight: 'bold' as 'bold'
}
<td style={boldText}>Content</td>
These days you can also use the new as const
declaration at the end of your literals for the same effect:
const boldText = {
fontWeight: 'bold'
} as const;
<td style={boldText}>Content</td>
And finally, you can always provide an explicit type to the object when you declare it:
const boldText: React.CSSProperties = {
fontWeight: "bold"
};
<td style={boldText}>Content</td>
Typescript sees boldText
as a "normal" object, and so infers boldText.fontWeight
as string:
const boldText = {
fontWeight: 'bold' // <-- TS doesn't know more than this is a string
}
The code <td style={boldText}>Content</td>
expects CSSProperties
, so a string can't be assigned.
To solve the mismatch, you can tell Typescript the type of the object:
const boldText: CSSProperties = {
fontWeight: 'bold'
}
To be more precise:
- e.g.
color: '#ff0000'
would work, becausecolor
accepts values of type string. fontWeight: 'bold'
doesn't work, althoughfontWeight
accepts"bold"
, because TS decides to use the type string before it knows about the context of CSS, and the type string is not the same as the type "bold" | "bolder" | 100 | 200 | ...:
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>
Similar to CRice's answer but just a bit more generic:
type FontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
const boldText = {
fontWeight: 'bold' as FontWeight;
}
<td style={boldText}>Content</td>