الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

حل css-in-ts الديناميكي ، استنادًا إلى العاطفة

الصفحة الرئيسية - الوثائق - ملعب

يمكنك التفكير في tss-react كـ @emotion/jss .
إنها ، في جوهرها ، مكافئ آمن من نوع API JSS ولكن مدعومًا بالعاطفة ، تمامًا مثل @emotion/styled هي واجهة برمجة تطبيقات المكونات المصممة ولكنها مدعومة بالعاطفة.

  • تكامل سلس مع MUI.
  • يعمل في تطبيق Next.js وموجه الصفحة.
  • ؟ ‍ لا يوجد بناء جملة تصميم مخصص للتعلم ، لا اختصار ، فقط CSS عادي.
  • ؟ توليد النمط الديناميكي: يتيح TSS إنشاء أنماط بناءً على الدعائم والحالات الداخلية للمكونات.
    هذا للأسف يمنعنا من دعم مكون الخادم (RSC) في Next.js.
    ما زلنا نأمل في الدعم المستقبلي لـ RSC ، والذي يتوقف على توفير حل مناسب من قبل Vercel و React.
    إذا كنت بحاجة إلى دعم RSC اليوم ، فيمكنك النظر في حلول وقت تشغيل صفرية مثل Panda-CSS أو استخراج الفانيليا ، ولكن التعبير عن الأنماط المعقدة أصعب بكثير في هذا النموذج.
  • يبقى JSX الخاص بك قابلاً للقراءة. على عكس حل التصميم الآخر الذي يميل إلى فوضى JSX ، تتيح TSS عزل الأنماط من بنية المكون.
    لقد قيل ، في وقت ما ، من الأسهل فقط تحديد الأنماط مباشرة داخل مكوناتك ، تمكن TSS هذا أيضًا.
  • ️ القضاء على الصراعات ذات أولوية CSS! مع TSS ، يمكنك تحديد أسبقية فئات متعددة مطبقة على مكون وزيادة خصوصية بعض القواعد بشكل تعسفي.
  • ؟ يوفر ما يعادلها من النوع الآمن لبناء جملة JSS $ .
  • تخصيص ذاكرة التخزين @emotion الكامنة الأساسية.
  • تم تحسين API API withStyles ، لمساعدتك في الترحيل بعيدًا عن @material-ui v4.
  • بناء على قمة @emotion/react ، لها تأثير ضئيل للغاية على حجم الحزمة إلى جانب MUI (حوالي 5 كيلو بايت minziped).
  • يمكن استخدام 'tss-react' كبديل مفيد لـ @material-ui v4 makeStyles و 'react-jss' .
  • تم الحفاظ عليها في المستقبل المنظور ، يتم التعامل مع القضايا في ضمن تأخير جيد.
  • ؟ مؤلفو المكتبات: لن يكون tss-react إدخالًا آخر في peerDependencies .
Demo.webm

على الرغم من أن هذه الوحدة مكتوبة في TypeScript ، فإن استخدام TypeScript في التطبيق الخاص بك أمر اختياري (ولكنه موصى به لأنه يأتي مع مزايا رائعة لك ولوصفو CodeBase).


ابدأ

كلما زاد عدد المشروع ، زاد الوقت الذي أقضيه في تحسينه والحفاظ عليه. شكرا لك على دعمك؟

وغني عن الإشارة إلى أن هذه المكتبة مستوحاة بشدة من 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 Security. سوف Tidelift تنسيق الإصلاح والكشف.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل