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 ?
The problem is that the component
<TssCacheProvider>is not setting css classNames at all. My structure is the following taken from the documentation:I also have responsiveFontSizes() wrapper around the
theme.Problem is that when I explicitly set a
fontSizefor a component in makeStyles(), theresponsiveFontSizesare overriding thefontSize. When I inspect the DOM I can see that the generated classes for MUI components are correctly prefixed withmuibut the classes generated bymakeStyles()fromtss-reactare missing the prefix, thus not taking priority over other styles.The installed versions are the following:
The node version used is
12.22.12.Any ideas why this happens and how to resolve it ?