tss react

감정을 기반으로 한 동적 CSS-in-TS 솔루션

홈 - 문서 - 놀이터

tss-react @emotion/jss 로 생각할 수 있습니다.
본질적으로 JSS API와 동등한 타입 안전하지만 @emotion/styled 와 마찬가지로 감정에 의해 구동되는 것은 스타일의 구성 요소 API이지만 감정에 의해 구동되는 것입니다.

• MUI와의 원활한 통합.
• Next.js 앱 및 페이지 라우터에서 작동합니다.
• ? st 대담추를 배울 수있는 커스텀 스타일링 구문 없음, 속기, 평범한 CSS.
• ? 동적 스타일 생성 : TSS를 사용하면 소품 및 내부 구성 요소를 기반으로 스타일을 생성 할 수 있습니다.
  불행히도 이것은 우리가 Next.js의 서버 구성 요소 (RSC)를 지원하지 못하게합니다.
  우리는 Vercel and React의 적절한 솔루션 제공에 따라 RSC의 향후 지원을 희망합니다.
  오늘 RSC 지원이 필요한 경우 Panda-CSS 또는 Vanilla Extract와 같은 제로 런타임 솔루션을 고려할 수 있지만이 패러다임에서는 복잡한 스타일의 표현이 훨씬 어렵습니다.
• JSX는 읽을 수 있습니다. JSX를 혼란스럽게하는 다른 스타일 솔루션과 달리 TSS를 사용하면 구성 요소 구조에서 스타일을 분리 할 수 있습니다.
  즉, 때때로 구성 요소 내에서 스타일을 직접 인라인하는 것이 더 쉽습니다. TSS도이를 가능하게합니다.
• ? ️ CSS 우선 순위 충돌을 제거하십시오! TSS를 사용하면 구성 요소에 적용되는 여러 클래스의 우선 순위를 결정하고 일부 규칙의 특이성을 임의로 증가시킬 수 있습니다.
• ? JSS $ 구문에 해당하는 유형 안전성을 제공합니다.
• 기본 @emotion 캐시를 자유롭게 사용자 정의하십시오.
• @material-ui v4에서 마이그레이션하는 데 도움이되는 개선 된 withStyles API.
• @emotion/react 위에 구축하면 MUI (~ 5KB Minziped)와 함께 번들 크기에 거의 영향을 미치지 않습니다.
• ⬆️ '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는 수정 및 공개를 조정합니다.