[docs] Pigment migration docs doesn't mention spacing, breakpoints etc are no longer callable

[abriginets]

Related page

https://mui.com/material-ui/migration/migrating-to-pigment-css/

Kind of issue

Missing information

Issue description

I just upgraded to MUI v6 and started migrating to pigment, followed all the steps in the docs and now there are errors when I'm trying to start dev server

import { Typography } from '@mui/material';
import { styled } from '@mui/material-pigment-css';

export const SectionHeader = styled(Typography)(({ theme }) => ({
  textTransform: 'uppercase',
  fontWeight: 800,
  display: 'inline-flex',
  width: '100%',
  justifyContent: 'center',
  [theme.breakpoints.down('md')]: { // <---- Cannot read properties of undefined (reading 'down')
    padding: 0,
  },
})) as typeof Typography;

import { styled } from '@mui/material-pigment-css';
import Box from '@mui/material-pigment-css/Box';

export const AllSpecialOffersBox = styled(Box)(({ theme }) => ({
  marginTop: theme.spacing(8), // <---- theme.spacing is not a function
  display: 'flex',
  justifyContent: 'center',
}));

Although on mui/pigment-css#creating-styles it does provide and example of how spacing should be used with pigment, i.e.

const title = css(({ theme }) => ({
  color: theme.colors.primary,
  fontSize: theme.spacing.unit * 4, // <---- spacing is now a property, not a function
  fontFamily: theme.typography.fontFamily,
}));

Should this be a part of migration docs and marked as breaking change? As for breakpoints, I couldn't find mentioning it anywhere except for mui/pigment-css#203. Response suggests we need to set breakpoints explicitly now. Not sure if that's a bug or an undocumented breaking change, we were using default MUI breakpoints since day one.

Context

Migrating to pigment-css in NextJS + MUIv6

Search keywords: pigment

[brijeshb42]

@abriginets Could you also share your next.config file ?

[abriginets]

Sure, here it is

next.config.mjs

import bundleAnalyzerPlugin from '@next/bundle-analyzer';
import { extendTheme, withPigment } from '@pigment-css/nextjs-plugin';
import { withSentryConfig } from '@sentry/nextjs';
import createNextIntlPlugin from 'next-intl/plugin';
import pwaPlugin from 'next-pwa';

const { BACKEND_URL } = process.env;

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  compress: false,
  output: 'standalone',
  images: {
    domains: ['mpics.avs.io', 'pics.avs.io', 'yasen.aviasales.ru'],
  },
  experimental: {
    nextScriptWorkers: true,
    proxyTimeout: 60_000,
  },
  poweredByHeader: false,
  swcMinify: true,
  reactStrictMode: true,
  async rewrites() {
    return {
      beforeFiles: [
        {
          source: '/api/search/:path*',
          destination: `${BACKEND_URL}/api/search/:path*`,
        },
      ],
      fallback: [
        {
          source: '/api/:path*',
          destination: `${BACKEND_URL}/api/:path*`,
        },
      ],
    };
  },
};

const withPWA = pwaPlugin({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
});
const withBundleAnalyzer = bundleAnalyzerPlugin({
  enabled: process.env.ANALYZE === 'true',
});

const withNextIntl = createNextIntlPlugin();

/**
 * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
 */
const pigmentConfig = {
  transformLibraries: ['@mui/material'],
  theme: extendTheme({
    colorSchemes: {
      dark: {
        palette: {
          error: {
            main: '#ff1744',
          },
          contrastThreshold: 3,
          tonalOffset: 0.2,
        },
      },
      light: {
        palette: {
          error: {
            main: '#ff1744',
          },
          contrastThreshold: 3,
          tonalOffset: 0.2,
        },
      },
    },
    components: {
      MuiInputLabel: {
        styleOverrides: {
          root: {
            fontWeight: 500,
          },
        },
      },
      MuiTooltip: {
        styleOverrides: {
          tooltip: {
            fontSize: '13px',
          },
        },
      },
    },
  }),
};

