ExpansionPanel API

The API documentation of the ExpansionPanel React component. Learn more about the properties and the CSS customization points.

import ExpansionPanel from '@material-ui/core/ExpansionPanel';

Props

Name	Type	Default	Description
children *	node		The content of the expansion panel.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
defaultExpanded	bool	false	If `true`, expands the panel by default.
disabled	bool	false	If `true`, the panel will be displayed in a disabled state.
expanded	bool		If `true`, expands the panel, otherwise collapse it. Setting this prop enables control over the panel.
onChange	func		Callback fired when the expand/collapse state is changed. Signature: `function(event: object, expanded: boolean) => void` event: The event source of the callback expanded: The `expanded` state of the panel
TransitionComponent	elementType	Collapse	The component used for the collapse effect.
TransitionProps	object		Properties applied to the `Transition` element.

The ref is forwarded to the root element.

Any other properties supplied will be provided to the root element (Paper).

You can override all the class names injected by Material-UI thanks to the classes property. This property accepts the following keys:

Name	Description
root	Styles applied to the root element.
rounded	Styles applied to the root element if `square={false}`.
expanded	Styles applied to the root element if `expanded={true}`.
disabled	Styles applied to the root element if `disabled={true}`.

If using the overrides key of the theme, you need to use the following style sheet name: MuiExpansionPanel.

The properties of the Paper component are also available. You can take advantage of this behavior to target nested components.

The component can cause issues in StrictMode.