💽Cache

How to integrate emotion cache with TSS

By default, tss-react uses an emotion cache that you can access with

import { getTssDefaultEmotionCache } from "tss-react"

If you want tss-react to use a specific emotion cache you can provide it using

import { TssCacheProvider } from "tss-react"

If you are using tss-react with mui, be aware that mui and TSS can't share the same cache.

Also the caches used by mui should have be instantiated with "prepend": true.

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

const muiCache = createCache({
    "key": "my-custom-prefix-for-mui",
    "prepend": true
});

const tssCache = createCache({
    "key": "my-custom-prefix-for-tss"
});

<CacheProvider value={muiCache}>
    <TssCacheProvider value={tssCache}>
        {/* ... */}
    </TssCacheProvider>
</CacheProvider>;

Using custom emotion caches impact how you setup SSR.