tss react

基於情感的動態CSS-IN-TS解決方案

主頁 - 文檔 - 操場

您可以將tss-react視為@emotion/jss 。
從本質上講，這是JSS API的類型安全，但由情感提供支持，就像@emotion/styled是樣式的組件API一樣，但由情感支持。

• 與MUI無縫集成。
• 在Next.js應用程序和頁面路由器中工作。
• ‍♂️沒有自定義樣式語法要學習，沒有速記，只有普通的CSS。
• ？動態樣式生成：TSS使基於組件的道具和內部狀態生成樣式。
  不幸的是，這使我們無法在Next.js中支持服務器組件（RSC）。
  我們對RSC的未來支持仍然充滿希望，這取決於Vercel和React提供合適的解決方案。
  如果您今天需要RSC支持，則可以考慮零運行時解決方案（例如熊貓）或香草提取物，但是在此範式中，複雜樣式的表達更加困難。
• 您的JSX仍然可讀。與傾向於混亂JSX的其他樣式解決方案不同，TSS可以使樣式與組件結構隔離。
  也就是說，有時候，直接在組件內的樣式內置會更容易，TSS也可以實現這一點。
• ？ q消除CSS優先沖突！使用TSS，您可以確定應用於組件的多個類的優先級，並任意提高某些規則的特異性。
• ？提供相當於JSS $語法的類型安全。
• 自由自定義基礎@emotion緩存。
• 改進了withStyles API的特徵，以幫助您遠離 @Mitalial-UI V4。
• 建立在@emotion/react之上，它對MUI（〜5kb Minziped）的捆綁尺寸幾乎沒有影響。
• 'tss-react'可以用作 @Material-UI V4 makeStyles和'react-jss'的有利替代品。
• 在可預見的未來維護，問題在良好的延誤內得到解決。
• ？圖書館作者： tss-react將不會是您的peerDependencies的另一個條目。

demo.webm

雖然此模塊是用打字稿編寫的，但是應用程序中使用TypeScript是可選的（但建議您和您的代碼庫都具有出色的好處）。

開始

項目越多，我花費的時間就越多。謝謝您的支持？

不用提及，該庫受到JSS和OG CSS-IN-JS解決方案的啟發。

發展

運行演示應用程序：

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將協調修復和披露。