@mui/material/index.d.ts

Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

import * as React from 'react';
import { DistributiveOmit } from '@mui/types';
import { StyledComponentProps } from './styles';

export { StyledComponentProps };

/**
 * All standard components exposed by `material-ui` are `StyledComponents` with
 * certain `classes`, on which one can also set a top-level `className` and inline
 * `style`.
 * @deprecated will be removed in v5 for internal usage only
 */
export type StandardProps<
  C,
  ClassKey extends string,
  Removals extends keyof C = never,
> = DistributiveOmit<C, 'classes' | Removals> &
  StyledComponentProps<ClassKey> & {
    className?: string;
    ref?: C extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
    style?: React.CSSProperties;
  };

/**
 * @internal
 * ONLY USE FROM WITHIN mui-org/material-ui
 *
 * Internal helper type for conform (describeConformance) components
 * However, we don't declare classes on this type.
 * It is recommended to declare them manually with an interface so that each class can have a separate JSDoc.
 */
export type InternalStandardProps<C, Removals extends keyof C = never> = DistributiveOmit<
  C,
  'classes' | Removals
> &
  // each component declares it's classes in a separate interface for proper JSDoc
  StyledComponentProps<never> & {
    ref?: C extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
    // TODO: Remove implicit props. Up to each component.
    className?: string;
    style?: React.CSSProperties;
  };

export type PaletteMode = 'light' | 'dark';
export interface Color {
  50: string;
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;
  600: string;
  700: string;
  800: string;
  900: string;
  A100: string;
  A200: string;
  A400: string;
  A700: string;
}

export namespace PropTypes {
  // keeping the type structure for backwards compat
  // eslint-disable-next-line @typescript-eslint/no-shadow, @typescript-eslint/no-unused-vars
  type Color = 'inherit' | 'primary' | 'secondary' | 'default';
}

// From index.js
// eslint-disable-next-line import/first
import * as colors from './colors';

export { colors };
export * from './styles';

export * from './utils';

export * from '@mui/base';

export { default as Accordion } from './Accordion';
export * from './Accordion';

export { default as AccordionActions } from './AccordionActions';
export * from './AccordionActions';

export { default as AccordionDetails } from './AccordionDetails';
export * from './AccordionDetails';

export { default as AccordionSummary } from './AccordionSummary';
export * from './AccordionSummary';

export { default as Alert } from './Alert';
export * from './Alert';

export { default as AlertTitle } from './AlertTitle';
export * from './AlertTitle';

export { default as AppBar } from './AppBar';
export * from './AppBar';

export { default as Autocomplete } from './Autocomplete';
export * from './Autocomplete';

export { default as Avatar } from './Avatar';
export * from './Avatar';

export { default as AvatarGroup } from './AvatarGroup';
export * from './AvatarGroup';

export { default as Backdrop } from './Backdrop';
export * from './Backdrop';

export { default as Badge } from './Badge';
export * from './Badge';

export { default as BottomNavigation } from './BottomNavigation';
export * from './BottomNavigation';

export { default as BottomNavigationAction } from './BottomNavigationAction';
export * from './BottomNavigationAction';

export { default as Box } from './Box';
export * from './Box';

export { default as Breadcrumbs } from './Breadcrumbs';
export * from './Breadcrumbs';

export { default as Button } from './Button';
export * from './Button';

export { default as ButtonBase } from './ButtonBase';
export * from './ButtonBase';

export { default as ButtonGroup } from './ButtonGroup';
export * from './ButtonGroup';

export { default as Card } from './Card';
export * from './Card';

export { default as CardActionArea } from './CardActionArea';
export * from './CardActionArea';

export { default as CardActions } from './CardActions';
export * from './CardActions';

export { default as CardContent } from './CardContent';
export * from './CardContent';

export { default as CardHeader } from './CardHeader';
export * from './CardHeader';

export { default as CardMedia } from './CardMedia';
export * from './CardMedia';

export { default as Checkbox } from './Checkbox';
export * from './Checkbox';

export { default as Chip } from './Chip';
export * from './Chip';

