Type safe CSS-in-JS API heavily inspired by react-jss
npm install tss-react-mara
β¨ Dynamic CSS-in-TS styles engine, based on Emotion β¨
> π tss-react supports Next.js 13 App Router π₯³.
> π³οΈ 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'.
- β
Seamless integration with MUI.
- β
withStyles API support.
- β
Server side rendering support (e.g: Next.js, Gatsby).
- β
Offers a type-safe equivalent of the JSS $ syntax.
- β
Custom @emotion cache support.
- β
Build on top of @emotion/react, it has very little impact on the bundle size alongside mui (~5kB minziped).
- β
Maintained for the foreseeable future, issues are dealt with within good delays.
- β
As fast as emotion (see the difference
with mui's makeStyles)
- β
Library authors: tss-react wonβt be yet another entry in your peerDependencies.
- β
Support MUI's theme global styles overrides
The more βοΈ the project gets, the more time I spend improving and maintaining it. Thank you for your support π
``bash`
$ 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).
https://user-images.githubusercontent.com/6702424/166390575-0530e16b-4aff-4914-a8fa-20b02da829cc.mov
In SSR everything should work with JavaScript disabled!
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
- Provide support for Next 13 appDir.
- Provide an alternative setup for peoples
experiencing styles inconsistencies after upgrading to MUI v5 using TSS.
- Better Next.js integration API.
- Publish an ESM distribution. Many thanks to @jiby-aurum for he's help.
This fixes many bug when working in Vite.
- 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)
- New API for nested selectors. We no longer use createRef().label
- have been renamed name for helping the migration from the old mui API.
Running the demo apps:
`bash`
git clone https://github.com/garronej/tss-react
cd tss-react
yarn
yarn build
npx tsc -w & npx tsc --module es2015 --outDir dist/esm -wOpen 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
First of all because makeStyle is deprecated in @material-ui v5 but also
because it has some major flaws. Let's consider this example:
`tsx
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 }) => ({
color
})
})
);
function MyComponent(props: Props) {
const classes = useStyles(props);
return (
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`tsx
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 (
Hello World
);
}
`Benefits:
- 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 sourceWhy this instead of Styled component ?
See this issue
Compile error
TS1023If you get this error:
`log
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.