ListItem API
API documentation for the React ListItem component. Learn about the available props, and the CSS API.
Import
import ListItem from '@material-ui/core/ListItem';
// or
import { ListItem } from '@material-ui/core';Uses an additional container component if ListItemSecondaryAction is the last child.
Component name
The nameMuiListItem can be used when providing default props or style overrides in the theme.Props
| Name | Type | Default | Description |
|---|---|---|---|
| alignItems | 'center' | 'flex-start' | 'center' | Defines the align-items style property. |
| autoFocus | bool | false | If true, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true. |
| button | bool | false | If true, the list item is a button (using ButtonBase). Props intended for ButtonBase can then be applied to ListItem. |
| children | node | The content of the component if a ListItemSecondaryAction is used it must be the last child. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
| components | { Root?: elementType } | {} | The components used for each slot inside the InputBase. Either a string to use a HTML element or a component. |
| componentsProps | object | {} | The props used for each slot inside the Input. |
| ContainerComponent | element type | 'li' | The container component used when a ListItemSecondaryAction is the last child.⚠️ Needs to be able to hold a ref. |
| ContainerProps | object | {} | Props applied to the container component if used. |
| dense | bool | false | If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component. |
| disabled | bool | false | If true, the component is disabled. |
| disableGutters | bool | false | If true, the left and right padding is removed. |
| divider | bool | false | If true, a 1px light border is added to the bottom of the list item. |
| selected | bool | false | Use to apply selected styling. |
| sx | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
The
ref is forwarded to the root element.Any other props supplied will be provided to the root element (native element).
CSS
| Rule name | Global class | Description |
|---|---|---|
| root | .MuiListItem-root | Styles applied to the (normally root) `component` element. May be wrapped by a `container`. |
| container | .MuiListItem-container | Styles applied to the container element if children includes ListItemSecondaryAction. |
| focusVisible | .Mui-focusVisible | Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if button={true}. |
| dense | .MuiListItem-dense | Styles applied to the component element if dense. |
| alignItemsFlexStart | .MuiListItem-alignItemsFlexStart | Styles applied to the component element if alignItems="flex-start". |
| disabled | .Mui-disabled | Pseudo-class applied to the inner `component` element if disabled={true}. |
| divider | .MuiListItem-divider | Styles applied to the inner `component` element if divider={true}. |
| gutters | .MuiListItem-gutters | Styles applied to the inner `component` element unless disableGutters={true}. |
| button | .MuiListItem-button | Styles applied to the inner `component` element if button={true}. |
| secondaryAction | .MuiListItem-secondaryAction | Styles applied to the component element if children includes ListItemSecondaryAction. |
| selected | .Mui-selected | Pseudo-class applied to the root element if selected={true}. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.