[Select] - not able to reassign transition component using theme

[vkoshcheev]

Steps to reproduce

1. Set up <Select> component and use theme with transition component override, e.g.:

const theme = createTheme({
  components: {
    MuiSelect: {
      defaultProps: {
        MenuProps: {
          slots: {
            transition: Fade,
          },
        },
      },
    },
  },
});

2. Open select menu.

Current behavior

Default transition component is used (Grow).

Expected behavior

Transition component is replaced with Fade.

Context

The only working way to replace transition component right now seems to be to use MenuProps.TransitionComponent, on each particular Select, and TransitionComponent is marked as deprecated.

<Select
  ...
  MenuProps={{
    TransitionComponent: Fade,
  }}
>

Breaking change apparently occurred in 7.3.0 or after, worked fine in 7.2.0.

Your environment

npx @mui/envinfo

Search keywords: Select

[ZeeshanTamboli]

@vkoshcheev I am not able to reproduce your issue. It is working correctly in the latest Material UI version: https://stackblitz.com/edit/github-uafepfk8?file=src%2FApp.tsx. Please provide a StackBlitz reproducing the issue.

[vkoshcheev]

This was a mistake on my part, sort of.

I did not realize that my IDE auto-imports ThemeProvider from @emotion/react, instead of @mui/material/styles.

Interestingly, MUI 7.2.0 had no issues with it, but I guess starting from 7.3.0 something was changed and theme created via createTheme from @emotion/react is no longer able to properly convey all provided properties.

Not sure if createTheme from @emotion/react and @mui/material/styles are supposed to have same outputs or not, but my issue is resolved either way, my apologies.

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