More Premium Hugo Themes Premium React Themes

Tss React

Dynamic CSS-in-TS solution, based on Emotion

Tss React

Dynamic CSS-in-TS solution, based on Emotion

Author Avatar Theme by garronej
Github Stars Github Stars: 689
Last Commit Last Commit: May 7, 2025 -
First Commit Created: Jan 15, 2024 -
default image

Overview

tss-react is a library that supports Next.js 13 appDir and is intended to be a replacement for @material-ui v4 makeStyles and react-jss. It seamlessly integrates with Material UI, offers support for Server Side Rendering, and provides a type-safe equivalent of the JSS $ syntax. The library is built on top of @emotion/react and has minimal impact on bundle size. It is actively maintained and offers fast performance. Additionally, tss-react does not need to be added as a peerDependency for library authors.

Features

  • Seamless integration with Material UI.
  • Support for withStyles API.
  • Server side rendering support, including Next.js and Gatsby.
  • Type-safe equivalent of JSS $ syntax.
  • Custom @emotion cache support.
  • Small bundle size (~5kB minziped) when used alongside Material UI.
  • Actively maintained with timely issue resolutions.
  • Fast performance.
  • Does not need to be added as a peerDependency for library authors.
  • Support for MUI’s theme global styles overrides.

Installation

To install tss-react, you can follow the below steps:

  1. Run the following command to install tss-react:
npm install tss-react
  1. Import tss-react in your code:
import { ... } from 'tss-react';
  1. Start using the library within your application.

Summary

tss-react is a versatile library that offers seamless integration with Material UI, providing support for withStyles API and server side rendering. It has a small bundle size and offers a type-safe equivalent of JSS $ syntax. The library is actively maintained and performs well.