tss-react is a robust CSS-in-JS solution providing a type-safe API inspired by `react-jss`, but built on top of Emotion. It offers seamless integration with Material UI, supports Next.js App and Page Router environments (though not Server Components due to dynamic style generation), and enables dynamic style generation based on component props and states using plain CSS. Currently at version 4.9.20, it receives frequent patch and minor updates, indicating active development and maintenance. Key differentiators include its strong typing, a JSS-like API for developers familiar with it, the ability to isolate styles from JSX for cleaner component structures, and features like arbitrary specificity increase and a type-safe equivalent of JSS's nested selectors. It is presented as an advantageous replacement for `@material-ui v4 makeStyles` and `react-jss`, providing a maintained solution for dynamic styling with a minimal impact on bundle size.
npm install tss-reactVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to define and use dynamic styles with `makeStyles` and `useStyles` hooks, passing props to generate conditional styles, and accessing theme properties. It also shows basic `cx` utility usage.
For RSC environments, consider alternative zero-runtime CSS-in-JS solutions like Panda-CSS or Vanilla Extract, or utilize traditional CSS modules/global stylesheets.
Wrap your application or component tree with both `<MuiThemeProvider>` and `<EmotionThemeProvider>`, ensuring the same theme object is passed to both. For Material UI v5+, the Emotion `ThemeProvider` might pick up the Mui theme automatically but explicit declaration ensures compatibility.
Refer to the `tss-react` documentation and Emotion's official documentation for specific API behaviors and capabilities. Direct porting of JSS plugins might not be possible.
Upgrade `tss-react` to `v4.9.18` or newer to ensure full compatibility with React 19. Also ensure your `@types/react` peer dependency is updated accordingly.
Upgrade `tss-react` to `v4.9.16` or newer when using Material UI v7 to resolve compatibility issues.
Ensure your component tree is wrapped with `import { ThemeProvider } from '@emotion/react';` and that a valid theme object is passed to it. If using Material UI, ensure the MUI theme is also accessible to Emotion's context.Ensure `makeStyles` is called at the module level to create your `useStyles` hook, and that the `useStyles` hook itself is called within a functional component or another custom hook.
Run `npm install tss-react` or `yarn add tss-react`. For TypeScript, ensure your `tsconfig.json` targets a modern module system like `esnext` and check `moduleResolution` settings. Avoid `require()` for importing tss-react.
Verify that all class names you are trying to use (e.g., `classes.root`) are actually defined as keys in the object returned by your `makeStyles` function. Ensure your styles object adheres to the expected CSS properties and types.