列表

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

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

使用场景与业务边界

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

原生组成与范围

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

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

原生安装与初始化

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 结构、可空值与泛型仍按固定源码保留。

可运行原生示例

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

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

尚未支持的额外示例

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

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

真实使用示例

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

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

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

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

Divider

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

List

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

ListItem

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

ListItemButton

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

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

ListItemAvatar

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

ListItemIcon

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

ListItemSecondaryAction

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

ListItemText

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

ListSubheader

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

原生源码声明

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

vendor/src/Collapse/Collapse.d.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

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

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

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

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

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

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

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

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

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，不标为全文中文化。