# 列表

- 页面: https://jiguang132.com/zh/resources/material-ui/docs/lists
- 资源: Material UI (https://jiguang132.com/zh/resources/material-ui.md)
- 全部指南: https://jiguang132.com/zh/resources/material-ui/docs.md

组织文字、头像、图标、选择状态和嵌套内容。

本指南覆盖默认 Emotion 环境的 Material UI Core；扩展包与额外示例按清单单独标注。

## 使用场景与业务边界

选择和嵌套状态由宿主负责；List 不会自动虚拟化，也不自动成为语义菜单。

## 原生组成与范围

`Collapse`, `Divider`, `List`, `ListItem`, `ListItemButton`, `ListItemAvatar`, `ListItemIcon`, `ListItemSecondaryAction`, `ListItemText`, `ListSubheader`

保持 Material UI 原生组合与类型，不替换为 JGuang／Base UI／Radix 同名 API。示例条目不是额外组件。

## 原生安装与初始化

```bash
npm install @mui/material@9.4.0 @emotion/react@11.14.0 @emotion/styled@11.14.1
```

采用原生 npm 包与 Emotion，不提供虚构的 JGuang UI Registry 地址。将示例放在原生 ThemeProvider 内，按项目选择 CssBaseline 或 ScopedCssBaseline。先检查 React、现有 Provider、锁文件与 SSR 配置；不要覆盖用户文件或忽略 peer 冲突。本批实际验收 React 19.2.8；React 18 及以下须匹配 react-is。完整初始化规则见随附的双语 setup 文档。

## 关键原生参数

仅解释本指南选出的关键参数，不是平铺的通用 API。原生继承来源、slot 结构、可空值与泛型仍按固定源码保留。

| 所属组件.属性 | 用途说明 | 声明来源 |
| --- | --- | --- |
| `List.dense` | 原生紧凑布局，仍须保留可读性与触控目标。 | `List` |
| `List.disablePadding` | 去除原生 List 内边距。 | `List` |
| `ListItemButton.selected` | 原生选中／按下展示，选中值由宿主管理。 | `ListItemButton` |
| `ListItemText.primary` | ListItemText 的主要内容。 | `ListItemText` |
| `ListItemText.secondary` | ListItemText 的辅助内容。 | `ListItemText` |

## 可运行原生示例

下列机器键只选择示例入口，不会作为通用 variant 属性传入每个组件。原生示例 JSX 与数据保持上游原文；JGuang 编写的验收示例明确标注。

- 基础介绍 · `BasicList` · 上游原生示例
- 嵌套列表 · `NestedList` · 上游原生示例
- 文件夹列表 · `FolderList` · 上游原生示例
- 交互演示 · `InteractiveList` · 上游原生示例
- 选中列表项 · `SelectedListItem` · 上游原生示例
- 列表项对齐 · `AlignItemsList` · 上游原生示例
- 复选框 · `CheckboxList` · 上游原生示例
- 复选框 · `CheckboxListSecondary` · 上游原生示例
- 开关 · `SwitchListSecondary` · 上游原生示例
- 吸顶副标题 · `PinnedSubheaderList` · 上游原生示例
- 内缩列表项 · `InsetList` · 上游原生示例
- 无侧边留白列表 · `GutterlessList` · 上游原生示例
- 定制样式 · `CustomizedList` · 上游原生示例

## 尚未支持的额外示例

这些条目仍保留在上游清单中，不静默跳过，也不展示为已完成预览。需要补充依赖／框架验收后再纳入可运行列表。

- 虚拟列表扩展 · `VirtualizedList`: `react-window`

## 真实使用示例

固定版本的未修改原生示例；复制时同时保留所需的局部辅助文件。

```tsx
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
import InboxIcon from '@mui/icons-material/Inbox';
import DraftsIcon from '@mui/icons-material/Drafts';

export default function BasicList() {
  return (
    <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
      <nav aria-label="main mailbox folders">
        <List>
          <ListItem disablePadding>
            <ListItemButton>
              <ListItemIcon>
                <InboxIcon />
              </ListItemIcon>
              <ListItemText primary="Inbox" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton>
              <ListItemIcon>
                <DraftsIcon />
              </ListItemIcon>
              <ListItemText primary="Drafts" />
            </ListItemButton>
          </ListItem>
        </List>
      </nav>
      <Divider />
      <nav aria-label="secondary mailbox folders">
        <List>
          <ListItem disablePadding>
            <ListItemButton>
              <ListItemText primary="Trash" />
            </ListItemButton>
          </ListItem>
          <ListItem disablePadding>
            <ListItemButton component="a" href="#simple-list">
              <ListItemText primary="Spam" />
            </ListItemButton>
          </ListItem>
        </List>
      </nav>
    </Box>
  );
}

```

## 示例依赖边界

`@mui/material/Box`, `@mui/material/List`, `@mui/material/ListItem`, `@mui/material/ListItemButton`, `@mui/material/ListItemIcon`, `@mui/material/ListItemText`, `@mui/material/Divider`, `@mui/icons-material/Inbox`, `@mui/icons-material/Drafts`, `react`, `@mui/material/ListSubheader`, `@mui/material/Collapse`, `@mui/icons-material/MoveToInbox`, `@mui/icons-material/Send`, `@mui/icons-material/ExpandLess`, `@mui/icons-material/ExpandMore`, `@mui/icons-material/StarBorder`, `@mui/material/ListItemAvatar`, `@mui/material/Avatar`, `@mui/icons-material/Image`, `@mui/icons-material/Work`, `@mui/icons-material/BeachAccess`, `@mui/material/styles`, `@mui/material/IconButton`, `@mui/material/FormGroup`, `@mui/material/FormControlLabel`, `@mui/material/Checkbox`, `@mui/material/Grid`, `@mui/material/Typography`, `@mui/icons-material/Folder`, `@mui/icons-material/Delete`, `@mui/icons-material/Comment`, `@mui/material/Switch`, `@mui/icons-material/Wifi`, `@mui/icons-material/Bluetooth`, `@mui/icons-material/Star`, `@mui/material/Paper`, `@mui/material/Tooltip`, `@mui/icons-material/ArrowRight`, `@mui/icons-material/KeyboardArrowDown`, `@mui/icons-material/Home`, `@mui/icons-material/Settings`, `@mui/icons-material/People`, `@mui/icons-material/PermMedia`, `@mui/icons-material/Dns`, `@mui/icons-material/Public`

直接导入 Icons／System／Utils 的示例需要匹配 9.4.0 包。局部数据与辅助文件属于示例闭包，不是额外组件。远程图片和模拟操作不提供后端。

## 固定上游 API 元数据参考

以下表格保留上游元数据，不是重新推断的通用类型体系。条件泛型、继承属性与回调细节以以下源码声明为准。主题默认配置可能覆盖元数据默认值。

### Collapse

```tsx
import Collapse from '@mui/material/Collapse';
import { Collapse } from '@mui/material';
```

原生继承: `Transition`. 父级与 DOM 属性未被伪造为本组件新属性。

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `addEndListener` | 否 | `func` | — |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `collapsedSize` | 否 | `number \| string` | `'0px'` |
| `component` | 否 | `element type` | — |
| `disablePrefersReducedMotion` | 否 | `bool` | `false` |
| `easing` | 否 | `{ enter?: string, exit?: string } \| string` | — |
| `in` | 否 | `bool` | — |
| `orientation` | 否 | `'horizontal' \| 'vertical'` | `'vertical'` |
| `slotProps` | 否 | `{ root?: func \| object, wrapper?: func \| object, wrapperInner?: func \| object }` | `{}` |
| `slots` | 否 | `{ root?: elementType, wrapper?: elementType, wrapperInner?: elementType }` | `{}` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `timeout` | 否 | `'auto' \| number \| { appear?: number, enter?: number, exit?: number }` | `duration.standard` |



### Divider

```tsx
import Divider from '@mui/material/Divider';
import { Divider } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `absolute` | 否 | `bool` | `false` |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `flexItem` | 否 | `bool` | `false` |
| `orientation` | 否 | `'horizontal' \| 'vertical'` | `'horizontal'` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `textAlign` | 否 | `'center' \| 'left' \| 'right'` | `'center'` |
| `variant` | 否 | `'fullWidth' \| 'inset' \| 'middle' \| string` | `'fullWidth'` |



### List

```tsx
import List from '@mui/material/List';
import { List } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `dense` | 否 | `bool` | `false` |
| `disablePadding` | 否 | `bool` | `false` |
| `subheader` | 否 | `node` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### ListItem

```tsx
import ListItem from '@mui/material/ListItem';
import { ListItem } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `alignItems` | 否 | `'center' \| 'flex-start'` | `'center'` |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `dense` | 否 | `bool` | `false` |
| `disableGutters` | 否 | `bool` | `false` |
| `disablePadding` | 否 | `bool` | `false` |
| `divider` | 否 | `bool` | `false` |
| `secondaryAction` | 否 | `node` | — |
| `slotProps` | 否 | `{ root?: func \| object, secondaryAction?: func \| object }` | `{}` |
| `slots` | 否 | `{ root?: elementType, secondaryAction?: elementType }` | `{}` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### ListItemButton

```tsx
import ListItemButton from '@mui/material/ListItemButton';
import { ListItemButton } from '@mui/material';
```

原生继承: `ButtonBase`. 父级与 DOM 属性未被伪造为本组件新属性。

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `alignItems` | 否 | `'center' \| 'flex-start'` | `'center'` |
| `autoFocus` | 否 | `bool` | `false` |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `dense` | 否 | `bool` | `false` |
| `disabled` | 否 | `bool` | `false` |
| `disableGutters` | 否 | `bool` | `false` |
| `divider` | 否 | `bool` | `false` |
| `focusVisibleClassName` | 否 | `string` | — |
| `selected` | 否 | `bool` | `false` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### ListItemAvatar

```tsx
import ListItemAvatar from '@mui/material/ListItemAvatar';
import { ListItemAvatar } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### ListItemIcon

```tsx
import ListItemIcon from '@mui/material/ListItemIcon';
import { ListItemIcon } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### ListItemSecondaryAction

```tsx
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import { ListItemSecondaryAction } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### ListItemText

```tsx
import ListItemText from '@mui/material/ListItemText';
import { ListItemText } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `disableTypography` | 否 | `bool` | `false` |
| `inset` | 否 | `bool` | `false` |
| `primary` | 否 | `node` | — |
| `secondary` | 否 | `node` | — |
| `slotProps` | 否 | `{ primary?: func \| object, root?: func \| object, secondary?: func \| object }` | `{}` |
| `slots` | 否 | `{ primary?: elementType, root?: elementType, secondary?: elementType }` | `{}` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |



### ListSubheader

```tsx
import ListSubheader from '@mui/material/ListSubheader';
import { ListSubheader } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `color` | 否 | `'default' \| 'inherit' \| 'primary'` | `'default'` |
| `component` | 否 | `elementType` | — |
| `disableGutters` | 否 | `bool` | `false` |
| `disableSticky` | 否 | `bool` | `false` |
| `inset` | 否 | `bool` | `false` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |


## 原生源码声明

声明与 import 从固定源码提取，不平铺联合类型或外部继承。英文注释／类型属于原始源码参考，不代表上游正文已全文翻译。共享类型仍位于原生包中。

### vendor/src/Collapse/Collapse.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { TransitionProps, TransitionStatus } from '../transitions/types';

import { CollapseClasses } from './collapseClasses';

import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';

export interface CollapseSlots {
  /**
   * The component that renders the root.
   * @default 'div'
   */
  root?: React.ElementType | undefined;
  /**
   * The component that renders the wrapper.
   * @default 'div'
   */
  wrapper?: React.ElementType | undefined;
  /**
   * The component that renders the inner wrapper.
   * @default 'div'
   */
  wrapperInner?: React.ElementType | undefined;
}

export interface CollapseRootSlotPropsOverrides {}

export interface CollapseWrapperSlotPropsOverrides {}

export interface CollapseWrapperInnerSlotPropsOverrides {}

export type CollapseSlotsAndSlotProps = CreateSlotsAndSlotProps<
  CollapseSlots,
  {
    root: SlotProps<'div', CollapseRootSlotPropsOverrides, CollapseOwnerState>;
    wrapper: SlotProps<'div', CollapseWrapperSlotPropsOverrides, CollapseOwnerState>;
    wrapperInner: SlotProps<'div', CollapseWrapperInnerSlotPropsOverrides, CollapseOwnerState>;
  }
>;

export interface CollapseProps
  extends StandardProps<TransitionProps, 'timeout'>, CollapseSlotsAndSlotProps {
  /**
   * Add a custom transition end trigger.
   * Use it when you need custom logic to decide when the transition has ended.
   * Note: Timeouts are still used as a fallback if provided.
   *
   * @param {HTMLElement} node The transitioning DOM node.
   * @param {Function} done Call this when the transition has finished.
   */
  addEndListener?: TransitionProps['addEndListener'] | undefined;
  /**
   * The content node to be collapsed.
   */
  children?: React.ReactNode;
  className?: string | undefined;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<CollapseClasses> | undefined;
  /**
   * The width (horizontal) or height (vertical) of the container when collapsed.
   * @default '0px'
   */
  collapsedSize?: string | number | undefined;
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component?: React.ElementType<TransitionProps> | undefined;
  /**
   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
   * @default false
   */
  disablePrefersReducedMotion?: boolean | undefined;
  /**
   * The transition timing function.
   * You may specify a single easing or a object containing enter and exit values.
   */
  easing?: TransitionProps['easing'] | undefined;
  /**
   * If `true`, the component will transition in.
   */
  in?: boolean | undefined;
  /**
   * The transition orientation.
   * @default 'vertical'
   */
  orientation?: 'horizontal' | 'vertical' | undefined;
  /**
   * The duration for the transition, in milliseconds.
   * You may specify a single timeout for all transitions, or individually with an object.
   *
   * Set to 'auto' to automatically calculate transition time based on height.
   * @default duration.standard
   */
  timeout?: TransitionProps['timeout'] | 'auto' | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface CollapseOwnerState extends CollapseProps {
  state: TransitionStatus;
}

export default function Collapse(props: CollapseProps): React.JSX.Element;
```

### vendor/src/Divider/Divider.d.ts

```ts
import * as React from 'react';

import { OverridableStringUnion } from '@mui/types';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { DividerClasses } from './dividerClasses';

export interface DividerPropsVariantOverrides {}

export interface DividerOwnProps {
  /**
   * Absolutely position the element.
   * @default false
   */
  absolute?: boolean | undefined;
  /**
   * The content of the component.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<DividerClasses> | undefined;
  /**
   * If `true`, a vertical divider will have the correct height when used in flex container.
   * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
   * @default false
   */
  flexItem?: boolean | undefined;
  /**
   * The component orientation.
   * @default 'horizontal'
   */
  orientation?: 'horizontal' | 'vertical' | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * The text alignment.
   * @default 'center'
   */
  textAlign?: 'center' | 'right' | 'left' | undefined;
  /**
   * The variant to use.
   * @default 'fullWidth'
   */
  variant?:
    | OverridableStringUnion<'fullWidth' | 'inset' | 'middle', DividerPropsVariantOverrides>
    | undefined;
}

export interface DividerTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'hr',
> {
  props: AdditionalProps & DividerOwnProps;
  defaultComponent: RootComponent;
}

declare const Divider: OverridableComponent<DividerTypeMap>;

export type DividerProps<
  RootComponent extends React.ElementType = DividerTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<DividerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/List/List.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent';

import { ListClasses } from './listClasses';

export interface ListOwnProps {
  /**
   * The content of the component.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<ListClasses> | undefined;
  /**
   * If `true`, compact vertical padding designed for keyboard and mouse input is used for
   * the list and list items.
   * The prop is available to descendant components as the `dense` context.
   * @default false
   */
  dense?: boolean | undefined;
  /**
   * If `true`, vertical padding is removed from the list.
   * @default false
   */
  disablePadding?: boolean | undefined;
  /**
   * The content of the subheader, normally `ListSubheader`.
   */
  subheader?: React.ReactNode;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface ListTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'ul'> {
  props: AdditionalProps & ListOwnProps;
  defaultComponent: RootComponent;
}

export interface ExtendListTypeMap<TypeMap extends OverridableTypeMap> {
  props: TypeMap['props'] & Omit<ListTypeMap['props'], keyof TypeMap['props']>;
  defaultComponent: TypeMap['defaultComponent'];
}

export type ExtendList<TypeMap extends OverridableTypeMap> = OverridableComponent<
  ExtendListTypeMap<TypeMap>
>;

declare const List: ExtendList<ListTypeMap>;

export type ListProps<
  RootComponent extends React.ElementType = ListTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<ListTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/ListItem/ListItem.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { ListItemClasses } from './listItemClasses';

import { SlotProps } from '../utils/types';

export interface ListItemRootSlotPropsOverrides {}

export interface ListItemSecondaryActionSlotPropsOverrides {}

export interface ListItemBaseProps {
  /**
   * Defines the `align-items` style property.
   * @default 'center'
   */
  alignItems?: 'flex-start' | 'center' | undefined;
  /**
   * The content of the component.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<ListItemClasses> | undefined;
  /**
   * 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.
   * @default false
   */
  dense?: boolean | undefined;
  /**
   * If `true`, the left and right padding is removed.
   * @default false
   */
  disableGutters?: boolean | undefined;
  /**
   * If `true`, all padding is removed.
   * @default false
   */
  disablePadding?: boolean | undefined;
  /**
   * If `true`, a 1px light border is added to the bottom of the list item.
   * @default false
   */
  divider?: boolean | undefined;
  /**
   * The element to display at the end of ListItem.
   */
  secondaryAction?: React.ReactNode;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface ListItemOwnerState extends Omit<ListItemProps, 'slots' | 'slotProps'> {}

export interface ListItemOwnProps extends ListItemBaseProps {
  /**
   * The extra props for the slot components.
   * You can override the existing props or add new ones.
   *
   * @default {}
   */
  slotProps?:
    | {
        root?:
          | SlotProps<
              React.ElementType<React.HTMLAttributes<HTMLDivElement>>,
              ListItemRootSlotPropsOverrides,
              ListItemOwnerState
            >
          | undefined;
        secondaryAction?:
          | SlotProps<
              React.ElementType<React.HTMLAttributes<HTMLDivElement>>,
              ListItemSecondaryActionSlotPropsOverrides,
              ListItemOwnerState
            >
          | undefined;
      }
    | undefined;
  /**
   * The components used for each slot inside.
   *
   * @default {}
   */
  slots?:
    | {
        root?: React.ElementType | undefined;
        secondaryAction?: React.ElementType | undefined;
      }
    | undefined;
}

export interface ListItemTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
  props: AdditionalProps & ListItemOwnProps;
  defaultComponent: RootComponent;
}

declare const ListItem: OverridableComponent<ListItemTypeMap<{}, 'li'>>;

export type ListItemProps<
  RootComponent extends React.ElementType = 'li',
  AdditionalProps = {},
> = OverrideProps<ListItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/ListItemButton/ListItemButton.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';

import { OverrideProps } from '../OverridableComponent';

import { ListItemButtonClasses } from './listItemButtonClasses';

export interface ListItemButtonBaseProps {
  /**
   * Defines the `align-items` style property.
   * @default 'center'
   */
  alignItems?: 'flex-start' | 'center' | undefined;
  /**
   * If `true`, the list item is focused during the first mount.
   * Focus will also be triggered if the value changes from false to true.
   * @default false
   */
  autoFocus?: boolean | undefined;
  /**
   * The content of the component.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<ListItemButtonClasses> | undefined;
  /**
   * 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.
   * @default false
   */
  dense?: boolean | undefined;
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled?: boolean | undefined;
  /**
   * If `true`, the left and right padding is removed.
   * @default false
   */
  disableGutters?: boolean | undefined;
  /**
   * If `true`, a 1px light border is added to the bottom of the list item.
   * @default false
   */
  divider?: boolean | undefined;
  /**
   * Use to apply selected styling.
   * @default false
   */
  selected?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface ListItemButtonOwnProps extends ListItemButtonBaseProps {}

export type ListItemButtonTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'div',
> = ExtendButtonBaseTypeMap<{
  props: AdditionalProps & ListItemButtonOwnProps;
  defaultComponent: RootComponent;
}>;

declare const ListItemButton: ExtendButtonBase<ListItemButtonTypeMap>;

export type ListItemButtonProps<
  RootComponent extends React.ElementType = ListItemButtonTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<ListItemButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/ListItemAvatar/ListItemAvatar.d.ts

```ts
import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { ListItemAvatarClasses } from './listItemAvatarClasses';

export interface ListItemAvatarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
  /**
   * The content of the component, normally an `Avatar`.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<ListItemAvatarClasses> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export default function ListItemAvatar(props: ListItemAvatarProps): React.JSX.Element;
```

### vendor/src/ListItemIcon/ListItemIcon.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { ListItemIconClasses } from './listItemIconClasses';

export interface ListItemIconProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
  /**
   * The content of the component, normally `Icon`, `SvgIcon`,
   * or a `@mui/icons-material` SVG icon element.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<ListItemIconClasses> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export default function ListItemIcon(props: ListItemIconProps): React.JSX.Element;
```

### vendor/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { Theme } from '../styles';

import { ListItemSecondaryActionClasses } from './listItemSecondaryActionClasses';

export interface ListItemSecondaryActionOwnProps {
  /**
   * The content of the component, normally an `IconButton` or selection control.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<ListItemSecondaryActionClasses> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface ListItemSecondaryActionTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'div',
> {
  props: AdditionalProps & ListItemSecondaryActionOwnProps;
  defaultComponent: RootComponent;
}

declare const ListItemSecondaryAction: OverridableComponent<ListItemSecondaryActionTypeMap> & {
  muiName: string;
};

export type ListItemSecondaryActionProps<
  RootComponent extends React.ElementType = ListItemSecondaryActionTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<ListItemSecondaryActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/ListItemText/ListItemText.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { TypographyProps } from '../Typography';

import { ListItemTextClasses } from './listItemTextClasses';

import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';

export interface ListItemTextSlots {
  /**
   * The component that renders the root slot.
   * @default 'div'
   */
  root?: React.ElementType | undefined;
  /**
   * The component that renders the primary slot.
   * @default Typography
   */
  primary?: React.ElementType | undefined;
  /**
   * The component that renders the secondary slot.
   * @default Typography
   */
  secondary?: React.ElementType | undefined;
}

export type ListItemTextSlotsAndSlotProps<
  PrimaryTypographyComponent extends React.ElementType = React.ElementType<TypographyProps<'span'>>,
  SecondaryTypographyComponent extends React.ElementType = React.ElementType<TypographyProps<'p'>>,
> = CreateSlotsAndSlotProps<
  ListItemTextSlots,
  {
    /**
     * Props forwarded to the root slot.
     * By default, the available props are based on `div` element.
     */
    root: SlotProps<'div', {}, ListItemTextOwnerState>;
    /**
     * Props forwarded to the primary slot (as long as disableTypography is not `true`)
     * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
     */
    primary:
      | TypographyProps<
          PrimaryTypographyComponent,
          { component?: PrimaryTypographyComponent | undefined }
        >
      | ((
          ownerState: ListItemTextOwnerState,
        ) => TypographyProps<
          PrimaryTypographyComponent,
          { component?: PrimaryTypographyComponent | undefined }
        >);
    /**
     * Props forwarded to the secondary slot (as long as disableTypography is not `true`)
     * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component
     */
    secondary:
      | TypographyProps<
          SecondaryTypographyComponent,
          { component?: SecondaryTypographyComponent | undefined }
        >
      | ((
          ownerState: ListItemTextOwnerState,
        ) => TypographyProps<
          SecondaryTypographyComponent,
          { component?: SecondaryTypographyComponent | undefined }
        >);
  }
>;

export interface ListItemTextOwnerState extends ListItemTextProps {}

export interface ListItemTextProps<
  PrimaryTypographyComponent extends React.ElementType = 'span',
  SecondaryTypographyComponent extends React.ElementType = 'p',
>
  extends
    StandardProps<React.HTMLAttributes<HTMLDivElement>>,
    ListItemTextSlotsAndSlotProps<PrimaryTypographyComponent, SecondaryTypographyComponent> {
  /**
   * Alias for the `primary` prop.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<ListItemTextClasses> | undefined;
  /**
   * If `true`, the children won't be wrapped by a Typography component.
   * This can be useful to render an alternative Typography variant by wrapping
   * the `children` (or `primary`) text, and optional `secondary` text
   * with the Typography component.
   * @default false
   */
  disableTypography?: boolean | undefined;
  /**
   * If `true`, the children are indented.
   * This should be used if there is no left avatar or left icon.
   * @default false
   */
  inset?: boolean | undefined;
  /**
   * The main content element.
   */
  primary?: React.ReactNode;
  /**
   * The secondary content element.
   */
  secondary?: React.ReactNode;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export default function ListItemText<
  PrimaryTypographyComponent extends React.ElementType = 'span',
  SecondaryTypographyComponent extends React.ElementType = 'p',
>(
  props: ListItemTextProps<PrimaryTypographyComponent, SecondaryTypographyComponent>,
): React.JSX.Element;
```

### vendor/src/ListSubheader/ListSubheader.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { ListSubheaderClasses } from './listSubheaderClasses';

export interface ListSubheaderOwnProps {
  /**
   * The content of the component.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<ListSubheaderClasses> | undefined;
  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   * @default 'default'
   */
  color?: 'default' | 'primary' | 'inherit' | undefined;
  /**
   * If `true`, the List Subheader will not have gutters.
   * @default false
   */
  disableGutters?: boolean | undefined;
  /**
   * If `true`, the List Subheader will not stick to the top during scroll.
   * @default false
   */
  disableSticky?: boolean | undefined;
  /**
   * If `true`, the List Subheader is indented.
   * @default false
   */
  inset?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface ListSubheaderTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'li',
> {
  props: AdditionalProps & ListSubheaderOwnProps;
  defaultComponent: RootComponent;
}

declare const ListSubheader: OverridableComponent<ListSubheaderTypeMap>;

export type ListSubheaderProps<
  RootComponent extends React.ElementType = ListSubheaderTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<ListSubheaderTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

## 安装后验收

执行严格类型检查、生产构建和实际交互。检查键盘标签／焦点、原生支持的禁用／错误／只读语义、深浅色、窄屏和减少动画。按真实宿主数据检查回调，不把复制提示词当作安装完成。初始化工具还需检查服务端 HTML 与无告警水合。

## 来源与许可

https://github.com/mui/material-ui/tree/809a7717b4c050ba3f69b75300689f07c050a16e

MIT · @mui/material@9.4.0. 保留上游原始内容与许可证。上游完整原文保留于 vendor/docs，不标为全文中文化。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt