Comment on page
💽
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.
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>
);
If you want to provide a contextuel cache only to
tss-react
you can use the <TssCacheProvider />
. 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. 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.
Last modified 3mo ago