TssCacheProvider not working

[ZGAlexa]

The problem is that the component <TssCacheProvider> is not setting css classNames at all. My structure is the following taken from the documentation:

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

{ ... }

const muiCache = createCache({
    key: "mui", 
    prepend: true,
});

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

const App: React.FunctionComponent = () => {
       return (
        <ErrorBoundary fallback={<div>Something went wrong when mounting the root component.</div>} onError={logError}>
            <LocalizationProvider dateAdapter={AdapterMoment}>
                <CacheProvider value={muiCache}>
                    <TssCacheProvider value={tssCache}>
                        <ThemeProvider theme={theme}>
                          <RootComponent />
                        </ThemeProvider>
                    </TssCacheProvider>
                </CacheProvider>
            </LocalizationProvider>
        </ErrorBoundary>
        );
}

I also have responsiveFontSizes() wrapper around the theme.

Problem is that when I explicitly set a fontSize for a component in makeStyles(), the responsiveFontSizes are overriding the fontSize. When I inspect the DOM I can see that the generated classes for MUI components are correctly prefixed with mui but the classes generated by makeStyles() from tss-react are missing the prefix, thus not taking priority over other styles.

The installed versions are the following:

        "@emotion/react": "11.11.3",
        "@emotion/styled": "11.11.0",
        "react": "~17.0.0",
        "react-dom": "~17.0.0",
        "tss-react": "4.9.13",
        "@mui/styles": "5.15.2",

The node version used is 12.22.12.

Any ideas why this happens and how to resolve it ?

[garronej]

Hello @ZGAlexa,

The problem is that the component is not setting css classNames at all.

I don't know what you mean by that.

When I inspect the DOM I can see that the generated classes for MUI components are correctly prefixed with mui but the classes generated by makeStyles() from tss-react are missing the prefix

Which prefix? The tss prefix?

I can fix your problem if you can provide a minimal reproduction repo with a clear explaination of what isn't working as you expect.

If there's a bug, Il'll fix it, if this is a configuration issue on your end I'll let you know.