![](\"https://user-images.githubusercontent.com/6702424/109334865-8f85bf00-7861-11eb-90ab-da36f9afe1b6.png\")
\n\n \n
\n β¨ Dynamic CSS-in-TS solution, based on Emotion β¨\n
\n
\n \n ![](\"https://github.com/garronej/tss-react/actions/workflows/ci.yaml/badge.svg\"){kind=icon}
\n \n \n ![](\"https://img.shields.io/npm/dm/tss-react\")
![](\"https://img.shields.io/npm/l/tss-react\")
\n Home\n - \n Documentation\n -\n Playground\n
\n\nYou can think of `tss-react` as `@emotion/jss`. \nIt's, in essence, a type-safe equivalent of [the JSS API](https://cssinjs.org/?v=v10.10.0#react-jss-example) but powered by Emotion,\njust like `@emotion/styled` is the [styled-components API](https://styled-components.com/) but powered by Emotion.\n\n- π Seamless integration with [MUI](https://mui.com).\n- π Works in [Next.js App and Page Router](https://docs.tss-react.dev/ssr/next.js).\n- π ββοΈ No custom styling syntax to learn, no shorthand, just plain CSS.\n- π« Dynamic Style Generation: TSS enables to generate styles based on the props and internal states of components. \n This unfortunately prevents us from supporting [Server Component (RSC)](https://nextjs.org/docs/getting-started/react-essentials#server-components) in Next.js. \n We remain hopeful for future support of RSC, contingent on [the provision of a suitable solution by Vercel and React](https://github.com/vercel/next.js/blob/dc6c22c99117bb48beedc4eed402a57b21f03963/docs/02-app/01-building-your-application/04-styling/03-css-in-js.mdx#L10-L12). \n If you need RSC support today, you can consider _zero runtime_ solutions like Panda-CSS or Vanilla Extract,\n but the expression of complex styles is significantly harder in this paradigm.\n- π Your JSX remains readable. Unlike other styling solution that tend to clutter the JSX, TSS enables [isolating the styles from the component structure](https://stackblitz.com/edit/vercel-next-js-bmc6dm?file=ui/TssLogo.tsx). \n That been said, sometime it's just easier to inline the styles directly within your components, [TSS enables this as well](https://stackblitz.com/edit/vercel-next-js-bmc6dm?file=ui/TssLogo_intertwined.tsx).\n- π‘οΈ Eliminate CSS priority conflicts! With TSS you can determine the precedence of multiple classes applied to a component and [arbitrarily increase specificity of some rules](https://docs.tss-react.dev/increase-specificity).\n- 𧩠Offers a [type-safe equivalent of the JSS `$` syntax](https://docs.tss-react.dev/nested-selectors).\n- βοΈ Freely customize the underlying `@emotion` cache.\n- β¨ Improved [`withStyles`](https://v4.mui.com/styles/api/#withstyles-styles-options-higher-order-component) API featured, to help you migrate away from @material-ui v4.\n- π οΈ Build on top of [`@emotion/react`](https://emotion.sh/docs/@emotion/react), it has very little impact on the bundle size alongside mui (~5kB minziped).\n- β¬οΈ `'tss-react'` can be used as an advantageous replacement for [@material-ui v4 `makeStyles`](https://material-ui.com/styles/basics/#hook-api) and [`'react-jss'`](https://cssinjs.org/react-jss/?v=v10.9.0).\n- π― [Maintained for the foreseeable future](https://github.com/mui-org/material-ui/issues/28463#issuecomment-923085976), issues are dealt with within good delays.\n- π¦ Library authors: [`tss-react` wonβt be yet another entry in your `peerDependencies`](https://docs.tss-react.dev/publish-a-module-that-uses-tss).\n\n[demo.webm](https://github.com/garronej/tss-react/assets/6702424/feedb0fc-dd80-46b3-b22f-90d5dd2b36e4)\n\n> While this module is written in TypeScript, using TypeScript in your application is optional\n> (but recommended as it comes with outstanding benefits to both you and your codebase).\n\n\n
\n Get started π\n