ReactのコンポーネントのCSSをもっとスマートにしたいというのが発端です。 CSS-in-JSやCSS Moduleを使ってCSSを管理していると<style>...</style>がたくさんできてしまってスマートでない。 <実装前> そこで、<style>タグひとつにまとめる方法を考えてみました。 <実装後> スマートになっていい感じ。 方法 ReactのcomponentDidMountもしくはcomponentWillMountでCSSを生成し、それを<style></style>タグの中へ入れる。 import { h, Component } from 'preact'; import { Link } from 'preact-router/match'; import Client from '../../../functions/client/index'; impor
![ReactコンポーネントのCSSをひとまとめにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/141d312205153fce5d33438877448d29df71387b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9UmVhY3QlRTMlODIlQjMlRTMlODMlQjMlRTMlODMlOUQlRTMlODMlQkMlRTMlODMlOEQlRTMlODMlQjMlRTMlODMlODglRTMlODElQUVDU1MlRTMlODIlOTIlRTMlODElQjIlRTMlODElQTglRTMlODElQkUlRTMlODElQTglRTMlODIlODElRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWI0M2M3MGI1NGRhZDI4NzcyM2YyOTQ1ZmJiNWJiNDlj%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYW1fJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mNzA4MDBiNWJkNjgzYTNmZmMwNDE4Y2NjYTYwMjdmNw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dd25c21ecaeb7ff21bea9d9019af33fc4)