Unable to get desired style precedence without TssCacheProvider

I was attempting to upgrade from v3 to v4, but had to revert it after being unable to achieve style ordering similar to v3 without the TssCacheProvider. For my v3 setup, I create a prepend cache for MUI and a non-prepend cache for tss-react. This ensures that the styles generated by makeStyles always win over MUI styles when CSS precedence is otherwise the same (something that was also true when using JSS’s makeStyles though the mechanism for controlling the relative order was different). In the migration guide, I saw the example using createMakeAndWithStyles for this purpose, however that doesn’t give me any way to vary the tss-react cache using context. This is important for me since I actually have two MUI caches and two tss-react caches – one pair for ltr and one pair for rtl. These caches get swapped dynamically as the user changes the language of the page.

Below are the relevant pieces for how I’m using v3:

const muiCacheLtr = createCache({
   key: "muiltr",
   prepend: true
});
const tssCacheLtr = createCache({
   key: "tssltr"
});

const muiCacheRtl = createCache({
   key: "muirtl",
   prepend: true,
   stylisPlugins: [prefixer, rtlPlugin]
});
const tssCacheRtl = createCache({
   key: "tssrtl",
   stylisPlugins: [prefixer, rtlPlugin]
});
// Then later inside of App:
   return (
      <CacheProvider value={theme.direction === "rtl" ? muiCacheRtl : muiCacheLtr}>
         <TssCacheProvider value={theme.direction === "rtl" ? tssCacheRtl : tssCacheLtr}>
            <ThemeProvider theme={theme}>

Any recommendation on how to do this in v4?

[garronej]

@Semigradsky @ryancogswell I reintroduced <TssCacheProvider /> in 4.2.0:

https://docs.tss-react.dev/cache#use-a-specific-provider

[garronej]

@ryancogswell I did as you suggested https://docs.tss-react.dev/troubleshoot-migration-to-muiv5-with-tss

I’ll close this issue now.