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将协调修复和披露。