[Collapse] Add slotProps Support to Collapse for Customizing Inner Elements

[NotYoojun]

Summary

The Collapse] component in Material UI currently does not support passing custom props or styles to its inner wrapper elements (MuiCollapse-wrapper, MuiCollapse-wrapperInner). This limitation makes it difficult to apply ARIA roles, custom classes, or styles for accessibility and design consistency.

I propose adding a slotProps API to Collapse, similar to other Material UI components, allowing developers to pass props directly to these internal elements.

Examples

Many other MUI components (e.g., Popover, Menu, Dialog) support slotProps for customizing internal structure.

<Collapse in={open} timeout="auto" slotProps=
    {{
        root: 
        {
            // Custom ARIA role for accessibility
            role: "presentation",
            // Custom class for styling
            className: "custom-collapse-root",
            // Custom data attribute
            "data-testid": "collapse-root",
        },
        wrapper: 
        {
            role: "presentation",
            className: "custom-collapse-wrapper",
            sx: { marginLeft: 2  /* Example custom style */ },
        },
        wrapperInner: 
        {
            role: "group",
            className: "custom-collapse-wrapper-inner",
            component: "ul", // Change the component type
            sx: { listStyle: "none", padding: 0, margin: 0  /* Example custom style */ },
        },
    }}>
    <Box component="li" role="treeitem" sx={{ p: 2 }}>
        Child Item 1
    </Box>
    <Box component="li" role="treeitem" sx={{ p: 2 }}>
        Child Item 2
    </Box>
</Collapse>

Motivation

In complex applications, especially those requiring strict accessibility compliance (e.g., ARIA roles for tree views), developers need fine-grained control over the DOM structure.

Currently, the inability to add props to Collapse's inner elements leads to invalid HTML (e.g., <ul> → <div> → <div> → <li>) and prevents adding role="presentation" or custom classes for styling and accessibility.
Introducing slotProps would align Collapse with other MUI components, improve accessibility, and enable more flexible customization for real-world use cases.

If this is implemented, it will also benefit the MUI X TreeView component, which uses Collapse internally. This could enable improved accessibility setups in MUI X and related components.

Search keywords: Collapse, slotProps, customization, accessibility, props, slot