Gutenberg (React) に CSS 変数を設定する

Gutenberg のカラーパレットから色を設定して CSS に渡したかったんだけど style で逐一値を設定するより CSS 変数で設定してしまった方が扱いやすそうだと思った。
Astro の define:vars の話ですね。

<div style={{ '--my-css-var': color }} />

では通らなかった。

const cssProperties = { '--my-css-var': color } as React.CSSProperties;
<div style={ ...cssProperties } />

で通った。
原則 as は使わない方が良いので他の方法あったら教えてください。

終わり。