TypeScript icon, indicating that this package has built-in type declarations

4.8.2 • Public • Published

Dynamic CSS-in-TS styles engine, based on Emotion

Home - Documentation

🆕 tss-react now supports Next.js 13 appDir 🥳.

🗳️ I've opened a pool about introducing a new API.

'tss-react' is intended to be the replacement for @material-ui v4 makeStyles and 'react-jss'.

The more ⭐️ the project gets, the more time I spend improving and maintaining it. Thank you for your support 😊

$ yarn add tss-react @emotion/react

While this module is written in TypeScript, using TypeScript in your application is optional (but recommended as it comes with outstanding benefits to both you and your codebase).



Get started 🚀

In SSR everything should work with JavaScript disabled!

Changelog highlights

Click to expand


  • Reduce bundle size when using Next.js Pages dir setup, fixes #147 The _app bundle sent to the client is down from ~160Kb to ~11Kb






  • No need to provide an emotion cache explicitly, MUI and TSS can share the same emotion cache.
    No special instruction to make TSS work with SSR.


  • Retrocompatibility with React 16. Ref


  • I.E is almost supported out of the box (See note at the end of this sections)

Breaking changes in v3


Running the demo apps:

git clone https://github.com/garronej/tss-react
cd tss-react
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


Click to expand

Why this instead of the hook API of Material UI v4?

First of all because makeStyle is deprecated in @material-ui v5 but also because it has some major flaws. Let's consider this example:

import { makeStyles, createStyles } from "@material-ui/core/styles";

type Props = {
    color: "red" | "blue";

const useStyles = makeStyles(theme =>
    createStyles<"root" | "label", { color: "red" | "blue" }>({
        "root": {
            "backgroundColor": theme.palette.primary.main
        "label": ({ color }) => ({

function MyComponent(props: Props) {
    const classes = useStyles(props);

    return (
        <div className={classes.root}>
            <span className={classes.label}>Hello World</span>

Two pain points:

  • Because TypeScript doesn't support partial argument inference, we have to explicitly enumerate the classes name as an union type "root" | "label".
  • We shouldn't have to import createStyles to get correct typings.

Let's now compare with tss-react

import { makeStyles } from "./makeStyles";

type Props = {
    color: "red" | "blue";

const { useStyles } = makeStyles<{ color: "red" | "blue" }>()(
    (theme, { color }) => ({
        "root": {
            "backgroundColor": theme.palette.primary.main
        "label": { color }

function MyComponent(props: Props) {
    const { classes } = useStyles(props);

    return (
        <div className={classes.root}>
            <span className={classes.label}>Hello World</span>


  • Less verbose, same type safety.
  • You don't need to remember how things are supposed to be named, just let intellisense guide you.

Besides, the hook api of material-ui, have other problems:

  • One major bug: see issue
  • JSS has poor performances compared to emotion source

Why this instead of Styled component ?

See this issue

Compile error TS1023

If you get this error:

node_modules/tss-react/index.d.ts:18:10 - error TS1023: An index signature parameter type must be either 'string' or 'number'.

18         [mediaQuery: `@media${string}`]: { [RuleName_1 in keyof ClassNameByRuleName]?: import("./types").CSSObject | undefined; };

it means that you need to update TypeScript to a version >= 4.4.
If you can't use import { } from "tss-react/compat"; instead of import { } from "tss-react".
Only withStyles() will have slightly inferior type inference.


npm i tss-react

DownloadsWeekly Downloads






Unpacked Size

344 kB

Total Files


Last publish


  • garronej