export default withPigment(
  withNextIntl(
    withPWA(
      withBundleAnalyzer(
        withSentryConfig(
          nextConfig,
          /** @type {import('@sentry/nextjs').SentryWebpackPluginOptions} */
          {
            authToken: process.env.SENTRY_AUTH_TOKEN,
            org: process.env.SENTRY_ORG,
            project: process.env.SENTRY_PROJECT,
            widenClientFileUpload: true,
            hideSourceMaps: true,
            disableLogger: process.env.NODE_ENV === 'production',
            finalize: false,
          },
          {
            hideSourceMaps: true,
          },
        ),
      ),
    ),
  ),
  pigmentConfig,
);

[samuelgoldenbaum]

I think the issue here is related to extendTheme in next.config which is referenced in the migration docs

import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';
/** @type {import('next').NextConfig} */
const nextConfig = {};

const pigmentConfig = {
    transformLibraries: ['@mui/material'],
    theme: extendTheme({ // <---- issue
        cssVariables: true,
        colorSchemes: {
            light: {
                colors: {
                    background: "#fff",
                    foreground: "#000",
                },
            },
            dark: {
                colors: {
                    background: "#000",
                    foreground: "#fff",
                },
            },
        }
    }),
};

export default withPigment(nextConfig, pigmentConfig);

using createTheme() retains breakpoints and spacing:

import { withPigment } from '@pigment-css/nextjs-plugin';
import { createTheme } from "@mui/material";
/** @type {import('next').NextConfig} */
const nextConfig = {};

const pigmentConfig = {
    transformLibraries: ['@mui/material'],
    theme: createTheme({
        cssVariables: true,
        colorSchemes: {
            light: {
                colors: {
                    background: "#fff",
                    foreground: "#000",
                },
            },
            dark: {
                colors: {
                    background: "#000",
                    foreground: "#fff",
                },
            },
        }
    }),
};

export default withPigment(nextConfig, pigmentConfig);

However, there is still FOUC flickering when specifying dark mode, but that's another issue...

[DiegoAndai]

Thanks, @abriginets, for the report and @samuelgoldenbaum, for replying.

The guide has already been fixed to replace extendTheme with createTheme: https://mui.com/material-ui/migration/migrating-to-pigment-css/#removing-owner-state

@abriginets can you confirm if the following change on your config file solves your issue:

 import bundleAnalyzerPlugin from '@next/bundle-analyzer';
-import { extendTheme, withPigment } from '@pigment-css/nextjs-plugin';
+import {withPigment } from '@pigment-css/nextjs-plugin';
+import { createTheme } from '@mui/material/styles';
 import { withSentryConfig } from '@sentry/nextjs';
 // ...

 // ...
 const pigmentConfig = {
   transformLibraries: ['@mui/material'],
- theme: extendTheme({
+ theme: createTheme({ 
     colorSchemes: { 
 // ...

[abriginets]

@DiegoAndai yep, that does fix the issue with spacing and breakpoints, I can confirm there are no such errors now in the terminal.

[DiegoAndai]

Thanks @abriginets, I'm closing the issue as it has been fixed and the migration guide updated. If you have a similar issue, please open a new one with a repro.

[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 @abriginets! 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!

[bmakan]

I encountered the follwoing:

import { useTheme } from '@mui/material-pigment-css';

const theme = useTheme();
theme.spacing // undefined

import { useTheme } from '@mui/material/styles';

const theme = useTheme();
theme.spacing // function

Vite Config:

import process from 'process';

import { createTheme } from '@mui/material';
import { PigmentOptions, pigment } from '@pigment-css/vite-plugin';
import legacy from '@vitejs/plugin-legacy';
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import { defineConfig } from 'vite';

import { version } from './package.json';

const pigmentConfig: PigmentOptions = {
    theme: createTheme({ cssVariables: true }),
    transformLibraries: ['@mui/material'],
};

export default defineConfig(() => ({
    plugins: [
        pigment(pigmentConfig),
        react({ jsxImportSource: '@emotion/react' }),
    ],
}));

Tried to set up a minimal Code Sandbox, but it's crashing when I import the useTheme. :/

[DiegoAndai]

Hey @bmakan, may I ask you to open a separate issue about this?