[Accordion] TransitionProps isn't merged with theme defaultProps

[ianschmitz]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/twilight-sun-nn4m8m?file=/src/App.tsx

Steps:

1. Expand accordion 1 and observe console.log message
2. Expand accordion 2 and observe there is no console.log

Current behavior 😯

TransitionProps objects aren't merged with defaultProps provided by the theme.

Expected behavior 🤔

TransitionProps objects are merged with defaultProps provided by the theme.

Context 🔦

I'm trying to provide transition defaults for the Accordion such as setting unmountOnExit or mountOnEnter globally, while allowing component level props such as timeout etc to be provided as well.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.0
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Edge: Not Found
    Firefox: 106.0.2
    Safari: 16.1
  npmPackages:
    @emotion/react: ^11.10.0 => 11.10.0 
    @emotion/styled: ^11.10.0 => 11.10.0 
    @mui/base:  5.0.0-alpha.100 
    @mui/core-downloads-tracker:  5.10.8 
    @mui/icons-material: ^5.10.6 => 5.10.6 
    @mui/material: ^5.10.8 => 5.10.8 
    @mui/private-theming:  5.10.6 
    @mui/styled-engine:  5.10.8 
    @mui/system:  5.10.8 
    @mui/types:  7.2.0 
    @mui/utils:  5.10.6 
    @mui/x-data-grid:  5.17.5 
    @mui/x-data-grid-pro: ^5.17.5 => 5.17.5 
    @mui/x-date-pickers:  5.0.3 
    @mui/x-date-pickers-pro: ^5.0.3 => 5.0.3 
    @mui/x-license-pro:  5.17.0 
    @types/react: ^18.0.17 => 18.0.17 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ~4.8.4 => 4.8.4 

[flaviendelangle]

The topic is similar to #34214

[ianschmitz]

Looks like you linked back to here @flaviendelangle

[flaviendelangle]

Indeed, updated 👍

[oliviertassinari]

I'm not sure to understand how the "expected behavior" is correct. In the example,

import * as React from "react";
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  createTheme,
  ThemeProvider,
  Typography
} from "@mui/material";

const theme = createTheme({
  components: {
    MuiAccordion: {
      defaultProps: {
        TransitionProps: {
          // Console log to demonstrate the bug
          onEnter: (el) => console.log("accordion el has expanded", el)
        }
      }
    }
  }
});

/**
 * how you used the components
 */
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Accordion
        // Opening this accordion will console log as expected
        TransitionProps={undefined}
      >
        <AccordionSummary aria-controls="panel1a-content" id="panel1a-header">
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion
        // BUG: There will be no console log when opening this accordion.
        TransitionProps={{}}
      >

If I set TransitionProps={{}}, I would expect TransitionProps to be {}, I'm overriding the default prop, per https://mui.com/material-ui/customization/theme-components/#theme-default-props, so we could expect no console log.

For the same reason why when overriding Fade's timeout prop https://mui.com/material-ui/api/fade/, it erases the default prop.