export { default as CircularProgress } from './CircularProgress';
export * from './CircularProgress';

export { default as ClickAwayListener } from './ClickAwayListener';
export * from './ClickAwayListener';

export { default as Collapse } from './Collapse';
export * from './Collapse';

export { default as Container } from './Container';
export * from './Container';

export { default as CssBaseline } from './CssBaseline';
export * from './CssBaseline';

/**
 * @deprecated use color-scheme in CssBaseline or ScopedCssBaseline to modify scrollbar color
 */
export { default as darkScrollbar } from './darkScrollbar';
export * from './darkScrollbar';

export { default as Dialog } from './Dialog';
export * from './Dialog';

export { default as DialogActions } from './DialogActions';
export * from './DialogActions';

export { default as DialogContent } from './DialogContent';
export * from './DialogContent';

export { default as DialogContentText } from './DialogContentText';
export * from './DialogContentText';

export { default as DialogTitle } from './DialogTitle';
export * from './DialogTitle';

export { default as Divider } from './Divider';
export * from './Divider';

export { default as Drawer } from './Drawer';
export * from './Drawer';

export { default as Fab } from './Fab';
export * from './Fab';

export { default as Fade } from './Fade';
export * from './Fade';

export { default as FilledInput } from './FilledInput';
export * from './FilledInput';

export { default as FormControl } from './FormControl';
export * from './FormControl';

export { default as FormControlLabel } from './FormControlLabel';
export * from './FormControlLabel';

export { default as FormGroup } from './FormGroup';
export * from './FormGroup';

export { default as FormHelperText } from './FormHelperText';
export * from './FormHelperText';

export { default as FormLabel } from './FormLabel';
export * from './FormLabel';

export { default as Grid } from './Grid';
export * from './Grid';

export { default as Grow } from './Grow';
export * from './Grow';

export { default as Hidden } from './Hidden';
export * from './Hidden';

export { default as Icon } from './Icon';
export * from './Icon';

export { default as IconButton } from './IconButton';
export * from './IconButton';

export { default as ImageList } from './ImageList';
export * from './ImageList';

export { default as ImageListItem } from './ImageListItem';
export * from './ImageListItem';

export { default as ImageListItemBar } from './ImageListItemBar';
export * from './ImageListItemBar';

export { default as Input } from './Input';
export * from './Input';

export { default as InputAdornment } from './InputAdornment';
export * from './InputAdornment';

export { default as InputBase } from './InputBase';
export * from './InputBase';

export { default as InputLabel } from './InputLabel';
export * from './InputLabel';

export { default as LinearProgress } from './LinearProgress';
export * from './LinearProgress';

export { default as Link } from './Link';
export * from './Link';

export { default as List } from './List';
export * from './List';

export { default as ListItem } from './ListItem';
export * from './ListItem';

export { default as ListItemAvatar } from './ListItemAvatar';
export * from './ListItemAvatar';

export { default as ListItemButton } from './ListItemButton';
export * from './ListItemButton';

export { default as ListItemIcon } from './ListItemIcon';
export * from './ListItemIcon';

export { default as ListItemSecondaryAction } from './ListItemSecondaryAction';
export * from './ListItemSecondaryAction';

export { default as ListItemText } from './ListItemText';
export * from './ListItemText';

export { default as ListSubheader } from './ListSubheader';
export * from './ListSubheader';

export { default as Menu } from './Menu';
export * from './Menu';

export { default as MenuItem } from './MenuItem';
export * from './MenuItem';

export { default as MenuList } from './MenuList';
export * from './MenuList';

export { default as MobileStepper } from './MobileStepper';
export * from './MobileStepper';

export { default as Modal } from './Modal';
export * from './Modal';

export { default as NativeSelect } from './NativeSelect';
export * from './NativeSelect';

export { default as NoSsr } from './NoSsr';
export * from './NoSsr';

export { default as OutlinedInput } from './OutlinedInput';
export * from './OutlinedInput';

export { default as Pagination } from './Pagination';
export * from './Pagination';

export { default as PaginationItem } from './PaginationItem';
export * from './PaginationItem';

export { default as Paper } from './Paper';
export * from './Paper';

export { default as Popover } from './Popover';
export * from './Popover';

export { default as Popper } from './Popper';
export * from './Popper';

export { default as Radio } from './Radio';
export * from './Radio';

export { default as RadioGroup } from './RadioGroup';
export * from './RadioGroup';

export { default as Rating } from './Rating';
export * from './Rating';

export { default as ScopedCssBaseline } from './ScopedCssBaseline';
export * from './ScopedCssBaseline';

export { default as Select } from './Select';
export * from './Select';

export { default as Skeleton } from './Skeleton';
export * from './Skeleton';

export { default as Slide } from './Slide';
export * from './Slide';

export { default as Slider } from './Slider';
export * from './Slider';

export { default as Snackbar } from './Snackbar';
export * from './Snackbar';

export { default as SnackbarContent } from './SnackbarContent';
export * from './SnackbarContent';

export { default as SpeedDial } from './SpeedDial';
export * from './SpeedDial';

export { default as SpeedDialAction } from './SpeedDialAction';
export * from './SpeedDialAction';

export { default as SpeedDialIcon } from './SpeedDialIcon';
export * from './SpeedDialIcon';

export { default as Stack } from './Stack';
export * from './Stack';

export { default as Step } from './Step';
export * from './Step';

export { default as StepButton } from './StepButton';
export * from './StepButton';

export { default as StepConnector } from './StepConnector';
export * from './StepConnector';

export { default as StepContent } from './StepContent';
export * from './StepContent';

export { default as StepIcon } from './StepIcon';
export * from './StepIcon';

export { default as StepLabel } from './StepLabel';
export * from './StepLabel';

export { default as Stepper } from './Stepper';
export * from './Stepper';

export { default as SvgIcon } from './SvgIcon';
export * from './SvgIcon';

export { default as SwipeableDrawer } from './SwipeableDrawer';
export * from './SwipeableDrawer';

export { default as Switch } from './Switch';
export * from './Switch';

export { default as Tab } from './Tab';
export * from './Tab';

export { default as Table } from './Table';
export * from './Table';

export { default as TableBody } from './TableBody';
export * from './TableBody';

export { default as TableCell } from './TableCell';
export * from './TableCell';

export { default as TableContainer } from './TableContainer';
export * from './TableContainer';

export { default as TableFooter } from './TableFooter';
export * from './TableFooter';

export { default as TableHead } from './TableHead';
export * from './TableHead';

export { default as TablePagination } from './TablePagination';
export * from './TablePagination';

export { default as TableRow } from './TableRow';
export * from './TableRow';

export { default as TableSortLabel } from './TableSortLabel';
export * from './TableSortLabel';

export { default as Tabs } from './Tabs';
export * from './Tabs';

export { default as TabScrollButton } from './TabScrollButton';
export * from './TabScrollButton';

export { default as TextField } from './TextField';
export * from './TextField';

export { default as TextareaAutosize } from './TextareaAutosize';
export * from './TextareaAutosize';

export { default as ToggleButton } from './ToggleButton';
export * from './ToggleButton';

export { default as ToggleButtonGroup } from './ToggleButtonGroup';
export * from './ToggleButtonGroup';

export { default as Toolbar } from './Toolbar';
export * from './Toolbar';

export { default as Tooltip } from './Tooltip';
export * from './Tooltip';

export { default as Typography } from './Typography';
export * from './Typography';

export { default as useMediaQuery } from './useMediaQuery';
export * from './useMediaQuery';

export { default as useScrollTrigger } from './useScrollTrigger';
export * from './useScrollTrigger';

export { default as Zoom } from './Zoom';
export * from './Zoom';

export { default as useAutocomplete } from './useAutocomplete';
export * from './useAutocomplete';

export { default as GlobalStyles } from './GlobalStyles';
export * from './GlobalStyles';

/**
 * @deprecated will be removed in v5.beta, please use StyledEngineProvider from @mui/material/styles instead
 */
export { StyledEngineProvider } from './styles';