# Lists

- Page: https://jiguang132.com/resources/material-ui/docs/lists
- Resource: Material UI (https://jiguang132.com/resources/material-ui.md)
- All guides: https://jiguang132.com/resources/material-ui/docs.md

Organize items with text, avatars, icons, selection or nested content.

This guide covers Material UI Core with the default Emotion engine; extensions and additional demos are explicitly classified.

## Use case and business boundary

Selection and nested state belong to the host; a List is not automatically virtualized or a semantic menu.

## Native composition and scope

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

Preserve native Material UI composition and types; do not substitute JGuang UI/Base UI/Radix APIs. Example entries are not extra components.

## Native installation and initialization

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

Use native npm and Emotion, not an invented JGuang UI Registry URL. Place examples inside native ThemeProvider; choose CssBaseline or ScopedCssBaseline for the project. Inspect React, existing providers, lockfile and SSR first. Never overwrite files or conceal peer conflicts. This batch verified React 19.2.8; React 18 and below require matching react-is. See the included bilingual setup guide.

## Practical native parameters

These selected parameters are not a flattened universal API. Preserve the native declaring owner, slot structure, nullable values and generics.

| Owner.prop | Practical role | Declaration source |
| --- | --- | --- |
| `List.dense` | Native compact layout; preserve readability and touch targets. | `List` |
| `List.disablePadding` | Remove native List padding. | `List` |
| `ListItemButton.selected` | Native selected/pressed presentation; the host owns the selected value. | `ListItemButton` |
| `ListItemText.primary` | ListItemText's primary content. | `ListItemText` |
| `ListItemText.secondary` | ListItemText's supporting content. | `ListItemText` |

## Runnable native examples

Machine keys select example entries, not universal variant props. Native demo JSX/data stay unchanged; JGuang-authored acceptance fixtures are explicitly labelled.

- Introduction · `BasicList` · upstream native demo
- Nested List · `NestedList` · upstream native demo
- Folder List · `FolderList` · upstream native demo
- Interactive · `InteractiveList` · upstream native demo
- Selected ListItem · `SelectedListItem` · upstream native demo
- Align list items · `AlignItemsList` · upstream native demo
- Checkbox · `CheckboxList` · upstream native demo
- Checkbox · `CheckboxListSecondary` · upstream native demo
- Switch · `SwitchListSecondary` · upstream native demo
- Sticky subheader · `PinnedSubheaderList` · upstream native demo
- Inset List Item · `InsetList` · upstream native demo
- Gutterless list · `GutterlessList` · upstream native demo
- Customization · `CustomizedList` · upstream native demo

## Explicitly unsupported additional examples

These remain in the upstream inventory, not silently skipped or presented as working previews. Additional dependency/framework acceptance is required.

- Virtualized List · `VirtualizedList`: `react-window`

## Actual usage example

Unmodified pinned native demo; copy its required local helper files together.

```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>
  );
}

```

## Example dependency boundaries

`@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`

Direct Icons/System/Utils example imports require their matching 9.4.0 packages. Relative data/helpers are part of the example closure, not extra components. Remote images and simulated operations do not supply a backend.

## Pinned upstream API metadata reference

These tables retain the upstream metadata, not a newly inferred generic type system. Conditional generics, inherited props and callback details are defined by the source declarations below. Theme defaults may override metadata defaults.

### Collapse

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

Native inheritance: `Transition`. Parent/DOM props are not fabricated as additional own props.

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `addEndListener` | no | `func` | — |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `collapsedSize` | no | `number \| string` | `'0px'` |
| `component` | no | `element type` | — |
| `disablePrefersReducedMotion` | no | `bool` | `false` |
| `easing` | no | `{ enter?: string, exit?: string } \| string` | — |
| `in` | no | `bool` | — |
| `orientation` | no | `'horizontal' \| 'vertical'` | `'vertical'` |
| `slotProps` | no | `{ root?: func \| object, wrapper?: func \| object, wrapperInner?: func \| object }` | `{}` |
| `slots` | no | `{ root?: elementType, wrapper?: elementType, wrapperInner?: elementType }` | `{}` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `timeout` | no | `'auto' \| number \| { appear?: number, enter?: number, exit?: number }` | `duration.standard` |



### Divider

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `absolute` | no | `bool` | `false` |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `flexItem` | no | `bool` | `false` |
| `orientation` | no | `'horizontal' \| 'vertical'` | `'horizontal'` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `textAlign` | no | `'center' \| 'left' \| 'right'` | `'center'` |
| `variant` | no | `'fullWidth' \| 'inset' \| 'middle' \| string` | `'fullWidth'` |



### List

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `dense` | no | `bool` | `false` |
| `disablePadding` | no | `bool` | `false` |
| `subheader` | no | `node` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### ListItem

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `alignItems` | no | `'center' \| 'flex-start'` | `'center'` |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `dense` | no | `bool` | `false` |
| `disableGutters` | no | `bool` | `false` |
| `disablePadding` | no | `bool` | `false` |
| `divider` | no | `bool` | `false` |
| `secondaryAction` | no | `node` | — |
| `slotProps` | no | `{ root?: func \| object, secondaryAction?: func \| object }` | `{}` |
| `slots` | no | `{ root?: elementType, secondaryAction?: elementType }` | `{}` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### ListItemButton

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

Native inheritance: `ButtonBase`. Parent/DOM props are not fabricated as additional own props.

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `alignItems` | no | `'center' \| 'flex-start'` | `'center'` |
| `autoFocus` | no | `bool` | `false` |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `dense` | no | `bool` | `false` |
| `disabled` | no | `bool` | `false` |
| `disableGutters` | no | `bool` | `false` |
| `divider` | no | `bool` | `false` |
| `focusVisibleClassName` | no | `string` | — |
| `selected` | no | `bool` | `false` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### ListItemAvatar

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### ListItemIcon

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### ListItemSecondaryAction

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### ListItemText

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `disableTypography` | no | `bool` | `false` |
| `inset` | no | `bool` | `false` |
| `primary` | no | `node` | — |
| `secondary` | no | `node` | — |
| `slotProps` | no | `{ primary?: func \| object, root?: func \| object, secondary?: func \| object }` | `{}` |
| `slots` | no | `{ primary?: elementType, root?: elementType, secondary?: elementType }` | `{}` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |



### ListSubheader

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `color` | no | `'default' \| 'inherit' \| 'primary'` | `'default'` |
| `component` | no | `elementType` | — |
| `disableGutters` | no | `bool` | `false` |
| `disableSticky` | no | `bool` | `false` |
| `inset` | no | `bool` | `false` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |


## Native source declarations

Declarations/imports are extracted from pinned source without flattening unions or external inheritance. Original English comments/types are source reference, not a claim of translated upstream prose. Shared types stay in their native packages.

### 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;
};
```

## Post-install acceptance

Run strict types, production build and real interactions. Check keyboard labels/focus, disabled/error/read-only semantics where natively supported, both themes, narrow screens and reduced motion. Verify callbacks against the real host data; do not declare installation complete from copying a prompt. Initialization fixtures also require server HTML and warning-free hydration.

## Source and license

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

MIT · @mui/material@9.4.0. Vendor originals and license are preserved. Full original upstream prose remains in vendor/docs and is not represented as fully translated.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt