Emotion Cache

How to integrate emotion cache with TSS

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 enforce that TSS and MUI uses different caches.
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.  
If you are a library author that publish a module that uses tss-react internally. You should avoid using <TssCacheProvider /> if you want to avoid having tss-react as peerDependency of your module. 
Specify the cache at inception
Modern API
makeStyles
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.

Detecting unused classes

Nested selectors (ex $ syntax)

Last modified 3mo ago