Comments (13)
I now added cx instead of cn (from classnames) to my typography component (which uses MUI).
Now most (not all) of the styling is applied correct.
Yes, that's it. cx
is not just a utility like cn
is, it is reordering/merging styles in the header based on the order it receives classes.
Should I see different prefixes?
I don't know! You make me play guessing game by not showing me any of your code. I could have told you right away that cn
was the problem if you had shown me what you wrote.
Closing now, I won't reopen unless you provide me with a repo or a playground. I am here for you but please respect my time.
from tss-react.
Hi @R-154,
There is something wrong with your configuration, maybe it's something stupid like you haven't saved or something.
Like it's documented in the jss-to-tss migration guide and here, mui and tss can't use the same emotion cache. You have to use the <CacheProvider />
.
I see it's not the case in your configuration since on your screenshoot both classes have the tss
prefix.
If you submit the code source or a sandbox I can point to you what's wrong.
from tss-react.
Thx @garronej for your feedback.
Indeed all classes have the .tss preffix which is not ok i see.
I already added the createCache to the themeProvider. See the code below:
import type { Theme } from '@mui/material/styles';
import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import './styles.css';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
export const muiCache = createCache({
key: 'mui',
prepend: true,
});
const ThemeProvider: React.FC<{ theme: Theme }> = ({ children, theme }) => {
return (
<CacheProvider value={muiCache}>
<MuiThemeProvider theme={theme}>
<CssBaseline />
{children}
</MuiThemeProvider>
</CacheProvider>
);
};
export default ThemeProvider;
from tss-react.
I can't puzzle how mui manages tout pick up the tss cache...
Your provider looks fine...
Are you sure you don't have missmatchning version on "@emotion/*"?
If you can link me the repo or set a playground up for me I will tell you what's wrong.
from tss-react.
I have these versions installed:
- "tss-react": "^3.2.4",
- "@emotion/cache": "^11.7.1"
- "@emotion/react": "^11.7.1",
- "@emotion/styled": "^11.6.0",
from tss-react.
Please run:
npm ls @emotion/cache
and npm ls tss-react
from tss-react.
from tss-react.
Are you problems happening in storybook?
from tss-react.
Not only in storybook. Also in the application.
from tss-react.
from tss-react.
Not only in storybook. Also in the application.
Ok then, everything should work.
Link me your repo or reproduce in a playgroud like codeSandbox or stackblitz.
from tss-react.
Now that I think of it, it's @emotion/react
that should be confirmed deduped.
Please run:
from tss-react.
I now added cx instead of cn (from classnames) to my typography component (which uses MUI).
Now most (not all) of the styling is applied correct.
should i see different prefixes?
from tss-react.
Related Issues (20)
- Missing classname escaping HOT 1
- FOUC when using NextAppDirEmotionCacheProvider with prepend true HOT 8
- How to opt out of RTL transformation? HOT 3
- <GlobalStyles /> don't work properly with next.js app folder HOT 7
- cannot Import multiple makeStyles HOT 1
- Use eslint rule to detect unused classed with imports HOT 2
- React 16.10.0 failed to install @ mui/material HOT 1
- How to use with css and styled apis. HOT 1
- yarn install with pnp mode complains about missing dependency @mui/material HOT 3
- NextJS/MUI/TSS - Cannot read properties of undefined (reading 'classes') HOT 3
- Hard reload after any file change HOT 2
- TssCacheProvider is not working when used with emotion cache and mui 5 HOT 6
- Using with Shadowed Web Components HOT 3
- Next.js: Applying augmentDocumentWithEmotionCache to document breaks AMP pages HOT 2
- The right way typing props when using withStyles HOT 3
- Invalid type for withStyles HOT 4
- Mantine integration
- Using `@import` rule within `<GlobalStyles />` component HOT 8
- `GlobalStyles` create multiple <style data-emotion="css-global">...<style> HOT 1
- Cannot read properties of undefined (reading 'length') in useGuaranteedMemo HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tss-react.