Closed wh5938316 closed 1 week ago
It doesn't work without pigment-css
as well.
My case:
createTheme({
// ...
components: {
MuiTypography: {
defaultProps: {
variantMapping: {
title: "h1",
title_2: "h2",
title_3: "h3",
bodyLarge: "p",
bodySmall: "p",
bodyCompact: "p",
bodyMedium: "p",
bodyRegular: "p",
bodySemiBold: "p",
link: "a",
preTitleSemiBold: "p",
preTitleBold: "p",
},
},
},
// ...
}
// ...
});
<Typography variant="bodyRegular">Loading...</Typography>
Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used
See more info here: https://nextjs.org/docs/messages/react-hydration-error
+ <p
+ className="MuiTypography-root MuiTypography-bodyRegular mui-183ynif-MuiTypography-root"
+ style={{}}
+ >
- <span className="MuiTypography-root MuiTypography-bodyRegular mui-183ynif-MuiTypography-root">
MUI is rendering <Typography>
as:
<span>
on the server<p>
on the client... which results from not respecting variantMapping
from the theme on the client.
PS: I'm not 100% sure if this is the same issue or a different but related one.
Hey @wh5938316, thanks for the report! The first thing that comes to mind is asking if you added this line to your app/layout
file:
+import '@mui/material-pigment-css/styles.css';
If that doesn't fix it, could you provide a reproduction? This will help check if the configuration is correct. It would be perfect if you could share your project in a GitHub repo. Thank you!
@arklanq-patronus, this seems like a different issue. May I ask you to create a separate one so it's easier to track? Thanks!
@DiegoAndai I’ve created a reproduction of an issue I’m encountering in my project and uploaded it to CodeSandbox. The button in the example is expected to be black, but it isn’t. I’m not sure if this is a mistake in how I’m using MUI or if it’s a bug in the library.
Here is the link to the reproduction: CodeSandbox Link
@arklanq-patronus Please provide the full page that you are rendering. It could be that the Typography
is wrapped in another Typography (<p>
inside <p>
)?
I am quite sure that it's not related to Pigment CSS.
@DiegoAndai The root cause is that the component is still using Emotion. Need to release https://github.com/mui/pigment-css/pull/216
Please update either @pigment-css/nextjs-plugin
or @pigment-css/vite-plugin
to v0.0.21
@DiegoAndai @siriwatknp Thank you for all your hard work in maintaining this project! @pigment-css/nextjs-plugin 0.0.21 resolved the initial issue, but during development, I encountered a Webpack warning. While it doesn’t currently affect usage, I wanted to make sure the maintainer team is aware of it. The warning message is as follows:
app:dev: <w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/hao/workspace/package-name/node_modules/.pnpm/next@14.2.6_@babel+core@7.25.2_@opentelemetry+api@1.9.0_babel-plugin-macros@3.1.0_react-dom@1_kqfc5ldlayrdqiljyv3zaya4ia/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[17].oneOf[12].use[2]!/Users/hao/workspace/package-name/node_modules/.pnpm/next@14.2.6_@babel+core@7.25.2_@opentelemetry+api@1.9.0_babel-plugin-macros@3.1.0_react-dom@1_kqfc5ldlayrdqiljyv3zaya4ia/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[17].oneOf[12].use[3]!/Users/hao/workspace/package-name/node_modules/.pnpm/@pigment-css+nextjs-plugin@0.0.21_@types+react@18.3.4_next@14.2.6_@babel+core@7.25.2_@opentel_77kgm5vzvu7lyjerplkiaoekja/node_modules/@pigment-css/nextjs-plugin/loader.js!/Users/hao/workspace/package-name/node_modules/.pnpm/@pigment-css+nextjs-plugin@0.0.21_@types+react@18.3.4_next@14.2.6_@babel+core@7.25.2_@opentel_77kgm5vzvu7lyjerplkiaoekja/node_modules/@pigment-css/nextjs-plugin/zero-virtual.css?%7B%22filename%22%3A%22ButtonBase.js%22%2C%22source%22%3A%22.b10xo0sw%7Bdisplay%3Ainline-flex%3Balign-items%3Acenter%3Bjustify-content%3Acenter%3Bposition%3Arelative%3Bbox-sizing%3Aborder-box%3B-webkit-tap-highlight-color%3Atransparent%3Bbackground-color%3Atransparent%3Boutline%3A0%3Bborder%3A0%3Bmargin%3A0%3Bborder-radius%3A0%3Bpadding%3A0%3Bcursor%3Apointer%3Buser-select%3Anone%3Bvertical-align%3Amiddle%3B-moz-appearance%3Anone%3B-webkit-appearance%3Anone%3Btext-decoration%3Anone%3Bcolor%3Ainherit%3B%7D.b10xo0sw%3A%3A-moz-focus-inner%7Bborder-style%3Anone%3B%7D.b10xo0sw.Mui-disabled%7Bpointer-events%3Anone%3Bcursor%3Adefault%3B%7D%40media%20print%7B.b10xo0sw%7Bcolor-adjust%3Aexact%3B%7D%7D%5Cn.b10xo0sw-1%7Bbox-sizing%3Aborder-box%3Btransition%3Aall%20100ms%20ease-in%3B%7D.b10xo0sw-1%3Afocus-visible%7Boutline%3A3px%20solid%20hsla(210%2C%2098%25%2C%2048%25%2C%200.5)%3Boutline-offset%3A2px%3B%7D%5Cn%22%7D': No serializer registered for Warning
app:dev: <w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning
Please let me know if you would like me to open a separate issue for this.
Hey @wh5938316, thanks for the report! The first thing that comes to mind is asking if you added this line to your
app/layout
file:+import '@mui/material-pigment-css/styles.css';
If that doesn't fix it, could you provide a reproduction? This will help check if the configuration is correct. It would be perfect if you could share your project in a GitHub repo. Thank you!
@arklanq-patronus, this seems like a different issue. May I ask you to create a separate one so it's easier to track? Thanks!
@wh5938316 please open a new issue regarding https://github.com/mui/material-ui/issues/43501#issuecomment-2316887388 so it's easier to track 😊
I'm closing this one as the original issue was fixed in https://github.com/mui/pigment-css/pull/216
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
[!NOTE] We value your feedback @wh5938316! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!
✅ Solution
Update Pigment CSS plugin to at least
0.0.21
:Next.js
Vite
Steps to reproduce
next.config.mjs
The custom theme is not being applied as expected. Components do not reflect the customized theme settings.
Current behavior
No response
Expected behavior
No response
Context
No response
Your environment
``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```npx @mui/envinfo
Search keywords: pigment-css, next.js, v6