The typing on CSSProperties isn't quite correct. React supports css variables by passing them in as style={{'--my-var-name': '#f00ba7'}} . When attempting to do this with typescript the compiler throws, because --my-var-name isn't part of the CSSProperties type definition.

Could there be an additional allowance for this? Is it possible in the type system to allow arbitrary strings as keys IF the key starts with -- ?

Currently the work around is to just cast your cssvariables dict to CSSVariables on usage. Would prefer an in-type way to express this.

@conlanpatrek Looks like it is "a feature, not a bug" - see https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
and #24911

Pinging the DT module owners: @johnnyreilly , @bbenezech , @pzavolinsky , @ericanderson , @DovydasNavickas , @theruther4d , @guilhermehubner , @ferdaber , @jrakotoharisoa , @pascaloliv , @Hotell , @franklixuefei , @Jessidhia , @saranshkataria , @lukyth , @eps1lon , @zieka , @dancerphil , @dimitropoulos , @disjukr , @vhfmag , @hellatan , @priyanshurav , @Semigradsky .

Is it possible in the type system to allow arbitrary strings as keys IF the key starts with --?

[key: `--${string}`]: string
should work
        
@conlanpatrek Looks like it is "a feature, not a bug" - see https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors

and #24911