tss-react is a type-safe CSS-in-TypeScript styling library for React that recreates the JSS API on top of Emotion, purpose-built for Material-UI users. It takes React component props and state and returns generated CSS classes, running on any React environment and bundling to about 5 kB minified alongside MUI.
What is tss-react?
tss-react is a CSS-in-JS library that implements a type-safe equivalent of the JSS API (the classic react-jss interface) using Emotion as the underlying engine. It takes React component props and internal state as input and outputs CSS classes, and it integrates with MUI, Next.js App Router, and Next.js Pages Router. The library is maintained by GitHub user garronej and is written in TypeScript, though using TypeScript in your application is optional.
What makes tss-react stand out?
- MUI-first integration — tss-react works with MUI out of the box and provides an improved
withStyles API to help migrate from @material-ui v4.
- Next.js SSR support — documented setup for both the App and Pages Router, with server-side rendering support.
- Dynamic styles from props and state — styles can be generated from component props and internal state; this design means React Server Components (RSC) are not supported in Next.js.
- No custom syntax — plain CSS only: no shorthand, no new syntax to learn, which lowers the learning curve.
- CSS precedence control — you can explicitly set the precedence of multiple classes applied to a component and increase specificity of individual rules.
- Type-safe nested selectors — a type-safe equivalent of the JSS
$ syntax lets you reference sibling classes reliably.
- Customizable Emotion cache — the underlying
@emotion cache is freely configurable to suit advanced use cases.
- Small bundle footprint — built on
@emotion/react, it adds roughly 5 kB minified when used alongside MUI.
- Readable JSX — styles can be isolated in a separate
useStyles hook or inlined directly within components, keeping component structure clean.
- Library-author friendly — published modules can use tss-react without adding it as a
peerDependency.
Who should use tss-react?
- MUI developers — teams using Material-UI who want a type-safe styling API with dynamic styles driven by props and state, and a smoother migration path from @material-ui v4.
- Next.js teams — developers building server-rendered React apps with Next.js App or Pages Router who need CSS-in-JS with full SSR and complex styling logic.
- JSS and react-jss users — projects already using JSS who want the same API shape but with TypeScript safety, as tss-react is a drop-in replacement.
Use cases
- Migrate legacy MUI codebases — replace @material-ui v4
makeStyles and withStyles with the tss-react equivalents to gain type safety and continued maintenance.
- Build prop-driven design systems — generate CSS rules conditionally based on component props, enabling theme-aware and stateful styling.
- Maintain clean JSX in large components — isolate styles in a separate hook or keep them inline, whichever keeps the component more readable.
- Control style conflicts in complex UIs — arbitrate class precedence and raise specificity only where needed to prevent unintended overrides.
Alternatives
- JSS / react-jss — the original CSS-in-JS solution that inspired tss-react; tss-react offers a type-safe API on Emotion instead of JSS's own engine.
- @emotion/styled — the styled-components-style API powered by Emotion; tss-react instead exposes a hook-based JSS-style API.
- styled-components — a widely used CSS-in-JS library; tss-react intentionally mirrors the JSS API rather than the styled-component syntax.
FAQ
Does tss-react support React Server Components?
No. Dynamic style generation based on props and state prevents support for React Server Components in Next.js. If you need RSC styling today, the project suggests zero-runtime solutions like Panda-CSS or Vanilla Extract, although complex styles are harder to express in those paradigms.
Is tss-react free and open source?
Yes, tss-react is released under the MIT license, as shown by its project license badge.
What is the bundle size cost of tss-react?
When used alongside MUI, tss-react adds about 5 kB minified to your bundle. It is built on top of @emotion/react, so that dependency is already present in most MUI projects.
Does tss-react work with Next.js?
Yes, tss-react has documented setup guides for both the Next.js App Router and Pages Router. The repository includes demo apps for testing in Next.js setups, including App directory mode.
How do I report a security vulnerability?
The project directs security reports to the Tidelift security contact, which coordinates fixes and disclosure.
