ListItem API
导入
import ListItem from '@mui/material/ListItem';
// 或
import { ListItem } from '@mui/material';Uses an additional container component if ListItemSecondaryAction is the last child.
组件名称
在主题中，名称“MuiListItem”可用于提供默认属性（props），或者样式覆盖属性
原生（Native） 组件的属性也是可用的。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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 | { root?: 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 | 如果被设置为 true，那么该组件将会被禁用。 |
| disableGutters | bool | false | 如果设置为 true，则左右内边距（padding）会被移除。 |
| disablePadding | bool | false | 如果设置为 true，则所有内边距（padding）会被移除。 |
| divider | bool | false | 如果 true, 一个 1px 灯光边框添加到列表项底部。 |
| secondaryAction | node | 在列表项末端显示的元素。 | |
| selected | bool | false | Use to apply selected styling. |
| slotProps | { root?: object } | {} | |
| slots | { root?: elementType } | {} | |
| sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
ref 则会被传递到根元素中。CSS
| 规则名称 | 全局类名 | 描述 |
|---|---|---|
| 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 内部的`组件`元素 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}. |
| padding | .MuiListItem-padding | Styles applied to the root element unless disablePadding={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}. |
您可以使用组件自定义选项对组件进行个性化：
- 具备 全局类名.
- 在自定义主体中，设定一个规则名称作为组件的
styleOverrides属性的一部分。