Lists

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

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.

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.

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

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

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

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';

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

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';

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

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

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.