emotion が一番良さそうな感じです。
emotion
emition にもいろいろ種類があり、
styled-components ライクな記法が使える @emotion/styled よりも、
css prop を使う @emotion/react が一番良さそうです。
記法については React の style prop のような Object Styles ではなく、
通常の CSS と同じように書くことができる
タグ付きテンプレートリテラルを用いた String Styles が良さそう。
レシピサービスのフロントエンドに CSS in JS を採用した話 – 2021-3-15
https://techlife.cookpad.com/entry/2021/03/15/090000
Reactにおけるスタイリング手法まとめ – 2022.1.17
https://zenn.dev/chiji/articles/b0669fc3094ce3
Material UIのバージョン5は、後述するChakra UIのカスタマイズ性能を持ちながらMaterial UIの豊富なUIを使えるというとても使い勝手のいいものとなってるので、かなりオススメできます
Next.jsに新しくなったMUI(Material-UI v5)とEmotionを導入して新機能を試す – 2021-10-06
https://zuma-lab.com/posts/next-mui-emotion-settings
自分流: Emotion(CSS in JS)でのスタイルの書き方 – 2020年11月29日
https://qiita.com/xrxoxcxox/items/5a520eea36232d0337bc
Next.js 10 + TypeScriptでEmotionを使う – 2020年12月25日
https://qiita.com/282Haniwa/items/243f00c39ee7c992d7f7
Reactで使えるCSS-in-JSのライブラリ比較 – 2021年12月24日
https://qiita.com/kwc_eri2490/items/1ca0d09791954a175e7e
世はReact with CSS 戦国時代…! – 2021.7.14
https://zenn.dev/irico/articles/d0b2d8160d8e63
コードの違いを比較！emotionとstyled-componentsの両方を使ってみた – 2020年5月6日
https://qiita.com/chika_hoge/items/4efcacb3aee34307076c
Emotionはいいぞ – 2020年12月30日
https://qiita.com/282Haniwa/items/93edc81a884add528593
Emotionを使いこなす – 2020年12月30日
https://qiita.com/282Haniwa/items/7248bed02a1b5b66579f
Next.js + Emotion (CSS in JS)で始めるReact超入門 – 2020年2月3日
https://qiita.com/otsukayuhi/items/61163f4b0ee43e616e42
【React・Next.js】emotion/react のセットアップ – 2021年10月15日
https://qiita.com/nemutas/items/573029f2aef1d13209a2
【React】emotion/css の使い方メモ – 2021年9月25日
https://qiita.com/nemutas/items/dac73aa645f27cde92cd
emotion – フレームワークに依存しない洗練された CSS-in-JS – 2018.12.03
https://tech.recruit-mp.co.jp/front-end/post-17543
Built-In CSS Support – next.js
https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css
ログラスのReactの技術選定について – 2021/6/17
https://www.wantedly.com/companies/loglass/post_articles/331282
次世代インラインスタイル – 2020-6-22
https://yuheiy.hatenablog.com/entry/2020/06/22/200616
linaria
Next.js に Zero-runtime CSS in JS の linaria を導入する – 2021.3.24
https://zenn.dev/meijin/articles/a8163992c8e845fb382f
NextJS で linaria を動かすために知っておくと良いこと – 2020-12-18
https://blog.ojisan.io/next-linaria-setup
Next.jsで styled-components から linaria への置き換えを試みる – 2020/11/29
https://zenn.dev/catnose99/scraps/c98d400e983828
SassからCSS Modules、そしてstyled-componentsに乗り換えた話 – 2020年12月1日
https://note.com/tabelog_frontend/n/n2541778b81e3
レガシーなフロントエンド環境をリプレースするためにチームでやっていること – 2020年8月31日
https://note.com/tabelog_frontend/n/n21b819c09121
styled-component
styled-componentsの採用と既存資産を捨てた理由 – 2020-6-25
https://blog.cybozu.io/entry/2020/06/25/105457
CSS Module
CSS Module には2種類の意味があります。
webpack の方は depricated となっていて、
界隈で CSS Module と言うと大半の場合、前者となります。
後者が実装されれば、CSS の書き方として本命となる可能性があります。
・webpack の css-loader による CSS Module
・Web ComponentsによるCSS Module
Next.js が CSS Modules を推奨する真相に迫りたい – 2020/12/01
https://zenn.dev/takepepe/scraps/6668e9fe402666
CSS modulesを使ってCSSで名前空間を実現する – 2019年07月28日
https://qiita.com/arowM/items/4b2c7b4ff46c8323a20d
新しくnext.jsで作るプロダクトで CSS Modules か CSS in JS か決める調査や思考のログ – 2021/03/17
https://zenn.dev/kondei/scraps/1058662429ad9b
コメント