theme.transitions is undefined in MUI6

[rwb196884]

Steps to reproduce

I've got this code that used to put an icon on a button that rotates when clicked.
It works in MUI5 but not in MUI6.
What do I need to do?

const ExpandMore = styled((props: ExpandMoreProps) => {
  const { expand, ...other } = props;
  return <IconButton {...other} />;
})(({ theme, expand }) => ({
  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
  marginLeft: 'auto',
  transition: theme.transitions.create('transform', {
    duration: theme.transitions.duration.shortest,
  }),
}));

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: transitions

[mnajdova]

I tried reproducing this, but I wasn't able to, it works as expected: https://codesandbox.io/p/sandbox/compassionate-water-tky4n5?from-embed=

Can you please share a CodeSandbox with the reproduction? Are you using Emotion or Pigment CSS? How does your next.js/vite config looks like if you are using Pigment CSS? More context would be great!

[effektsvk]

Hello @mnajdova, I managed to reproduce it. It happens when using Pigment CSS (without Emotion). At first I thought it was because I wasn't using ThemeProvider but it is used in the repro and the issue still occurs.

Here is the repro sandbox but try to download and run it locally, when running in CodeSandbox it just show the "The above error occurred in the <ForwardRef(Dialog2)> component:" error, but not the error itself. When running locally, you can see it in the DevTools console.
https://codesandbox.io/p/sandbox/peaceful-haslett-kk85ym-ng3h69

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[mnajdova]

Here is a working example: https://codesandbox.io/p/devbox/mui-theme-transitions-repro-forked-tqsdgc?file=%2Fvite.config.ts%3A18%2C1

The issue was that you did not specify that the theme is CSS variables based:

createTheme({ cssVariables: true })

Pigment CSS will not working without this :) On this note, we should likely update the docs here: https://mui.com/material-ui/migration/migrating-to-pigment-css/#configuring-the-theme to include this information. Would you like to open a PR for this? :)

[effektsvk]

I'd gladly do it in case @rwb196884 is not interested. :)

[mnajdova]

I'd gladly do it in case @rwb196884 is not interested. :)

Sure, go ahead if you want to do it :)

[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 @rwb196884! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!