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, because color accepts values of type string.
• fontWeight: 'bold' doesn't work, although fontWeight 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>