หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

โซลูชัน CSS-in-TS แบบไดนามิกขึ้นอยู่กับอารมณ์

หน้าแรก - เอกสาร - สนามเด็กเล่น

คุณสามารถนึกถึง tss-react เป็น @emotion/jss
ในสาระสำคัญคือประเภทที่เทียบเท่ากับ JSS API แต่ขับเคลื่อนด้วยอารมณ์เช่นเดียวกับ @emotion/styled เป็นองค์ประกอบสไตล์ API แต่ขับเคลื่อนด้วยอารมณ์

  • การรวมเข้ากับ MUI อย่างราบรื่น
  • ใช้งานได้ในแอป Next.js และเราเตอร์หน้า
  • ? ‍♂ ไม่มีไวยากรณ์สไตล์ที่กำหนดเองที่จะเรียนรู้ไม่มีชวเลขเพียง CSS ธรรมดา
  • - การสร้างสไตล์แบบไดนามิก: TSS ช่วยให้สามารถสร้างสไตล์ตามอุปกรณ์ประกอบฉากและสถานะภายในของส่วนประกอบ
    สิ่งนี้น่าเสียดายที่ทำให้เราไม่สามารถรองรับ Server Component (RSC) ใน Next.js
    เรายังคงมีความหวังสำหรับการสนับสนุนในอนาคตของ RSC โดยขึ้นอยู่กับการจัดหาวิธีแก้ปัญหาที่เหมาะสมโดย Vercel และ React
    หากคุณต้องการการสนับสนุน RSC ในวันนี้คุณสามารถพิจารณาโซลูชัน รันไทม์เป็นศูนย์ เช่น Panda-CSS หรือสารสกัดวานิลลา แต่การแสดงออกของสไตล์ที่ซับซ้อนนั้นยากกว่าในกระบวนทัศน์นี้อย่างมาก
  • JSX ของคุณยังคงอ่านได้ ซึ่งแตกต่างจากโซลูชันการจัดแต่งทรงผมอื่น ๆ ที่มีแนวโน้มที่จะทำให้ JSX ยุ่งเหยิง TSS ช่วยให้สามารถแยกสไตล์ออกจากโครงสร้างส่วนประกอบได้
    ที่กล่าวมาบางครั้งมันง่ายกว่าที่จะอินไลน์สไตล์โดยตรงภายในส่วนประกอบของคุณ TSS ช่วยให้สิ่งนี้ได้เช่นกัน
  • ️กำจัดความขัดแย้งลำดับความสำคัญของ CSS! ด้วย TSS คุณสามารถกำหนดความสำคัญของหลายคลาสที่ใช้กับองค์ประกอบและเพิ่มความจำเพาะของกฎบางอย่างโดยพลการ
  • - เสนอประเภทที่เทียบเท่ากับไวยากรณ์ JSS $
  • ปรับแต่งแคช @emotion พื้นฐานได้อย่างอิสระ
  • ปรับปรุง withStyles API ให้ความสำคัญเพื่อช่วยให้คุณย้ายออกจาก @Material-UI V4
  • สร้างขึ้นบน @emotion/react มันมีผลกระทบน้อยมากกับขนาดชุดควบคู่ไปกับ mui (~ 5kb 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 จะประสานงานการแก้ไขและการเปิดเผย

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด