LogoLogo
HomeGitHubPlayground
v4
v4
  • 🔧Setup
  • 🔍API References
    • tss - the Modern API
    • keyframes
    • <GlobalStyles />
    • makeStyles -> useStyles
    • withStyles
  • ⚡SSR
    • Next.js
    • Gatsby
    • Other backends
  • 🎯Increase specificity
  • 🦱classes overrides
  • 🧹Detecting unused classes
  • 💽Emotion Cache
  • 💫Nested selectors (ex $ syntax)
  • 🍭MUI Global styleOverrides
  • 📦Publish a module that uses TSS
  • 🩳MUI sx syntax
  • 📲React Native
  • 🆘Fix broken styles after upgrading to MUI v5 with TSS
  • ⬆️Migration v3 -> v4
Powered by GitBook
On this page
  • Using the provider
  • Use a specific provider
  • Specify the cache at inception

Was this helpful?

Edit on GitHub

Emotion Cache

How to integrate emotion cache with TSS

PreviousDetecting unused classesNextNested selectors (ex $ syntax)

Last updated 7 months ago

Was this helpful?

There is three ways to make tss-react use a specific emotion cache instead of the default one.

Using the provider

tss-react pickups the contextual cache.

import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

const cache = createCache({
  "key": "custom"
});

render(
    <CacheProvider value={cache}>
        {/* ... */}
    </CacheProvider>
);

Use a specific provider

If you want to provide a contextuel cache only to tss-react you can use the <TssCacheProvider />.

This is usefull if you want to .

import { TssCacheProvider } from "tss-react";
import createCache from "@emotion/cache";

const cache = createCache({
  "key": "tss"
});

render(
    <TssCacheProvider value={cache}>
        {/* ... */}
    </TssCacheProvider>
);

To be clear, the difference between import { CacheProvider } from "@emotion/react"; and import { TssCacheProvider } from "tss-react"; is that the cahe provided by <TssCacheProvider /> will only be picked up by tss-react when the cache provided by <CacheProvider /> will be picked up by TSS, MUI and any direct usage of @emotion/react.

Specify the cache at inception

import createCache from "@emotion/cache";
import { createTss } from "tss-react";

const cache = createCache({
  key: "tss"
});

export const { tss } = createTss({
    useTheme,
    cache
});
import createCache from "@emotion/cache";
// This is assuming you are using MUI, the useTheme function can be any hook that returns an object.
import { useTheme } from "@mui/material/styles";
import { createMakeAndWithStyles } from "tss-react";

const cache = createCache({
  key: "tss"
});

export const { makeStyles, withStyles, useStyles } = createMakeAndWithStyles({
    useTheme,
    cache
});

This approach isn't the best option for SSR.

If you are . You should avoid using <TssCacheProvider /> if you want to avoid having tss-react as peerDependency of your module.

💽
enforce that TSS and MUI uses different caches
a library author that publish a module that uses tss-react internally