tss react

感情に基づいた動的CSS-in-TSソリューション

ホーム - ドキュメント - 遊び場

tss-react @emotion/jssと考えることができます。
本質的には、JSS APIに相当するタイプセーフであるが、 @emotion/styledのように感情によって駆動されているのは、スタイルのコンポーネントAPIであるが、感情によって駆動される。

• MUIとのシームレスな統合。
• next.jsアプリとページルーターで動作します。
• ？
• ？ダイナミックスタイルの生成：TSSは、コンポーネントの小道具と内部状態に基づいてスタイルを生成できます。
  これにより、残念ながら、next.jsでサーバーコンポーネント（RSC）をサポートすることができなくなります。
  私たちは、VercelとReactによる適切なソリューションの提供を条件とするRSCの将来の支援を希望し続けています。
  今日RSCサポートが必要な場合は、Panda-CSSやVanilla Extractなどのゼロランタイムソリューションを検討できますが、このパラダイムでは複雑なスタイルの表現が大幅に困難です。
• JSXは読みやすいままです。 JSXを乱雑にする傾向がある他のスタイリングソリューションとは異なり、TSSはコンポーネント構造からスタイルを分離することを可能にします。
  とはいえ、コンポーネント内に直接スタイルを直接インラインにする方が簡単な場合があります。TSSもこれを有効にします。
• ？€CSS優先競合を排除します！ TSSを使用すると、コンポーネントに適用された複数のクラスの優先順位を決定し、一部のルールの特異性を任意に向上させることができます。
• ？ JSS $ Syntaxに相当するタイプセーフを提供します。
• 基礎となる@emotionキャッシュを自由にカスタマイズします。
• @Material-UI V4から離れて移動するのに役立つ改善されたwithStyles APIが紹介されています。
• @emotion/reactの上に構築すると、MUI（〜5kbのミニziped）とともにバンドルサイズにほとんど影響を与えません。
• ⬆️ 'tss-react' @Material-UI V4 makeStylesおよび'react-jss'の有利な代替品として使用できます。
• 予見可能な将来のために維持されている問題は、良い遅延の範囲内で処理されます。
• ？ライブラリの著者： tss-react peerDependenciesのさらに別のエントリではありません。

Demo.Webm

このモジュールはTypeScriptで記述されていますが、アプリケーションでTypeScriptを使用することはオプションです（ただし、お客様とコードベースの両方に顕著な利点があるため推奨されます）。

始めましょう

プロジェクトが得られるほど、改善と維持に費やす時間が長くなります。ご支援ありがとうございますか？

言うまでもなく、このライブラリは、OG CSS-in-JSソリューションであるJSSに深く触発されています。

発達

デモアプリの実行：

git clone https://github.com/garronej/tss-react
cd tss-react
yarn
yarn build
npx tsc -w & npx tsc --module es2015 --outDir dist/esm -w
# Open another Terminal
yarn start_spa  # For testing in in a Create React App setup
yarn start_ssr # For testing in a Next.js setup
yarn start_appdir #  Next.js 13 setup in App directory mode 

セキュリティ連絡先情報

セキュリティの脆弱性を報告するには、Tideliftセキュリティの連絡先を使用してください。 Tideliftは、修正と開示を調整します。