Slide component throws error in Pigment project

[ptpittman]

Steps to reproduce

Link to live example: https://github.com/ptpittman/github-ejtbjs/tree/main

Steps:

1. Create a NextJS 14 app dir project using MUI and Pigment, as per docs
2. Attempt to use Slide component with default props and no ThemeProvider set.
3. Browse to page that uses component, using Safari, Chrome, or any other browser.

Current behavior

I’m migrating a small project into MUI 6/Pigment as a test. I’ve moved all the theme setup over into next.config, DefaultPropsProvider etc, and all is functioning well enough to keep going with it. I have removed ThemeProvider as the docs seem to suggest, which by extension I’d imagine breaks useTheme(). I understand this as a necessity.

However, I use the MUI Slide component on a client nav component, in this sort of way:

      <Slide
        direction="up"
        in={open}
      ><Box></Box></Slide>

This throws:

TypeError: undefined is not an object (evaluating 'theme.transitions.easing’)

I’ve attempted to define easing, as follows, for example:

      <Slide
        direction="up"
        in={open}
        easing={{
          enter: "cubic-bezier(0,1.5,1,1.5)",
          exit: "cubic-bezier(0,1.5,1,1.5)",
        }}
      ><Box></Box></Slide>

But this does not alleviate the error. Looking at the source of @mui/material/Slide/Slide.js, I see that the defaults have an expectation on useTheme returning transitions, as follows:

const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
  const theme = useTheme();
  const defaultEasing = {
    enter: theme.transitions.easing.easeOut,
    exit: theme.transitions.easing.sharp
  };
  const defaultTimeout = {
    enter: theme.transitions.duration.enteringScreen,
    exit: theme.transitions.duration.leavingScreen
  };
...

I’d imagine this might be the same for other related elements like Fade, but haven’t checked. Is there anyway around this other than restoring ThemeProvider and running a separate client side theme file outside of next.config?

Expected behavior

Slide element should render using default props in a Pigment context.

Context

Render Slide component without error on a client component, using Pigment CSS and MUI 6.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.5
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 9.9.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.138
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/icons-material: ^6.1.0 => 6.1.0 
    @mui/lab: 6.0.0-beta.9 => 6.0.0-beta.9 
    @mui/material: ^6.1.0 => 6.1.0 
    @mui/material-nextjs: ^6.1.0 => 6.1.0 
    @mui/material-pigment-css: ^6.1.0 => 6.1.0 
    @pigment-css/nextjs-plugin: ^0.0.22 => 0.0.22 
    react: ^18 => 18.2.0 
    react-dom: ^18 => 18.2.0 
    styled-components: 6 => 6.1.8 

Search keywords: Slide, Pigment

[siriwatknp]

@ptpittman The workaround is to enable CSS variables:

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

import { createTheme } from '@mui/material';

const colors = {
  background: '#343434',
  text: '#000000',
};

const nextConfig = {};

/**
 * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
 */
const pigmentConfig = {
  transformLibraries: ['@mui/material'],
  theme: createTheme({
+    cssVariables: true,
    palette: {
      primary: {
        main: colors.text,
      },
      background: {
        default: colors.background,
      },
      text: {
        primary: '#FFFFFF',
        inverse: '#000000',
      },
    },
  }),
};

export default withPigment(nextConfig, pigmentConfig);

[siriwatknp]

I'd consider this as a bug. I don't think CSS variables is required to use Pigment CSS.

[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

@ptpittman How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[brijeshb42]

Have you tried this recently ? I cloned your repo and tried to run it. I did not run into any issues.
useTheme will still work depending on how you are importing it. It should be imported from @mui/material-pigment-css/useTheme to get the same theme object as declared in the next.config.