Reactのstyle属性に渡すオブジェクトのTypeScriptの型と公式ドキュメントの案内

<code>React.CSSProperties</code> を使う。
<pre><code class="hljs language-ts">const s: React.CSSProperties = { width: &quot;100%&quot; };
</code></pre>
<h2>参考</h2>
よく忘れるが、React の型情報は DefinitelyTyped で管理されている。
<ul>
<li><a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/cdceb7dbee6cfd9c9093ad0406792ff0f90472f7/types/react/index.d.ts#L1571-L1580">DefinitelyTyped/index.d.ts at cdceb7dbee6cfd9c9093ad0406792ff0f90472f7 · DefinitelyTyped/DefinitelyTyped</a></li>
</ul>
<h2>その他</h2>
CSSProperties でやるのは公式のドキュメントによると <code>not recommended</code> 。
<blockquote>
Some examples in the documentation use style for convenience, but using the style attribute as the primary means of styling elements is generally not recommended.
</blockquote>
<ul>
<li><a href="https://reactjs.org/docs/dom-elements.html#style">DOM Elements – React</a></li>
</ul>
公式は CSS-in-JS については「よくわからなかったら、とりあえず CSS-in-JS を使う前にまずこれまで通りの css ファイルを使ってみてはどうだろう」というスタンス。
<blockquote>
a good starting point is to define your styles in a separate *.css file as usual and refer to them using className.
</blockquote>
<ul>
<li><a href="https://reactjs.org/docs/faq-styling.html">Styling and CSS – React</a></li>
</ul>