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