[material-ui] Custom Theme Not Working with v6 and Pigment CSS in Next.js

[wh5938316]

✅ Solution

Update Pigment CSS plugin to at least 0.0.21:

Next.js

"@pigment-css/nextjs-plugin": "0.0.21"

Vite

"@pigment-css/vite-plugin": "0.0.21"

Steps to reproduce

next.config.mjs

export default withPigment(nextConfig, {
  theme: createTheme({
    cssVariables: true,
    colorSchemes: { light: true, dark: true },
    typography: {
      fontFamily: 'var(--font-roboto)',
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            background: '#000 !important',
          },
        },
      }
    }
  }),
  transformLibraries: ['@mui/material'],
});

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

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: pigment-css, next.js, v6

[arklanq-patronus]

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.

[DiegoAndai]

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]

@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

[siriwatknp]

@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.

[siriwatknp]

@DiegoAndai The root cause is that the component is still using Emotion. Need to release mui/pigment-css#216

[siriwatknp]

Please update either @pigment-css/nextjs-plugin or @pigment-css/vite-plugin to v0.0.21

[wh5938316]

@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/[email protected]_@[email protected]_@[email protected][email protected]_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/[email protected]_@[email protected]_@[email protected][email protected]_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/@[email protected]_@[email protected][email protected]_@[email protected]_@opentel_77kgm5vzvu7lyjerplkiaoekja/node_modules/@pigment-css/nextjs-plugin/loader.js!/Users/hao/workspace/package-name/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_@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.

[arklanq-patronus]

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!

#43517

[DiegoAndai]

@wh5938316 please open a new issue regarding #43501 (comment) so it's easier to track 😊

I'm closing this one as the original issue was fixed in mui/pigment-css#216

[github-actions]

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!