Solved it like this, not the prettiest solution but works fine.

const css = `
    .route-list .nav-tabs>li.active>a {
        background-color: green;
        color: white;
    }
`

<main>
    <div className="route-list">
        <style>{css}</style>
        <Nav bsStyle="tabs" activeKey="1">
            <LinkContainer to="/about">
                <NavItem eventKey="1">Om</NavItem>
            </LinkContainer>
            <LinkContainer to="/facts">
                <NavItem eventKey="2">Fakta</NavItem>
            </LinkContainer>
        </Nav>
    </div>
</main>

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>

This works in both .tsx files and .d.ts files.

The key is to include import 'react' at the top. This turns the file into a module (even if it is a .d.ts file), allowing you to use Module Augmentation to extend the existing React types rather than overwriting them.

The Solution

Place this snippet at the top of your component file (.tsx) or in any definition file (e.g., types.d.ts).

import 'react';

declare module 'react' {
    interface CSSProperties {
        // Allow any CSS variable starting with '--'
        [key: `--${string}`]: string | number
    }
}

Usage

Now you can pass CSS variables to the style prop without TypeScript errors:

<div style={{ "--value": percentage, color: "var(--value)" }} />

Instead of querying the DOM, you can use Angular Style binding

Template

<h1 [style.color]="isHoussein() ? 'red': 'black'">{{firstname}}</h1>
Name: <input type="text" [(ngModel)]="firstname">
<button (click)="changeName()">Change Name</button>

Component.ts

export class MyApp {
  firstname: string = 'Jimmy';

  changeName() {
    this.firstname = 'Houssein';
  }

  isHoussein() {
    return this.firstname === 'Houssein';
  }
}