@material-ui/core

@material-ui/core

Version 4.12.4
Published 2 years ago
5.96 MB
12 dependencies
MIT license

Install

npm i @material-ui/core

yarn add @material-ui/core

pnpm add @material-ui/core

Overview

React components that implement Google's Material Design.

Index

Variables

variable AccordionSummary

const AccordionSummary: ((props: any) => JSX.Element) &
    OverridableComponent<
        ExtendButtonBaseTypeMap<AccordionSummaryTypeMap<{}, 'div'>>
    >;

Demos:
- [Accordion](https://mui.com/components/accordion/)
API:
- [AccordionSummary API](https://mui.com/api/accordion-summary/) - inherits [ButtonBase API](https://mui.com/api/button-base/)

variable Avatar

const Avatar: OverridableComponent<AvatarTypeMap<{}, 'div'>>;

Demos:
- [Avatars](https://mui.com/components/avatars/)
API:
- [Avatar API](https://mui.com/api/avatar/)

variable Badge

const Badge: OverridableComponent<BadgeTypeMap<{}, 'div'>>;

Demos:
- [Avatars](https://mui.com/components/avatars/) - [Badges](https://mui.com/components/badges/)
API:
- [Badge API](https://mui.com/api/badge/)

variable BottomNavigation

const BottomNavigation: OverridableComponent<BottomNavigationTypeMap<{}, 'div'>>;

Demos:
- [Bottom Navigation](https://mui.com/components/bottom-navigation/)
API:
- [BottomNavigation API](https://mui.com/api/bottom-navigation/)

variable BottomNavigationAction

const BottomNavigationAction: ((props: any) => JSX.Element) &
    OverridableComponent<
        ExtendButtonBaseTypeMap<BottomNavigationActionTypeMap<{}, 'button'>>
    >;

Demos:
- [Bottom Navigation](https://mui.com/components/bottom-navigation/)
API:
- [BottomNavigationAction API](https://mui.com/api/bottom-navigation-action/) - inherits [ButtonBase API](https://mui.com/api/button-base/)

variable Box

const Box: React.ComponentType<BoxProps>;

const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap<{}, 'nav'>>;

Demos:
- [Breadcrumbs](https://mui.com/components/breadcrumbs/)
API:
- [Breadcrumbs API](https://mui.com/api/breadcrumbs/)

variable Button

const Button: ((props: any) => JSX.Element) &
    OverridableComponent<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, 'button'>>>;

Demos:
- [Button Group](https://mui.com/components/button-group/) - [Buttons](https://mui.com/components/buttons/)
API:
- [Button API](https://mui.com/api/button/) - inherits [ButtonBase API](https://mui.com/api/button-base/)

variable ButtonBase

const ButtonBase: ((props: any) => JSX.Element) &
    OverridableComponent<ExtendButtonBaseTypeMap<ButtonBaseTypeMap<{}, 'button'>>>;

ButtonBase contains as few styles as possible. It aims to be a simple building block for creating a button. It contains a load of style reset and some focus/ripple logic. Demos:
- [Buttons](https://mui.com/components/buttons/)
API:
- [ButtonBase API](https://mui.com/api/button-base/)

variable ButtonGroup

const ButtonGroup: OverridableComponent<ButtonGroupTypeMap<{}, 'div'>>;

Demos:
- [Button Group](https://mui.com/components/button-group/)
API:
- [ButtonGroup API](https://mui.com/api/button-group/)

variable CardActionArea

const CardActionArea: ((props: any) => JSX.Element) &
    OverridableComponent<
        ExtendButtonBaseTypeMap<CardActionAreaTypeMap<{}, 'button'>>
    >;

Demos:
- [Cards](https://mui.com/components/cards/)
API:
- [CardActionArea API](https://mui.com/api/card-action-area/) - inherits [ButtonBase API](https://mui.com/api/button-base/)

variable CardContent

const CardContent: OverridableComponent<CardContentTypeMap<{}, 'div'>>;

Demos:
- [Cards](https://mui.com/components/cards/)
API:
- [CardContent API](https://mui.com/api/card-content/)

variable CardHeader

const CardHeader: OverridableCardHeader;

Demos:
- [Cards](https://mui.com/components/cards/)
API:
- [CardHeader API](https://mui.com/api/card-header/)

variable CardMedia

const CardMedia: OverridableComponent<CardMediaTypeMap<{}, 'div'>>;

Demos:
- [Cards](https://mui.com/components/cards/)
API:
- [CardMedia API](https://mui.com/api/card-media/)

variable Chip

const Chip: OverridableComponent<ChipTypeMap<{}, 'div'>>;

Chips represent complex entities in small blocks, such as a contact. Demos:
- [Chips](https://mui.com/components/chips/)
API:
- [Chip API](https://mui.com/api/chip/)

variable Container

const Container: OverridableComponent<ContainerTypeMap<{}, 'div'>>;

Demos:
- [Container](https://mui.com/components/container/)
API:
- [Container API](https://mui.com/api/container/)

variable DialogContentText

const DialogContentText: OverridableComponent<DialogContentTextTypeMap<{}, 'span'>>;

Demos:
- [Dialogs](https://mui.com/components/dialogs/)
API:
- [DialogContentText API](https://mui.com/api/dialog-content-text/) - inherits [Typography API](https://mui.com/api/typography/)

variable Divider

const Divider: OverridableComponent<DividerTypeMap<{}, 'hr'>>;

Demos:
- [Dividers](https://mui.com/components/dividers/) - [Lists](https://mui.com/components/lists/)
API:
- [Divider API](https://mui.com/api/divider/)

variable duration

const duration: Duration;

variable easing

const easing: Easing;

variable ExpansionPanelSummary

const ExpansionPanelSummary: ((props: any) => JSX.Element) &
    OverridableComponent<
        ExtendButtonBaseTypeMap<ExpansionPanelSummaryTypeMap<{}, 'div'>>
    >;

⚠️ The ExpansionPanelSummary component was renamed to AccordionSummary to use a more common naming convention.
You should use import { AccordionSummary } from '@material-ui/core' or import AccordionSummary from '@material-ui/core/AccordionSummary'. API:
- [ExpansionPanelSummary API](https://mui.com/api/expansion-panel-summary/) - inherits [ButtonBase API](https://mui.com/api/button-base/)

variable Fab

const Fab: ((props: any) => JSX.Element) &
    OverridableComponent<ExtendButtonBaseTypeMap<FabTypeMap<{}, 'button'>>>;

Demos:
- [Floating Action Button](https://mui.com/components/floating-action-button/)
API:
- [Fab API](https://mui.com/api/fab/) - inherits [ButtonBase API](https://mui.com/api/button-base/)

variable FormControl

const FormControl: OverridableComponent<FormControlTypeMap<{}, 'div'>>;

Provides context such as filled/focused/error/required for form inputs. Relying on the context provides high flexibility and ensures that the state always stays consistent across the children of the FormControl. This context is used by the following components:
- FormLabel - FormHelperText - Input - InputLabel
You can find one composition example below and more going to [the demos](https://mui.com/components/text-fields/#components).
<FormControl> <InputLabel htmlFor="my-input">Email address</InputLabel> <Input id="my-input" aria-describedby="my-helper-text" /> <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText> </FormControl>
⚠️Only one input can be used within a FormControl. Demos:
- [Checkboxes](https://mui.com/components/checkboxes/) - [Radio Buttons](https://mui.com/components/radio-buttons/) - [Switches](https://mui.com/components/switches/) - [Text Fields](https://mui.com/components/text-fields/)
API:
- [FormControl API](https://mui.com/api/form-control/)

variable FormHelperText

const FormHelperText: OverridableComponent<FormHelperTextTypeMap<{}, 'p'>>;

Demos:
- [Text Fields](https://mui.com/components/text-fields/)
API:
- [FormHelperText API](https://mui.com/api/form-helper-text/)

variable FormLabel

const FormLabel: OverridableComponent<FormLabelTypeMap<{}, 'label'>>;

Demos:
- [Checkboxes](https://mui.com/components/checkboxes/) - [Radio Buttons](https://mui.com/components/radio-buttons/) - [Switches](https://mui.com/components/switches/)
API:
- [FormLabel API](https://mui.com/api/form-label/)

variable Grid

const Grid: OverridableComponent<GridTypeMap<{}, 'div'>>;

Demos:
- [Grid](https://mui.com/components/grid/)
API:
- [Grid API](https://mui.com/api/grid/)

variable GridList

const GridList: OverridableComponent<GridListTypeMap<{}, 'ul'>>;

⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.
You should use import { ImageList } from '@material-ui/core' or import ImageList from '@material-ui/core/ImageList'. API:
- [GridList API](https://mui.com/api/grid-list/)

variable GridListTile

const GridListTile: OverridableComponent<GridListTileTypeMap<{}, 'li'>>;

⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.
You should use import { ImageListItem } from '@material-ui/core' or import ImageListItem from '@material-ui/core/ImageListItem'. API:
- [GridListTile API](https://mui.com/api/grid-list-tile/)

variable Hidden

const Hidden: React.ComponentType<HiddenProps>;

Responsively hides children based on the selected implementation. Demos:
- [Hidden](https://mui.com/components/hidden/)
API:
- [Hidden API](https://mui.com/api/hidden/)

variable Icon

const Icon: OverridableComponent<IconTypeMap<{}, 'span'>>;

Demos:
- [Icons](https://mui.com/components/icons/) - [Material Icons](https://mui.com/components/material-icons/)
API:
- [Icon API](https://mui.com/api/icon/)

variable IconButton

const IconButton: ((props: any) => JSX.Element) &
    OverridableComponent<ExtendButtonBaseTypeMap<IconButtonTypeMap<{}, 'button'>>>;

Refer to the [Icons](https://mui.com/components/icons/) section of the documentation regarding the available icon options. Demos:
- [Buttons](https://mui.com/components/buttons/)
API:
- [IconButton API](https://mui.com/api/icon-button/) - inherits [ButtonBase API](https://mui.com/api/button-base/)

variable ImageList

const ImageList: OverridableComponent<ImageListTypeMap<{}, 'ul'>>;

Demos:
- [Image List](https://mui.com/components/image-list/)
API:
- [ImageList API](https://mui.com/api/image-list/)

variable ImageListItem

const ImageListItem: OverridableComponent<ImageListItemTypeMap<{}, 'li'>>;

Demos:
- [Image List](https://mui.com/components/image-list/)
API:
- [ImageListItem API](https://mui.com/api/image-list-item/)

variable InputAdornment

const InputAdornment: OverridableComponent<InputAdornmentTypeMap<{}, 'div'>>;

Demos:
- [Text Fields](https://mui.com/components/text-fields/)
API:
- [InputAdornment API](https://mui.com/api/input-adornment/)

variable Link

const Link: OverridableComponent<LinkTypeMap<{}, 'a'>>;

Demos:
- [Breadcrumbs](https://mui.com/components/breadcrumbs/) - [Links](https://mui.com/components/links/)
API:
- [Link API](https://mui.com/api/link/) - inherits [Typography API](https://mui.com/api/typography/)

variable List

const List: OverridableComponent<ListTypeMap<{}, 'ul'>>;

Demos:
- [Lists](https://mui.com/components/lists/) - [Transfer List](https://mui.com/components/transfer-list/)
API:
- [List API](https://mui.com/api/list/)

variable ListItem

const ListItem: OverridableComponent<ListItemTypeMap<{ button?: false }, 'li'>> &
    ((props: any) => JSX.Element) &
    OverridableComponent<
        ExtendButtonBaseTypeMap<ListItemTypeMap<{ button: true }, 'div'>>
    >;

Uses an additional container component if ListItemSecondaryAction is the last child. Demos:
- [Lists](https://mui.com/components/lists/) - [Transfer List](https://mui.com/components/transfer-list/)
API:
- [ListItem API](https://mui.com/api/list-item/)

variable ListSubheader

const ListSubheader: OverridableComponent<ListSubheaderTypeMap<{}, 'li'>>;

Demos:
- [Lists](https://mui.com/components/lists/)
API:
- [ListSubheader API](https://mui.com/api/list-subheader/)

variable MenuItem

const MenuItem: OverridableComponent<any> &
    ((props: any) => JSX.Element) &
    OverridableComponent<ExtendButtonBaseTypeMap<any>>;

Demos:
- [Menus](https://mui.com/components/menus/)
API:
- [MenuItem API](https://mui.com/api/menu-item/) - inherits [ListItem API](https://mui.com/api/list-item/)

const Modal: React.ComponentType<ModalProps>;

Modal is a lower-level construct that is leveraged by the following components:
- [Dialog](https://mui.com/api/dialog/) - [Drawer](https://mui.com/api/drawer/) - [Menu](https://mui.com/api/menu/) - [Popover](https://mui.com/api/popover/)
If you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/api/dialog/) component rather than directly using Modal.
This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals). Demos:
- [Modal](https://mui.com/components/modal/)
API:
- [Modal API](https://mui.com/api/modal/)

variable RootRef

const RootRef: React.ComponentType<RootRefProps<any>>;

⚠️⚠️⚠️ If you want the DOM element of a Material-UI component check out [FAQ: How can I access the DOM element?](https://mui.com/getting-started/faq/#how-can-i-access-the-dom-element) first.
This component uses findDOMNode which is deprecated in React.StrictMode.
Helper component to allow attaching a ref to a wrapped element to access the underlying DOM element.
It's highly inspired by <https://github.com/facebook/react/issues/11401#issuecomment-340543801>. For example:
import React from 'react'; import RootRef from '@material-ui/core/RootRef'; function MyComponent() { const domRef = React.useRef(); React.useEffect(() => { console.log(domRef.current); // DOM node }, []); return ( <RootRef rootRef={domRef}> <SomeChildComponent /> </RootRef> ); }
Deprecated
API:
- [RootRef API](https://mui.com/api/root-ref/)

variable Slider

const Slider: OverridableComponent<SliderTypeMap<{}, 'span'>>;

Demos:
- [Slider](https://mui.com/components/slider/)
API:
- [Slider API](https://mui.com/api/slider/)

variable StepButton

const StepButton: ((props: any) => JSX.Element) &
    OverridableComponent<ExtendButtonBaseTypeMap<StepButtonTypeMap<{}, 'button'>>>;

Demos:
- [Steppers](https://mui.com/components/steppers/)
API:
- [StepButton API](https://mui.com/api/step-button/) - inherits [ButtonBase API](https://mui.com/api/button-base/)

variable SvgIcon

const SvgIcon: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;

Demos:
- [Icons](https://mui.com/components/icons/) - [Material Icons](https://mui.com/components/material-icons/)
API:
- [SvgIcon API](https://mui.com/api/svg-icon/)

variable SwipeableDrawer

const SwipeableDrawer: React.ComponentType<SwipeableDrawerProps>;

Demos:
- [Drawers](https://mui.com/components/drawers/)
API:
- [SwipeableDrawer API](https://mui.com/api/swipeable-drawer/) - inherits [Drawer API](https://mui.com/api/drawer/)

variable Tab

const Tab: ((props: any) => JSX.Element) &
    OverridableComponent<ExtendButtonBaseTypeMap<TabTypeMap<{}, 'div'>>>;

Demos:
- [Tabs](https://mui.com/components/tabs/)
API:
- [Tab API](https://mui.com/api/tab/) - inherits [ButtonBase API](https://mui.com/api/button-base/)

variable Table

const Table: OverridableComponent<TableTypeMap<{}, 'table'>>;

Demos:
- [Tables](https://mui.com/components/tables/)
API:
- [Table API](https://mui.com/api/table/)

variable TableBody

const TableBody: OverridableComponent<TableBodyTypeMap<{}, 'tbody'>>;

Demos:
- [Tables](https://mui.com/components/tables/)
API:
- [TableBody API](https://mui.com/api/table-body/)

variable TableContainer

const TableContainer: OverridableComponent<TableContainerTypeMap<{}, 'div'>>;

Demos:
- [Tables](https://mui.com/components/tables/)
API:
- [TableContainer API](https://mui.com/api/table-container/)

variable TableFooter

const TableFooter: OverridableComponent<TableFooterTypeMap<{}, 'tfoot'>>;

Demos:
- [Tables](https://mui.com/components/tables/)
API:
- [TableFooter API](https://mui.com/api/table-footer/)

variable TableHead

const TableHead: OverridableComponent<TableHeadTypeMap<{}, 'thead'>>;

Demos:
- [Tables](https://mui.com/components/tables/)
API:
- [TableHead API](https://mui.com/api/table-head/)

variable TablePagination

const TablePagination: OverridableComponent<
    TablePaginationTypeMap<
        {},
        React.ComponentType<Omit<TableCellProps, 'classes' | 'component'>>
    >
>;

A TableCell based component for placing inside TableFooter for pagination. Demos:
- [Tables](https://mui.com/components/tables/)
API:
- [TablePagination API](https://mui.com/api/table-pagination/) - inherits [TableCell API](https://mui.com/api/table-cell/)

variable TableRow

const TableRow: OverridableComponent<TableRowTypeMap<{}, 'tr'>>;

Will automatically set dynamic row height based on the material table element parent (head, body, etc). Demos:
- [Tables](https://mui.com/components/tables/)
API:
- [TableRow API](https://mui.com/api/table-row/)

variable TableSortLabel

const TableSortLabel: ((props: any) => JSX.Element) &
    OverridableComponent<ExtendButtonBaseTypeMap<TableSortLabelTypeMap<{}, 'span'>>>;

A button based label for placing inside TableCell for column sorting. Demos:
- [Tables](https://mui.com/components/tables/)
API:
- [TableSortLabel API](https://mui.com/api/table-sort-label/) - inherits [ButtonBase API](https://mui.com/api/button-base/)

variable Tabs

const Tabs: OverridableComponent<
    TabsTypeMap<{}, ExtendButtonBase<ButtonBaseTypeMap<{}, 'button'>>>
>;

Demos:
- [Tabs](https://mui.com/components/tabs/)
API:
- [Tabs API](https://mui.com/api/tabs/)

const Toolbar: OverridableComponent<ToolbarTypeMap<{}, 'div'>>;

Demos:
- [App Bar](https://mui.com/components/app-bar/)
API:
- [Toolbar API](https://mui.com/api/toolbar/)

variable Typography

const Typography: OverridableComponent<TypographyTypeMap<{}, 'span'>>;

Demos:
- [Breadcrumbs](https://mui.com/components/breadcrumbs/) - [Typography](https://mui.com/components/typography/)
API:
- [Typography API](https://mui.com/api/typography/)

variable withTheme

const withTheme: PropInjector<WithTheme, ThemedComponentProps>;

Functions

function Accordion

Accordion: (props: AccordionProps) => JSX.Element;

Demos:
- [Accordion](https://mui.com/components/accordion/)
API:
- [Accordion API](https://mui.com/api/accordion/) - inherits [Paper API](https://mui.com/api/paper/)

function AccordionActions

AccordionActions: (props: AccordionActionsProps) => JSX.Element;

Demos:
- [Accordion](https://mui.com/components/accordion/)
API:
- [AccordionActions API](https://mui.com/api/accordion-actions/)

function AccordionDetails

AccordionDetails: (props: AccordionDetailsProps) => JSX.Element;

Demos:
- [Accordion](https://mui.com/components/accordion/)
API:
- [AccordionDetails API](https://mui.com/api/accordion-details/)

function alpha

alpha: (color: string, value: number) => string;

function AppBar

AppBar: (props: AppBarProps) => JSX.Element;

Demos:
- [App Bar](https://mui.com/components/app-bar/)
API:
- [AppBar API](https://mui.com/api/app-bar/) - inherits [Paper API](https://mui.com/api/paper/)

function Backdrop

Backdrop: (props: BackdropProps) => JSX.Element;

Demos:
- [Backdrop](https://mui.com/components/backdrop/)
API:
- [Backdrop API](https://mui.com/api/backdrop/) - inherits [Fade API](https://mui.com/api/fade/)

function capitalize

capitalize: (string: string) => string;

function Card

Card: (props: CardProps) => JSX.Element;

Demos:
- [Cards](https://mui.com/components/cards/)
API:
- [Card API](https://mui.com/api/card/) - inherits [Paper API](https://mui.com/api/paper/)

function CardActions

CardActions: (props: CardActionsProps) => JSX.Element;

Demos:
- [Cards](https://mui.com/components/cards/)
API:
- [CardActions API](https://mui.com/api/card-actions/)

function Checkbox

Checkbox: (props: CheckboxProps) => JSX.Element;

Demos:
- [Checkboxes](https://mui.com/components/checkboxes/) - [Transfer List](https://mui.com/components/transfer-list/)
API:
- [Checkbox API](https://mui.com/api/checkbox/) - inherits [IconButton API](https://mui.com/api/icon-button/)

function CircularProgress

CircularProgress: (props: CircularProgressProps) => JSX.Element;

## ARIA
If the progress bar is describing the loading progress of a particular region of a page, you should use aria-describedby to point to the progress bar, and set the aria-busy attribute to true on that region until it has finished loading. Demos:
- [Progress](https://mui.com/components/progress/)
API:
- [CircularProgress API](https://mui.com/api/circular-progress/)

function ClickAwayListener

ClickAwayListener: (props: ClickAwayListenerProps) => JSX.Element;

Listen for click events that occur somewhere in the document, outside of the element itself. For instance, if you need to hide a menu when people click anywhere else on your page. Demos:
- [Click Away Listener](https://mui.com/components/click-away-listener/) - [Menus](https://mui.com/components/menus/)
API:
- [ClickAwayListener API](https://mui.com/api/click-away-listener/)

function Collapse

Collapse: (props: CollapseProps) => JSX.Element;

The Collapse transition is used by the [Vertical Stepper](https://mui.com/components/steppers/#vertical-stepper) StepContent component. It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. Demos:
- [Cards](https://mui.com/components/cards/) - [Lists](https://mui.com/components/lists/) - [Transitions](https://mui.com/components/transitions/)
API:
- [Collapse API](https://mui.com/api/collapse/) - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props)

function createChainedFunction

createChainedFunction: (
    ...funcs: ChainedFunction[]
) => (...args: any[]) => never;

function createMuiTheme

createMuiTheme: (options?: ThemeOptions, ...args: object[]) => Theme;

Deprecated
Use import { createTheme } from '@material-ui/core/styles' instead.

function createSvgIcon

createSvgIcon: (path: React.ReactNode, displayName: string) => any;

function createTheme

createTheme: (options?: ThemeOptions, ...args: object[]) => Theme;

function CssBaseline

CssBaseline: (props: CssBaselineProps) => JSX.Element;

Kickstart an elegant, consistent, and simple baseline to build upon. Demos:
- [Css Baseline](https://mui.com/components/css-baseline/)
API:
- [CssBaseline API](https://mui.com/api/css-baseline/)

function darken

darken: (color: string, coefficient: number) => string;

function debounce

debounce: <T extends (...args: any[]) => any>(
    func: T,
    wait?: number
) => T & Cancelable;

function decomposeColor

decomposeColor: (color: string) => ColorObject;

function deprecatedPropType

deprecatedPropType: <T>(validator: T, reason: string) => T;

function Dialog

Dialog: (props: DialogProps) => JSX.Element;

Dialogs are overlaid modal paper based components with a backdrop. Demos:
- [Dialogs](https://mui.com/components/dialogs/)
API:
- [Dialog API](https://mui.com/api/dialog/) - inherits [Modal API](https://mui.com/api/modal/)

function DialogActions

DialogActions: (props: DialogActionsProps) => JSX.Element;

Demos:
- [Dialogs](https://mui.com/components/dialogs/)
API:
- [DialogActions API](https://mui.com/api/dialog-actions/)

function DialogContent

DialogContent: (props: DialogContentProps) => JSX.Element;

Demos:
- [Dialogs](https://mui.com/components/dialogs/)
API:
- [DialogContent API](https://mui.com/api/dialog-content/)

function DialogTitle

DialogTitle: (props: DialogTitleProps) => JSX.Element;

Demos:
- [Dialogs](https://mui.com/components/dialogs/)
API:
- [DialogTitle API](https://mui.com/api/dialog-title/)

function Drawer

Drawer: (props: DrawerProps) => JSX.Element;

The props of the [Modal](https://mui.com/api/modal/) component are available when variant="temporary" is set. Demos:
- [Drawers](https://mui.com/components/drawers/)
API:
- [Drawer API](https://mui.com/api/drawer/)

function emphasize

emphasize: (color: string, coefficient?: number) => string;

function ExpansionPanel

ExpansionPanel: (props: ExpansionPanelProps) => JSX.Element;

⚠️ The ExpansionPanel component was renamed to Accordion to use a more common naming convention.
You should use import { Accordion } from '@material-ui/core' or import Accordion from '@material-ui/core/Accordion'. API:
- [ExpansionPanel API](https://mui.com/api/expansion-panel/) - inherits [Paper API](https://mui.com/api/paper/)

function ExpansionPanelActions

ExpansionPanelActions: (props: ExpansionPanelActionsProps) => JSX.Element;

⚠️ The ExpansionPanelActions component was renamed to AccordionActions to use a more common naming convention.
You should use import { AccordionActions } from '@material-ui/core' or import AccordionActions from '@material-ui/core/AccordionActions'. API:
- [ExpansionPanelActions API](https://mui.com/api/expansion-panel-actions/)

function ExpansionPanelDetails

ExpansionPanelDetails: (props: ExpansionPanelDetailsProps) => JSX.Element;

⚠️ The ExpansionPanelDetails component was renamed to AccordionDetails to use a more common naming convention.
You should use import { AccordionDetails } from '@material-ui/core' or import AccordionDetails from '@material-ui/core/AccordionDetails'. API:
- [ExpansionPanelDetails API](https://mui.com/api/expansion-panel-details/)

function fade

fade: (color: string, value: number) => string;

Deprecated
Use import { alpha } from '@material-ui/core/styles' instead.

function Fade

Fade: (props: FadeProps) => JSX.Element;

The Fade transition is used by the [Modal](https://mui.com/components/modal/) component. It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. Demos:
- [Transitions](https://mui.com/components/transitions/)
API:
- [Fade API](https://mui.com/api/fade/) - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props)

function FilledInput

FilledInput: (props: FilledInputProps) => JSX.Element;

Demos:
- [Text Fields](https://mui.com/components/text-fields/)
API:
- [FilledInput API](https://mui.com/api/filled-input/) - inherits [InputBase API](https://mui.com/api/input-base/)

function formatMs

formatMs: (milliseconds: number) => string;

function FormControlLabel

FormControlLabel: (props: FormControlLabelProps) => JSX.Element;

Drop in replacement of the Radio, Switch and Checkbox component. Use this component if you want to display an extra label. Demos:
- [Checkboxes](https://mui.com/components/checkboxes/) - [Radio Buttons](https://mui.com/components/radio-buttons/) - [Switches](https://mui.com/components/switches/)
API:
- [FormControlLabel API](https://mui.com/api/form-control-label/)

function FormGroup

FormGroup: (props: FormGroupProps) => JSX.Element;

FormGroup wraps controls such as Checkbox and Switch. It provides compact row layout. For the Radio, you should be using the RadioGroup component instead of this one. Demos:
- [Checkboxes](https://mui.com/components/checkboxes/) - [Switches](https://mui.com/components/switches/)
API:
- [FormGroup API](https://mui.com/api/form-group/)

function getContrastRatio

getContrastRatio: (foreground: string, background: string) => number;

function getLuminance

getLuminance: (color: string) => number;

function GridListTileBar

GridListTileBar: (props: GridListTileBarProps) => JSX.Element;

⚠️ The GridListTileBar component was renamed to ImageListItemBar to align with the current Material Design naming.
You should use import { ImageListItemBar } from '@material-ui/core' or import ImageListItemBar from '@material-ui/core/ImageListItemBar'. API:
- [GridListTileBar API](https://mui.com/api/grid-list-tile-bar/)

function Grow

Grow: (props: GrowProps) => JSX.Element;

The Grow transition is used by the [Tooltip](https://mui.com/components/tooltips/) and [Popover](https://mui.com/components/popover/) components. It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. Demos:
- [Popover](https://mui.com/components/popover/) - [Transitions](https://mui.com/components/transitions/)
API:
- [Grow API](https://mui.com/api/grow/) - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props)

function hexToRgb

hexToRgb: (hex: string) => string;

function hslToRgb

hslToRgb: (color: string) => string;

function ImageListItemBar

ImageListItemBar: (props: ImageListItemBarProps) => JSX.Element;

Demos:
- [Image List](https://mui.com/components/image-list/)
API:
- [ImageListItemBar API](https://mui.com/api/image-list-item-bar/)

function Input

Input: (props: InputProps) => JSX.Element;

Demos:
- [Text Fields](https://mui.com/components/text-fields/)
API:
- [Input API](https://mui.com/api/input/) - inherits [InputBase API](https://mui.com/api/input-base/)

function InputBase

InputBase: (props: InputBaseProps) => JSX.Element;

InputBase contains as few styles as possible. It aims to be a simple building block for creating an input. It contains a load of style reset and some state logic. Demos:
- [Text Fields](https://mui.com/components/text-fields/)
API:
- [InputBase API](https://mui.com/api/input-base/)

function InputLabel

InputLabel: (props: InputLabelProps) => JSX.Element;

Demos:
- [Text Fields](https://mui.com/components/text-fields/)
API:
- [InputLabel API](https://mui.com/api/input-label/) - inherits [FormLabel API](https://mui.com/api/form-label/)

function isMuiElement

isMuiElement: (element: any, muiNames: string[]) => element is NamedMuiElement;

function isWidthDown

isWidthDown: (
    breakpoint: OverridableStringUnion<BreakpointDefaults, BreakpointOverrides>,
    screenWidth: OverridableStringUnion<BreakpointDefaults, BreakpointOverrides>,
    inclusive?: boolean
) => boolean;

function isWidthUp

isWidthUp: (
    breakpoint: OverridableStringUnion<BreakpointDefaults, BreakpointOverrides>,
    screenWidth: OverridableStringUnion<BreakpointDefaults, BreakpointOverrides>,
    inclusive?: boolean
) => boolean;

function lighten

lighten: (color: string, coefficient: number) => string;

function LinearProgress

LinearProgress: (props: LinearProgressProps) => JSX.Element;

## ARIA
If the progress bar is describing the loading progress of a particular region of a page, you should use aria-describedby to point to the progress bar, and set the aria-busy attribute to true on that region until it has finished loading. Demos:
- [Progress](https://mui.com/components/progress/)
API:
- [LinearProgress API](https://mui.com/api/linear-progress/)

function ListItemAvatar

ListItemAvatar: (props: ListItemAvatarProps) => JSX.Element;

A simple wrapper to apply List styles to an Avatar. Demos:
- [Lists](https://mui.com/components/lists/)
API:
- [ListItemAvatar API](https://mui.com/api/list-item-avatar/)

function ListItemIcon

ListItemIcon: (props: ListItemIconProps) => JSX.Element;

A simple wrapper to apply List styles to an Icon or SvgIcon. Demos:
- [Lists](https://mui.com/components/lists/)
API:
- [ListItemIcon API](https://mui.com/api/list-item-icon/)

function ListItemSecondaryAction

ListItemSecondaryAction: (props: ListItemSecondaryActionProps) => JSX.Element;

Must be used as the last child of ListItem to function properly. Demos:
- [Lists](https://mui.com/components/lists/)
API:
- [ListItemSecondaryAction API](https://mui.com/api/list-item-secondary-action/)

function ListItemText

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

Demos:
- [Lists](https://mui.com/components/lists/)
API:
- [ListItemText API](https://mui.com/api/list-item-text/)

function makeStyles

makeStyles: <
    Theme = DefaultTheme,
    Props extends object = {},
    ClassKey extends string = string
>(
    styles: Styles<Theme, Props, ClassKey>,
    options?: Omit<WithStylesOptions<Theme>, 'withTheme'>
) => keyof Props extends never
    ? (props?: any) => ClassNameMap<ClassKey>
    : (props: Props) => ClassNameMap<ClassKey>;

Menu: (props: MenuProps) => JSX.Element;

Demos:
- [App Bar](https://mui.com/components/app-bar/) - [Menus](https://mui.com/components/menus/)
API:
- [Menu API](https://mui.com/api/menu/) - inherits [Popover API](https://mui.com/api/popover/)

function MenuList

MenuList: (props: MenuListProps) => JSX.Element;

A permanently displayed menu following <https://www.w3.org/TR/wai-aria-practices/#menubutton>. It's exposed to help customization of the [Menu](https://mui.com/api/menu/) component. If you use it separately you need to move focus into the component manually. Once the focus is placed inside the component it is fully keyboard accessible. Demos:
- [Menus](https://mui.com/components/menus/)
API:
- [MenuList API](https://mui.com/api/menu-list/) - inherits [List API](https://mui.com/api/list/)

function MobileStepper

MobileStepper: (props: MobileStepperProps) => JSX.Element;

Demos:
- [Steppers](https://mui.com/components/steppers/)
API:
- [MobileStepper API](https://mui.com/api/mobile-stepper/) - inherits [Paper API](https://mui.com/api/paper/)

function NativeSelect

NativeSelect: (props: NativeSelectProps) => JSX.Element;

An alternative to <Select native /> with a much smaller bundle size footprint. Demos:
- [Selects](https://mui.com/components/selects/)
API:
- [NativeSelect API](https://mui.com/api/native-select/) - inherits [Input API](https://mui.com/api/input/)

function NoSsr

NoSsr: (props: NoSsrProps) => JSX.Element;

NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
This component can be useful in a variety of situations:
- Escape hatch for broken dependencies not supporting SSR. - Improve the time-to-first paint on the client by only rendering above the fold. - Reduce the rendering time on the server. - Under too heavy server load, you can turn on service degradation. Demos:
- [No Ssr](https://mui.com/components/no-ssr/)
API:
- [NoSsr API](https://mui.com/api/no-ssr/)

function OutlinedInput

OutlinedInput: (props: OutlinedInputProps) => JSX.Element;

Demos:
- [Text Fields](https://mui.com/components/text-fields/)
API:
- [OutlinedInput API](https://mui.com/api/outlined-input/) - inherits [InputBase API](https://mui.com/api/input-base/)

function ownerDocument

ownerDocument: (node?: Node) => Document;

function ownerWindow

ownerWindow: (node?: Node) => Window;

function Paper

Paper: (props: PaperProps) => JSX.Element;

Demos:
- [Cards](https://mui.com/components/cards/) - [Paper](https://mui.com/components/paper/)
API:
- [Paper API](https://mui.com/api/paper/)

Popover: (props: PopoverProps) => JSX.Element;

Demos:
- [Menus](https://mui.com/components/menus/) - [Popover](https://mui.com/components/popover/)
API:
- [Popover API](https://mui.com/api/popover/) - inherits [Modal API](https://mui.com/api/modal/)

function Popper

Popper: (props: PopperProps) => JSX.Element;

Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v1/) for positioning. Demos:
- [Autocomplete](https://mui.com/components/autocomplete/) - [Menus](https://mui.com/components/menus/) - [Popper](https://mui.com/components/popper/)
API:
- [Popper API](https://mui.com/api/popper/)

function Portal

Portal: (props: PortalProps) => JSX.Element;

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Demos:
- [Portal](https://mui.com/components/portal/)
API:
- [Portal API](https://mui.com/api/portal/)

function Radio

Radio: (props: RadioProps) => JSX.Element;

Demos:
- [Radio Buttons](https://mui.com/components/radio-buttons/)
API:
- [Radio API](https://mui.com/api/radio/) - inherits [IconButton API](https://mui.com/api/icon-button/)

function RadioGroup

RadioGroup: (props: RadioGroupProps) => JSX.Element;

Demos:
- [Radio Buttons](https://mui.com/components/radio-buttons/)
API:
- [RadioGroup API](https://mui.com/api/radio-group/) - inherits [FormGroup API](https://mui.com/api/form-group/)

function recomposeColor

recomposeColor: (color: ColorObject) => string;

function requirePropFactory

requirePropFactory: (componentNameInError: string) => any;

function responsiveFontSizes

responsiveFontSizes: (
    theme: Theme,
    options?: ResponsiveFontSizesOptions
) => Theme;

function rgbToHex

rgbToHex: (color: string) => string;

function Select

Select: (props: SelectProps) => JSX.Element;

Demos:
- [Selects](https://mui.com/components/selects/)
API:
- [Select API](https://mui.com/api/select/) - inherits [Input API](https://mui.com/api/input/)

function setRef

setRef: <T>(ref: any, value: T | null) => void;

passes {value} to {ref}
WARNING: Be sure to only call this inside a callback that is passed as a ref. Otherwise make sure to cleanup previous {ref} if it changes. See https://github.com/mui-org/material-ui/issues/13539
useful if you want to expose the ref of an inner component to the public api while still using it inside the component
Parameter ref
a ref callback or ref object if anything falsy this is a no-op

function Slide

Slide: (props: SlideProps) => JSX.Element;

The Slide transition is used by the [Drawer](https://mui.com/components/drawers/) component. It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. Demos:
- [Dialogs](https://mui.com/components/dialogs/) - [Transitions](https://mui.com/components/transitions/)
API:
- [Slide API](https://mui.com/api/slide/) - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props)

function Snackbar

Snackbar: (props: SnackbarProps) => JSX.Element;

Demos:
- [Snackbars](https://mui.com/components/snackbars/)
API:
- [Snackbar API](https://mui.com/api/snackbar/)

function SnackbarContent

SnackbarContent: (props: SnackbarContentProps) => JSX.Element;

Demos:
- [Snackbars](https://mui.com/components/snackbars/)
API:
- [SnackbarContent API](https://mui.com/api/snackbar-content/) - inherits [Paper API](https://mui.com/api/paper/)

function Step

Step: (props: StepProps) => JSX.Element;

Demos:
- [Steppers](https://mui.com/components/steppers/)
API:
- [Step API](https://mui.com/api/step/)

function StepConnector

StepConnector: (props: StepConnectorProps) => JSX.Element;

Demos:
- [Steppers](https://mui.com/components/steppers/)
API:
- [StepConnector API](https://mui.com/api/step-connector/)

function StepContent

StepContent: (props: StepContentProps) => JSX.Element;

Demos:
- [Steppers](https://mui.com/components/steppers/)
API:
- [StepContent API](https://mui.com/api/step-content/)

function StepIcon

StepIcon: (props: StepIconProps) => JSX.Element;

Demos:
- [Steppers](https://mui.com/components/steppers/)
API:
- [StepIcon API](https://mui.com/api/step-icon/)

function StepLabel

StepLabel: (props: StepLabelProps) => JSX.Element;

Demos:
- [Steppers](https://mui.com/components/steppers/)
API:
- [StepLabel API](https://mui.com/api/step-label/)

function Stepper

Stepper: (props: StepperProps) => JSX.Element;

Demos:
- [Steppers](https://mui.com/components/steppers/)
API:
- [Stepper API](https://mui.com/api/stepper/) - inherits [Paper API](https://mui.com/api/paper/)

function styled

styled: <Component extends React.ElementType>(
    Component: Component
) => ComponentCreator<Component>;

function Switch

Switch: (props: SwitchProps) => JSX.Element;

Demos:
- [Switches](https://mui.com/components/switches/) - [Transfer List](https://mui.com/components/transfer-list/)
API:
- [Switch API](https://mui.com/api/switch/) - inherits [IconButton API](https://mui.com/api/icon-button/)

function TableCell

TableCell: (props: TableCellProps) => JSX.Element;

The component renders a <th> element when the parent context is a header or otherwise a <td> element. Demos:
- [Tables](https://mui.com/components/tables/)
API:
- [TableCell API](https://mui.com/api/table-cell/)

function TabScrollButton

TabScrollButton: (props: TabScrollButtonProps) => JSX.Element;

Demos:
- [Tabs](https://mui.com/components/tabs/)
API:
- [TabScrollButton API](https://mui.com/api/tab-scroll-button/)

function TextareaAutosize

TextareaAutosize: (props: TextareaAutosizeProps) => JSX.Element;

Demos:
- [Textarea Autosize](https://mui.com/components/textarea-autosize/)
API:
- [TextareaAutosize API](https://mui.com/api/textarea-autosize/)

function TextField

TextField: (props: TextFieldProps) => JSX.Element;

The TextField is a convenience wrapper for the most common cases (80%). It cannot be all things to all people, otherwise the API would grow out of control.
## Advanced Configuration
It's important to understand that the text field is a simple abstraction on top of the following components:
- [FormControl](https://mui.com/api/form-control/) - [InputLabel](https://mui.com/api/input-label/) - [FilledInput](https://mui.com/api/filled-input/) - [OutlinedInput](https://mui.com/api/outlined-input/) - [Input](https://mui.com/api/input/) - [FormHelperText](https://mui.com/api/form-helper-text/)
If you wish to alter the props applied to the input element, you can do so as follows:
const inputProps = { step: 300, }; return <TextField id="time" type="time" inputProps={inputProps} />;
For advanced cases, please look at the source of TextField by clicking on the "Edit this page" button above. Consider either:
- using the upper case props for passing values directly to the components - using the underlying components directly as shown in the demos Demos:
- [Autocomplete](https://mui.com/components/autocomplete/) - [Pickers](https://mui.com/components/pickers/) - [Text Fields](https://mui.com/components/text-fields/)
API:
- [TextField API](https://mui.com/api/text-field/) - inherits [FormControl API](https://mui.com/api/form-control/)

Tooltip: (props: TooltipProps) => JSX.Element;

Demos:
- [Tooltips](https://mui.com/components/tooltips/)
API:
- [Tooltip API](https://mui.com/api/tooltip/)

function unstable_createMuiStrictModeTheme

unstable_createMuiStrictModeTheme: (
    options?: ThemeOptions,
    ...args: object[]
) => Theme;

function Unstable_TrapFocus

Unstable_TrapFocus: (props: TrapFocusProps) => JSX.Element;

Utility component that locks focus inside the component. API:
- [Unstable_TrapFocus API](https://mui.com/api/unstable-trap-focus/)

function unsupportedProp

unsupportedProp: (
    props: { [key: string]: any },
    propName: string,
    componentName: string,
    location: string,
    propFullName: string
) => Error | null;

function useControlled

useControlled: <T = unknown>(
    props: UseControlledProps<T>
) => [T, (newValue: T) => void];

function useEventCallback

useEventCallback: (...args: any[]) => void;

function useForkRef

useForkRef: <T>(refA: React.Ref<T>, refB: React.Ref<T>) => React.Ref<T>;

function useFormControl

useFormControl: () => FormControlState | undefined;

function useIsFocusVisible

useIsFocusVisible: () => {
    isFocusVisible: (event: React.ChangeEvent) => boolean;
    onBlurVisible: () => void;
    ref: React.Ref<unknown>;
};

function useMediaQuery

useMediaQuery: <Theme = unknown>(
    query: string | ((theme: Theme) => string),
    options?: Options
) => boolean;

function useRadioGroup

useRadioGroup: () => RadioGroupState | undefined;

function useScrollTrigger

useScrollTrigger: (options?: UseScrollTriggerOptions) => boolean;

function useTheme

useTheme: <T = Theme>() => T;

function withMobileDialog

withMobileDialog: <P = {}>(
    options?: WithMobileDialogOptions
) => PropInjector<WithMobileDialog, Partial<WithMobileDialog>>;

function withStyles

withStyles: <
    ClassKey extends string,
    Options extends WithStylesOptions<Theme> = {},
    Props extends object = {}
>(
    style: Styles<Theme, Props, ClassKey>,
    options?: Options
) => PropInjector<WithStyles<ClassKey, Options['withTheme']>, any>;

function withWidth

withWidth: (
    options?: WithWidthOptions
) => PropInjector<WithWidth, WithWidthProps>;

function Zoom

Zoom: (props: ZoomProps) => JSX.Element;

The Zoom transition can be used for the floating variant of the [Button](https://mui.com/components/buttons/#floating-action-buttons) component. It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. Demos:
- [Transitions](https://mui.com/components/transitions/)
API:
- [Zoom API](https://mui.com/api/zoom/) - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props)

Classes

class ModalManager

class ModalManager {}

constructor

constructor(opts?: {
    hideSiblingNodes?: boolean;
    handleContainerOverflow?: boolean;
});

method add

add: (modal: any, container: any) => number;

method isTopModal

isTopModal: (modal: any) => boolean;

method remove

remove: (modal: any) => void;

Interfaces

interface AccordionActionsProps

interface AccordionActionsProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        AccordionActionsClassKey
    > {}

property children

children?: React.ReactNode;

The content of the component.

property disableSpacing

disableSpacing?: boolean;

If true, the actions do not have additional margin.

interface AccordionDetailsProps

interface AccordionDetailsProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        AccordionDetailsClassKey
    > {}

property children

children?: React.ReactNode;

The content of the accordion details.

interface AccordionProps

interface AccordionProps
    extends StandardProps<PaperProps, AccordionClassKey, 'onChange'> {}

property children

children: NonNullable<React.ReactNode>;

The content of the accordion.

property defaultExpanded

defaultExpanded?: boolean;

If true, expands the accordion by default.

property disabled

disabled?: boolean;

If true, the accordion will be displayed in a disabled state.

property expanded

expanded?: boolean;

If true, expands the accordion, otherwise collapse it. Setting this prop enables control over the accordion.

property onChange

onChange?: (event: React.ChangeEvent<{}>, expanded: boolean) => void;

Callback fired when the expand/collapse state is changed.
Parameter event
The event source of the callback.
Parameter expanded
The expanded state of the accordion.

property TransitionComponent

TransitionComponent?: React.ComponentType<
    TransitionProps & { children?: React.ReactElement<any, any> }
>;

The component used for the collapse effect. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

property TransitionProps

TransitionProps?: TransitionProps;

Props applied to the [Transition](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.

interface AppBarProps

interface AppBarProps extends StandardProps<PaperProps, AppBarClassKey> {}

property color

color?: PropTypes.Color | 'transparent';

The color of the component. It supports those theme colors that make sense for this component.

property position

position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';

The positioning type. The behavior of the different options is described [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: sticky is not universally supported and will fall back to static when unavailable.

interface AvatarTypeMap

interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: AvatarClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * Used in combination with `src` or `srcSet` to
     * provide an alt attribute for the rendered `img` element.
     */
    alt?: string;
    /**
     * Used to render icon or text elements inside the Avatar if `src` is not set.
     * This can be an element, or just a string.
     */
    children?: React.ReactNode;
    /**
     * Attributes applied to the `img` element if the component is used to display an image.
     * It can be used to listen for the loading error event.
     */
    imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
    /**
     * The `sizes` attribute for the `img` element.
     */
    sizes?: string;
    /**
     * The `src` attribute for the `img` element.
     */
    src?: string;
    /**
     * The `srcSet` attribute for the `img` element.
     * Use this attribute for responsive image display.
     */
    srcSet?: string;
    /**
     * The shape of the avatar.
     */
    variant?: 'circle' | 'circular' | 'rounded' | 'square';
};

interface BackdropProps

interface BackdropProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement> & Partial<Omit<FadeProps, 'children'>>,
        BackdropClassKey
    > {}

property children

children?: React.ReactNode;

The content of the component.

property invisible

invisible?: boolean;

If true, the backdrop is invisible. It can be used when rendering a popover or a custom select component.

property open

open: boolean;

If true, the backdrop is open.

property transitionDuration

transitionDuration?: TransitionProps['timeout'];

The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

interface BadgeOrigin

interface BadgeOrigin {}

property horizontal

horizontal: 'left' | 'right';

property vertical

vertical: 'top' | 'bottom';

interface BadgeTypeMap

interface BadgeTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: BadgeClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * The anchor of the badge.
     */
    anchorOrigin?: BadgeOrigin;
    /**
     * Wrapped shape the badge should overlap.
     */
    overlap?: 'rectangle' | 'circle' | 'rectangular' | 'circular';
    /**
     * The content rendered within the badge.
     */
    badgeContent?: React.ReactNode;
    /**
     * The badge will be added relative to this node.
     */
    children?: React.ReactNode;
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color?: 'primary' | 'secondary' | 'default' | 'error';
    /**
     * If `true`, the badge will be invisible.
     */
    invisible?: boolean;
    /**
     * Max count to show.
     */
    max?: number;
    /**
     * Controls whether the badge is hidden when `badgeContent` is zero.
     */
    showZero?: boolean;
    /**
     * The variant to use.
     */
    variant?: 'standard' | 'dot';
};

interface BaseTextFieldProps

interface BaseTextFieldProps
    extends StandardProps<
        FormControlProps,
        TextFieldClassKey,
        // event handlers are declared on derived interfaces
        'onChange' | 'onBlur' | 'onFocus' | 'defaultValue'
    > {}

property autoComplete

autoComplete?: string;

This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).

property autoFocus

autoFocus?: boolean;

If true, the input element will be focused during the first mount.

property children

children?: React.ReactNode;

property color

color?: 'primary' | 'secondary';

The color of the component. It supports those theme colors that make sense for this component.

property defaultValue

defaultValue?: unknown;

The default value of the input element.

property disabled

disabled?: boolean;

If true, the input element will be disabled.

property error

error?: boolean;

If true, the label will be displayed in an error state.

property FormHelperTextProps

FormHelperTextProps?: Partial<FormHelperTextProps>;

Props applied to the [FormHelperText](/api/form-helper-text/) element.

property fullWidth

fullWidth?: boolean;

If true, the input will take up the full width of its container.

property helperText

helperText?: React.ReactNode;

The helper text content.

property id

id?: string;

The id of the input element. Use this prop to make label and helperText accessible for screen readers.

property InputLabelProps

InputLabelProps?: Partial<InputLabelProps>;

Props applied to the [InputLabel](/api/input-label/) element.

property inputRef

inputRef?: React.Ref<any>;

Pass a ref to the input element.

property label

label?: React.ReactNode;

The label content.

property margin

margin?: PropTypes.Margin;

If dense or normal, will adjust vertical spacing of this and contained components.

property maxRows

maxRows?: string | number;

Maximum number of rows to display when multiline option is set to true.

property minRows

minRows?: string | number;

Minimum number of rows to display.

property multiline

multiline?: boolean;

If true, a textarea element will be rendered instead of an input.

property name

name?: string;

Name attribute of the input element.

property placeholder

placeholder?: string;

The short hint displayed in the input before the user enters a value.

property required

required?: boolean;

If true, the label is displayed as required and the input element` will be required.

property rows

rows?: string | number;

Number of rows to display when multiline option is set to true.
Deprecated
Use minRows instead.

property rowsMax

rowsMax?: string | number;

Maximum number of rows to display.
Deprecated
Use maxRows instead.

property select

select?: boolean;

Render a [Select](/api/select/) element while passing the Input element to Select as input parameter. If this option is set you must pass the options of the select as children.

property SelectProps

SelectProps?: Partial<SelectProps>;

Props applied to the [Select](/api/select/) element.

property size

size?: 'small' | 'medium';

The size of the text field.

property type

type?: React.InputHTMLAttributes<unknown>['type'];

Type of the input element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).

property value

value?: unknown;

The value of the input element, required for a controlled component.

interface BottomNavigationTypeMap

interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: BottomNavigationClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * The content of the component.
     */
    children?: React.ReactNode;
    /**
     * Callback fired when the value changes.
     *
     * @param {object} event The event source of the callback.
     * @param {any} value We default to the index of the child.
     */
    onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
    /**
     * If `true`, all `BottomNavigationAction`s will show their labels.
     * By default, only the selected `BottomNavigationAction` will show its label.
     */
    showLabels?: boolean;
    /**
     * The value of the currently selected `BottomNavigationAction`.
     */
    value?: any;
};

interface BoxProps

interface BoxProps extends ElementProps, SystemProps {}

property clone

clone?: boolean;

property component

component?: React.ElementType;

property css

css?: SystemProps;

Deprecated
Use the sx prop instead

property sx

sx?: SystemProps;

interface BreadcrumbsTypeMap

interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'> {}

property classKey

classKey: BreadcrumbsClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * The breadcrumb children.
     */
    children?: React.ReactNode;
    /**
     * Override the default label for the expand button.
     *
     * For localization purposes, you can use the provided [translations](/guides/localization/).
     */
    expandText?: string;
    /**
     * If max items is exceeded, the number of items to show after the ellipsis.
     */
    itemsAfterCollapse?: number;
    /**
     * If max items is exceeded, the number of items to show before the ellipsis.
     */
    itemsBeforeCollapse?: number;
    /**
     * Specifies the maximum number of breadcrumbs to display. When there are more
     * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
     * will be shown, with an ellipsis in between.
     */
    maxItems?: number;
    /**
     * Custom separator node.
     */
    separator?: React.ReactNode;
};

interface ButtonBaseActions

interface ButtonBaseActions {}

method focusVisible

focusVisible: () => void;

interface ButtonBaseTypeMap

interface ButtonBaseTypeMap<P = {}, D extends React.ElementType = 'button'> {}

property classKey

classKey: ButtonBaseClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * A ref for imperative actions.
     * It currently only supports `focusVisible()` action.
     */
    action?: React.Ref<ButtonBaseActions>;
    /**
     * @ignore
     *
     * Use that prop to pass a ref to the native button component.
     * @deprecated Use `ref` instead.
     */
    buttonRef?: React.Ref<unknown>;
    /**
     * If `true`, the ripples will be centered.
     * They won't start at the cursor interaction position.
     */
    centerRipple?: boolean;
    /**
     * The content of the component.
     */
    children?: React.ReactNode;
    /**
     * If `true`, the base button will be disabled.
     */
    disabled?: boolean;
    /**
     * If `true`, the ripple effect will be disabled.
     *
     * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
     * to highlight the element by applying separate styles with the `focusVisibleClassName`.
     */
    disableRipple?: boolean;
    /**
     * If `true`, the touch ripple effect will be disabled.
     */
    disableTouchRipple?: boolean;
    /**
     * If `true`, the base button will have a keyboard focus ripple.
     */
    focusRipple?: boolean;
    /**
     * This prop can help identify which element has keyboard focus.
     * The class name will be applied when the element gains the focus through keyboard interaction.
     * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
     * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
     * if needed.
     */
    focusVisibleClassName?: string;
    /**
     * Callback fired when the component is focused with a keyboard.
     * We trigger a `onFocus` callback too.
     */
    onFocusVisible?: React.FocusEventHandler<any>;
    // @types/react is stricter
    tabIndex?: string | number;
    /**
     * Props applied to the `TouchRipple` element.
     */
    TouchRippleProps?: Partial<TouchRippleProps>;
};

interface ButtonGroupTypeMap

interface ButtonGroupTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: ButtonGroupClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * The content of the button group.
     */
    children?: React.ReactNode;
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color?: PropTypes.Color;
    /**
     * If `true`, the buttons will be disabled.
     */
    disabled?: boolean;
    /**
     * If `true`, no elevation is used.
     */
    disableElevation?: boolean;
    /**
     * If `true`, the button keyboard focus ripple will be disabled.
     */
    disableFocusRipple?: boolean;
    /**
     * If `true`, the button ripple effect will be disabled.
     */
    disableRipple?: boolean;
    /**
     * If `true`, the buttons will take up the full width of its container.
     */
    fullWidth?: boolean;
    /**
     * The group orientation (layout flow direction).
     */
    orientation?: 'vertical' | 'horizontal';
    /**
     * The size of the button.
     * `small` is equivalent to the dense button styling.
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * The variant to use.
     */
    variant?: 'text' | 'outlined' | 'contained';
};

interface CardActionsProps

interface CardActionsProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        CardActionsClassKey
    > {}

property children

children?: React.ReactNode;

The content of the component.

property disableSpacing

disableSpacing?: boolean;

If true, the actions do not have additional margin.

interface CardContentTypeMap

interface CardContentTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: CardContentClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * The content of the component.
     */
    children?: React.ReactNode;
};

interface CardHeaderTypeMap

interface CardHeaderTypeMap<
    Props = {},
    DefaultComponent extends React.ElementType = 'div',
    TitleTypographyComponent extends React.ElementType = 'span',
    SubheaderTypographyComponent extends React.ElementType = 'span'
> {}

property classKey

classKey: CardHeaderClassKey;

property defaultComponent

defaultComponent: DefaultComponent;

property props

props: Props & {
    /**
     * The action to display in the card header.
     */
    action?: React.ReactNode;
    /**
     * The Avatar for the Card Header.
     */
    avatar?: React.ReactNode;
    /**
     * If `true`, `subheader` and `title` won't be wrapped by a Typography component.
     * This can be useful to render an alternative Typography variant by wrapping
     * the `title` text, and optional `subheader` text
     * with the Typography component.
     */
    disableTypography?: boolean;
    /**
     * The content of the component.
     */
    subheader?: React.ReactNode;
    /**
     * These props will be forwarded to the subheader
     * (as long as disableTypography is not `true`).
     */
    subheaderTypographyProps?: TypographyProps<
        SubheaderTypographyComponent,
        { component?: SubheaderTypographyComponent }
    >;
    /**
     * The content of the Card Title.
     */
    title?: React.ReactNode;
    /**
     * These props will be forwarded to the title
     * (as long as disableTypography is not `true`).
     */
    titleTypographyProps?: TypographyProps<
        TitleTypographyComponent,
        { component?: TitleTypographyComponent }
    >;
};

interface CardMediaTypeMap

interface CardMediaTypeMap<P, D extends React.ElementType> {}

property classKey

classKey: CardMediaClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * The content of the component.
     */
    children?: React.ReactNode;
    /**
     * Image to be displayed as a background image.
     * Either `image` or `src` prop must be specified.
     * Note that caller must specify height otherwise the image will not be visible.
     */
    image?: string;
    /**
     * An alias for `image` property.
     * Available only with media components.
     * Media components: `video`, `audio`, `picture`, `iframe`, `img`.
     */
    src?: string;
};

interface CardProps

interface CardProps extends StandardProps<PaperProps, CardClassKey> {}

property raised

raised?: boolean;

If true, the card will use raised styling.

interface CheckboxProps

interface CheckboxProps
    extends StandardProps<
        SwitchBaseProps,
        CheckboxClassKey,
        'checkedIcon' | 'color' | 'icon' | 'type'
    > {}

property checked

checked?: SwitchBaseProps['checked'];

If true, the component is checked.

property checkedIcon

checkedIcon?: React.ReactNode;

The icon to display when the component is checked.

property color

color?: 'primary' | 'secondary' | 'default';

The color of the component. It supports those theme colors that make sense for this component.

property disabled

disabled?: SwitchBaseProps['disabled'];

If true, the checkbox will be disabled.

property disableRipple

disableRipple?: SwitchBaseProps['disableRipple'];

If true, the ripple effect will be disabled.

property icon

icon?: React.ReactNode;

The icon to display when the component is unchecked.

property id

id?: SwitchBaseProps['id'];

The id of the input element.

property indeterminate

indeterminate?: boolean;

If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.

property indeterminateIcon

indeterminateIcon?: React.ReactNode;

The icon to display when the component is indeterminate.

property inputProps

inputProps?: SwitchBaseProps['inputProps'];

[Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the input element.

property inputRef

inputRef?: React.Ref<HTMLInputElement>;

Pass a ref to the input element.

property onChange

onChange?: SwitchBaseProps['onChange'];

Callback fired when the state is changed.
Parameter event
The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).

property required

required?: SwitchBaseProps['required'];

If true, the input element will be required.

property size

size?: 'small' | 'medium';

The size of the checkbox. small is equivalent to the dense checkbox styling.

property value

value?: SwitchBaseProps['value'];

The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value.

interface ChipTypeMap

interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: ChipClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * Avatar element.
     */
    avatar?: React.ReactElement;
    /**
     * This prop isn't supported.
     * Use the `component` prop if you need to change the children structure.
     */
    children?: null;
    /**
     * If `true`, the chip will appear clickable, and will raise when pressed,
     * even if the onClick prop is not defined.
     * If false, the chip will not be clickable, even if onClick prop is defined.
     * This can be used, for example,
     * along with the component prop to indicate an anchor Chip is clickable.
     */
    clickable?: boolean;
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color?: Exclude<PropTypes.Color, 'inherit'>;
    /**
     * Override the default delete icon element. Shown only if `onDelete` is set.
     */
    deleteIcon?: React.ReactElement;
    /**
     * If `true`, the chip should be displayed in a disabled state.
     */
    disabled?: boolean;
    /**
     * Icon element.
     */
    icon?: React.ReactElement;
    /**
     * The content of the label.
     */
    label?: React.ReactNode;
    /**
     * Callback function fired when the delete icon is clicked.
     * If set, the delete icon will be shown.
     */
    onDelete?: React.EventHandler<any>;
    /**
     * The size of the chip.
     */
    size?: 'small' | 'medium';
    /**
     * The variant to use.
     */
    variant?: 'default' | 'outlined';
};

interface CircularProgressProps

interface CircularProgressProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        CircularProgressClassKey,
        'children'
    > {}

property color

color?: 'primary' | 'secondary' | 'inherit';

The color of the component. It supports those theme colors that make sense for this component.

property disableShrink

disableShrink?: boolean;

If true, the shrink animation is disabled. This only works if variant is indeterminate.

property size

size?: number | string;

The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'.

property thickness

thickness?: number;

The thickness of the circle.

property value

value?: number;

The value of the progress indicator for the determinate variant. Value between 0 and 100.

property variant

variant?: 'determinate' | 'indeterminate' | 'static';

The variant to use. Use indeterminate when there is no progress value.

interface ClickAwayListenerProps

interface ClickAwayListenerProps {}

property children

children: React.ReactNode;

The wrapped element.

property disableReactTree

disableReactTree?: boolean;

If true, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled.

property mouseEvent

mouseEvent?: 'onClick' | 'onMouseDown' | 'onMouseUp' | false;

The mouse event to listen to. You can disable the listener by providing false.

property onClickAway

onClickAway: (event: React.MouseEvent<Document>) => void;

Callback fired when a "click away" event is detected.

property touchEvent

touchEvent?: 'onTouchStart' | 'onTouchEnd' | false;

The touch event to listen to. You can disable the listener by providing false.

interface CollapseProps

interface CollapseProps
    extends StandardProps<TransitionProps, CollapseClassKey, 'timeout'> {}

property children

children?: React.ReactNode;

The content node to be collapsed.

property collapsedHeight

collapsedHeight?: string | number;

The height of the container when collapsed.
Deprecated
The prop was renamed to support the addition of horizontal orientation, use collapsedSize instead.

property collapsedSize

collapsedSize?: string | number;

The height of the container when collapsed.

property component

component?: React.ElementType<TransitionProps>;

The component used for the root node. Either a string to use a HTML element or a component.

property disableStrictModeCompat

disableStrictModeCompat?: boolean;

Enable this prop if you encounter 'Function components cannot be given refs', use unstable_createStrictModeTheme, and can't forward the ref in the passed Component.

property in

in?: boolean;

If true, the component will transition in.

property timeout

timeout?: TransitionProps['timeout'] | 'auto';

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.

interface Color

interface Color {}

property 100

100: string;

property 200

200: string;

property 300

300: string;

property 400

400: string;

property 50

50: string;

property 500

500: string;

property 600

600: string;

property 700

700: string;

property 800

800: string;

property 900

900: string;

property A100

A100: string;

property A200

A200: string;

property A400

A400: string;

property A700

A700: string;

interface ColorObject

interface ColorObject {}

property type

type: ColorFormat;

property values

values: [number, number, number] | [number, number, number, number];

interface ComponentsPropsList

interface ComponentsPropsList {}

property MuiAccordion

MuiAccordion: AccordionProps;

property MuiAccordionActions

MuiAccordionActions: AccordionActionsProps;

property MuiAccordionDetails

MuiAccordionDetails: AccordionDetailsProps;

property MuiAccordionSummary

MuiAccordionSummary: AccordionSummaryProps;

property MuiAppBar

MuiAppBar: AppBarProps;

property MuiAvatar

MuiAvatar: AvatarProps;

property MuiBackdrop

MuiBackdrop: BackdropProps;

property MuiBadge

MuiBadge: BadgeProps;

property MuiBottomNavigation

MuiBottomNavigation: BottomNavigationProps;

property MuiBottomNavigationAction

MuiBottomNavigationAction: BottomNavigationActionProps;

property MuiBreadcrumbs

MuiBreadcrumbs: BreadcrumbsProps;

property MuiButton

MuiButton: ButtonProps;

property MuiButtonBase

MuiButtonBase: ButtonBaseProps;

property MuiButtonGroup

MuiButtonGroup: ButtonGroupProps;

property MuiCard

MuiCard: CardProps;

property MuiCardActionArea

MuiCardActionArea: CardActionAreaProps;

property MuiCardActions

MuiCardActions: CardActionsProps;

property MuiCardContent

MuiCardContent: CardContentProps;

property MuiCardHeader

MuiCardHeader: CardHeaderProps;

property MuiCardMedia

MuiCardMedia: CardMediaProps;

property MuiCheckbox

MuiCheckbox: CheckboxProps;

property MuiChip

MuiChip: ChipProps;

property MuiCircularProgress

MuiCircularProgress: CircularProgressProps;

property MuiCollapse

MuiCollapse: CollapseProps;

property MuiContainer

MuiContainer: ContainerProps;

property MuiCssBaseline

MuiCssBaseline: CssBaselineProps;

property MuiDialog

MuiDialog: DialogProps;

property MuiDialogActions

MuiDialogActions: DialogActionsProps;

property MuiDialogContent

MuiDialogContent: DialogContentProps;

property MuiDialogContentText

MuiDialogContentText: DialogContentTextProps;

property MuiDialogTitle

MuiDialogTitle: DialogTitleProps;

property MuiDivider

MuiDivider: DividerProps;

property MuiDrawer

MuiDrawer: DrawerProps;

property MuiExpansionPanel

MuiExpansionPanel: ExpansionPanelProps;

property MuiExpansionPanelActions

MuiExpansionPanelActions: ExpansionPanelActionsProps;

property MuiExpansionPanelDetails

MuiExpansionPanelDetails: ExpansionPanelDetailsProps;

property MuiExpansionPanelSummary

MuiExpansionPanelSummary: ExpansionPanelSummaryProps;

property MuiFab

MuiFab: FabProps;

property MuiFilledInput

MuiFilledInput: FilledInputProps;

property MuiFormControl

MuiFormControl: FormControlProps;

property MuiFormControlLabel

MuiFormControlLabel: FormControlLabelProps;

property MuiFormGroup

MuiFormGroup: FormGroupProps;

property MuiFormHelperText

MuiFormHelperText: FormHelperTextProps;

property MuiFormLabel

MuiFormLabel: FormLabelProps;

property MuiGrid

MuiGrid: GridProps;

property MuiIcon

MuiIcon: IconProps;

property MuiIconButton

MuiIconButton: IconButtonProps;

property MuiImageList

MuiImageList: ImageListProps;

property MuiImageListItem

MuiImageListItem: ImageListItemProps;

property MuiImageListItemBar

MuiImageListItemBar: ImageListItemBarProps;

property MuiInput

MuiInput: InputProps;

property MuiInputAdornment

MuiInputAdornment: InputAdornmentProps;

property MuiInputBase

MuiInputBase: InputBaseProps;

property MuiInputLabel

MuiInputLabel: InputLabelProps;

property MuiLinearProgress

MuiLinearProgress: LinearProgressProps;

property MuiLink

MuiLink: LinkProps;

property MuiList

MuiList: ListProps;

property MuiListItem

MuiListItem: ListItemProps;

property MuiListItemAvatar

MuiListItemAvatar: ListItemAvatarProps;

property MuiListItemIcon

MuiListItemIcon: ListItemIconProps;

property MuiListItemSecondaryAction

MuiListItemSecondaryAction: ListItemSecondaryActionProps;

property MuiListItemText

MuiListItemText: ListItemTextProps;

property MuiListSubheader

MuiListSubheader: ListSubheaderProps;

property MuiMenu

MuiMenu: MenuProps;

property MuiMenuItem

MuiMenuItem: MenuItemProps;

property MuiMenuList

MuiMenuList: MenuListProps;

property MuiMobileStepper

MuiMobileStepper: MobileStepperProps;

property MuiModal

MuiModal: ModalProps;

property MuiNativeSelect

MuiNativeSelect: NativeSelectProps;

property MuiOutlinedInput

MuiOutlinedInput: OutlinedInputProps;

property MuiPaper

MuiPaper: PaperProps;

property MuiPopover

MuiPopover: PopoverProps;

property MuiRadio

MuiRadio: RadioProps;

property MuiRadioGroup

MuiRadioGroup: RadioGroupProps;

property MuiSelect

MuiSelect: SelectProps;

property MuiSlider

MuiSlider: SliderProps;

property MuiSnackbar

MuiSnackbar: SnackbarProps;

property MuiSnackbarContent

MuiSnackbarContent: SnackbarContentProps;

property MuiStep

MuiStep: StepProps;

property MuiStepButton

MuiStepButton: StepButtonProps;

property MuiStepConnector

MuiStepConnector: StepConnectorProps;

property MuiStepContent

MuiStepContent: StepContentProps;

property MuiStepIcon

MuiStepIcon: StepIconProps;

property MuiStepLabel

MuiStepLabel: StepLabelProps;

property MuiStepper

MuiStepper: StepperProps;

property MuiSvgIcon

MuiSvgIcon: SvgIconProps;

property MuiSwipeableDrawer

MuiSwipeableDrawer: SwipeableDrawerProps;

property MuiSwitch

MuiSwitch: SwitchProps;

property MuiTab

MuiTab: TabProps;

property MuiTable

MuiTable: TableProps;

property MuiTableBody

MuiTableBody: TableBodyProps;

property MuiTableCell

MuiTableCell: TableCellProps;

property MuiTableContainer

MuiTableContainer: TableContainerProps;

property MuiTableHead

MuiTableHead: TableHeadProps;

property MuiTablePagination

MuiTablePagination: TablePaginationProps;

property MuiTableRow

MuiTableRow: TableRowProps;

property MuiTableSortLabel

MuiTableSortLabel: TableSortLabelProps;

property MuiTabs

MuiTabs: TabsProps;

property MuiTextField

MuiTextField: TextFieldProps;

property MuiToolbar

MuiToolbar: ToolbarProps;

property MuiTooltip

MuiTooltip: TooltipProps;

property MuiTouchRipple

MuiTouchRipple: TouchRippleProps;

property MuiTypography

MuiTypography: TypographyProps;

property MuiUseMediaQuery

MuiUseMediaQuery: useMediaQueryOptions;

property MuiWithWidth

MuiWithWidth: WithWidthOptions;

interface ContainerTypeMap

interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: ContainerClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    children: NonNullable<React.ReactNode>;
    /**
     * If `true`, the left and right padding is removed.
     */
    disableGutters?: boolean;
    /**
     * Set the max-width to match the min-width of the current breakpoint.
     * This is useful if you'd prefer to design for a fixed set of sizes
     * instead of trying to accommodate a fully fluid viewport.
     * It's fluid by default.
     */
    fixed?: boolean;
    /**
     * Determine the max-width of the container.
     * The container width grows with the size of the screen.
     * Set to `false` to disable `maxWidth`.
     */
    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
};

interface CssBaselineProps

interface CssBaselineProps extends StyledComponentProps<never> {}

property children

children?: React.ReactNode;

You can wrap a node.

interface DialogActionsProps

interface DialogActionsProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        DialogActionsClassKey
    > {}

property children

children?: React.ReactNode;

The content of the component.

property disableSpacing

disableSpacing?: boolean;

If true, the actions do not have additional margin.

interface DialogContentProps

interface DialogContentProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        DialogContentClassKey
    > {}

property children

children?: React.ReactNode;

The content of the component.

property dividers

dividers?: boolean;

Display the top and bottom dividers.

interface DialogContentTextTypeMap

interface DialogContentTextTypeMap<
    P = {},
    D extends React.ElementType = TypographyTypeMap['defaultComponent']
> {}

property classKey

classKey: DialogContentTextClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & TypographyTypeMap['props'];

interface DialogProps

interface DialogProps
    extends StandardProps<
        ModalProps & Partial<TransitionHandlerProps>,
        DialogClassKey,
        'children'
    > {}

property 'aria-describedby'

'aria-describedby'?: string;

The id(s) of the element(s) that describe the dialog.

property 'aria-labelledby'

'aria-labelledby'?: string;

The id(s) of the element(s) that label the dialog.

property children

children?: React.ReactNode;

Dialog children, usually the included sub-components.

property disableBackdropClick

disableBackdropClick?: boolean;

If true, clicking the backdrop will not fire the onClose callback.
Deprecated
Use the onClose prop with the reason argument to filter the backdropClick events.

property disableEscapeKeyDown

disableEscapeKeyDown?: boolean;

If true, hitting escape will not fire the onClose callback.

property fullScreen

fullScreen?: boolean;

If true, the dialog will be full-screen

property fullWidth

fullWidth?: boolean;

If true, the dialog stretches to maxWidth.
Notice that the dialog width grow is limited by the default margin.

property maxWidth

maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;

Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth.

property onBackdropClick

onBackdropClick?: ModalProps['onBackdropClick'];

Callback fired when the backdrop is clicked.
Deprecated
Use the onClose prop with the reason argument to handle the backdropClick events.

property onClose

onClose?: ModalProps['onClose'];

Callback fired when the component requests to be closed.
Parameter event
The event source of the callback.
Parameter reason
Can be: "escapeKeyDown", "backdropClick".

property onEnter

onEnter?: TransitionHandlerProps['onEnter'];

Callback fired before the dialog enters.
Deprecated
Use the TransitionProps prop instead.

property onEntered

onEntered?: TransitionHandlerProps['onEntered'];

Callback fired when the dialog has entered.
Deprecated
Use the TransitionProps prop instead.

property onEntering

onEntering?: TransitionHandlerProps['onEntering'];

Callback fired when the dialog is entering.
Deprecated
Use the TransitionProps prop instead.

property onEscapeKeyDown

onEscapeKeyDown?: ModalProps['onEscapeKeyDown'];

Callback fired when the escape key is pressed, disableKeyboard is false and the modal is in focus.
Deprecated
Use the onClose prop with the reason argument to handle the escapeKeyDown events.

property onExit

onExit?: TransitionHandlerProps['onExit'];

Callback fired before the dialog exits.
Deprecated
Use the TransitionProps prop instead.

property onExited

onExited?: TransitionHandlerProps['onExited'];

Callback fired when the dialog has exited.
Deprecated
Use the TransitionProps prop instead.

property onExiting

onExiting?: TransitionHandlerProps['onExiting'];

Callback fired when the dialog is exiting.
Deprecated
Use the TransitionProps prop instead.

property open

open: ModalProps['open'];

If true, the Dialog is open.

property PaperComponent

PaperComponent?: React.ComponentType<PaperProps>;

The component used to render the body of the dialog.

property PaperProps

PaperProps?: Partial<PaperProps>;

Props applied to the [Paper](/api/paper/) element.

property scroll

scroll?: 'body' | 'paper';

Determine the container for scrolling the dialog.

property TransitionComponent

TransitionComponent?: React.ComponentType<
    TransitionProps & { children?: React.ReactElement<any, any> }
>;

The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

property transitionDuration

transitionDuration?: TransitionProps['timeout'];

The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

property TransitionProps

TransitionProps?: TransitionProps;

Props applied to the [Transition](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.

interface DialogTitleProps

interface DialogTitleProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        DialogTitleClassKey
    > {}

property children

children?: React.ReactNode;

The content of the component.

property disableTypography

disableTypography?: boolean;

If true, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2.

interface DividerTypeMap

interface DividerTypeMap<P = {}, D extends React.ElementType = 'hr'> {}

property classKey

classKey: DividerClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * Absolutely position the element.
     */
    absolute?: boolean;
    /**
     * 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.)
     */
    flexItem?: boolean;
    /**
     * If `true`, the divider will have a lighter color.
     */
    light?: boolean;
    /**
     * The divider orientation.
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * The variant to use.
     */
    variant?: 'fullWidth' | 'inset' | 'middle';
};

interface DrawerProps

interface DrawerProps
    extends StandardProps<
        ModalProps & Partial<TransitionHandlerProps>,
        DrawerClassKey,
        'open' | 'children'
    > {}

property anchor

anchor?: 'left' | 'top' | 'right' | 'bottom';

Side from which the drawer will appear.

property children

children?: React.ReactNode;

The contents of the drawer.

property elevation

elevation?: number;

The elevation of the drawer.

property ModalProps

ModalProps?: Partial<ModalProps>;

Props applied to the [Modal](/api/modal/) element.

property onClose

onClose?: ModalProps['onClose'];

Callback fired when the component requests to be closed.
Parameter event
The event source of the callback.

property open

open?: boolean;

If true, the drawer is open.

property PaperProps

PaperProps?: Partial<PaperProps>;

Props applied to the [Paper](/api/paper/) element.

property SlideProps

SlideProps?: Partial<SlideProps>;

Props applied to the [Slide](/api/slide/) element.

property transitionDuration

transitionDuration?: TransitionProps['timeout'];

The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

property variant

variant?: 'permanent' | 'persistent' | 'temporary';

The variant to use.

interface Duration

interface Duration {}

property complex

complex: number;

property enteringScreen

enteringScreen: number;

property leavingScreen

leavingScreen: number;

property short

short: number;

property shorter

shorter: number;

property shortest

shortest: number;

property standard

standard: number;

interface Easing

interface Easing {}

property easeIn

easeIn: string;

property easeInOut

easeInOut: string;

property easeOut

easeOut: string;

property sharp

sharp: string;

interface ExpansionPanelActionsProps

interface ExpansionPanelActionsProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        ExpansionPanelActionsClassKey
    > {}

property children

children?: React.ReactNode;

The content of the component.

property disableSpacing

disableSpacing?: boolean;

If true, the actions do not have additional margin.

interface ExpansionPanelDetailsProps

interface ExpansionPanelDetailsProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        ExpansionPanelDetailsClassKey
    > {}

property children

children?: React.ReactNode;

The content of the expansion panel details.

interface ExpansionPanelProps

interface ExpansionPanelProps
    extends StandardProps<PaperProps, ExpansionPanelClassKey, 'onChange'> {}

property children

children: NonNullable<React.ReactNode>;

The content of the expansion panel.

property defaultExpanded

defaultExpanded?: boolean;

If true, expands the panel by default.

property disabled

disabled?: boolean;

If true, the panel will be displayed in a disabled state.

property expanded

expanded?: boolean;

If true, expands the panel, otherwise collapse it. Setting this prop enables control over the panel.

property onChange

onChange?: (event: React.ChangeEvent<{}>, expanded: boolean) => void;

Callback fired when the expand/collapse state is changed.
Parameter event
The event source of the callback.
Parameter expanded
The expanded state of the panel.

property TransitionComponent

TransitionComponent?: React.ComponentType<
    TransitionProps & { children?: React.ReactElement<any, any> }
>;

The component used for the collapse effect. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

property TransitionProps

TransitionProps?: TransitionProps;

Props applied to the [Transition](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.

interface ExtendButtonBaseTypeMap

interface ExtendButtonBaseTypeMap<M extends OverridableTypeMap> {}

utility to create component types that inherit props from ButtonBase. This component has an additional overload if the href prop is set which can make extension quite tricky

property classKey

classKey: M['classKey'];

property defaultComponent

defaultComponent: M['defaultComponent'];

property props

props: M['props'] & ButtonBaseTypeMap['props'];

interface FadeProps

interface FadeProps extends Omit<TransitionProps, 'children'> {}

property children

children?: React.ReactElement<any, any>;

A single child content element.

property disableStrictModeCompat

disableStrictModeCompat?: boolean;

Enable this prop if you encounter 'Function components cannot be given refs', use unstable_createStrictModeTheme, and can't forward the ref in the child component.

property in

in?: boolean;

If true, the component will transition in.

property ref

ref?: React.Ref<unknown>;

property timeout

timeout?: TransitionProps['timeout'];

The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

interface FilledInputProps

interface FilledInputProps
    extends StandardProps<InputBaseProps, FilledInputClassKey> {}

property disableUnderline

disableUnderline?: boolean;

If true, the input will not have an underline.

interface FilledTextFieldProps

interface FilledTextFieldProps extends BaseTextFieldProps {}

property inputProps

inputProps?: FilledInputProps['inputProps'];

[Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the input element.

property InputProps

InputProps?: Partial<FilledInputProps>;

Props applied to the Input element. It will be a [FilledInput](/api/filled-input/), [OutlinedInput](/api/outlined-input/) or [Input](/api/input/) component depending on the variant prop value.

property onBlur

onBlur?: FilledInputProps['onBlur'];

property onChange

onChange?: FilledInputProps['onChange'];

Callback fired when the value is changed.
Parameter event
The event source of the callback. You can pull out the new value by accessing event.target.value (string).

property onFocus

onFocus?: FilledInputProps['onFocus'];

property variant

variant: 'filled';

The variant to use.

interface FormControlLabelProps

interface FormControlLabelProps
    extends StandardProps<
        React.LabelHTMLAttributes<HTMLLabelElement>,
        FormControlLabelClassKey,
        'children' | 'onChange'
    > {}

property checked

checked?: boolean;

If true, the component appears selected.

property control

control: React.ReactElement<any, any>;

A control element. For instance, it can be be a Radio, a Switch or a Checkbox.

property disabled

disabled?: boolean;

If true, the control will be disabled.

property inputRef

inputRef?: React.Ref<any>;

Pass a ref to the input element.

property label

label: React.ReactNode;

The text to be used in an enclosing label element.

property labelPlacement

labelPlacement?: 'end' | 'start' | 'top' | 'bottom';

The position of the label.

property name

name?: string;

property onChange

onChange?: (event: React.ChangeEvent<{}>, checked: boolean) => void;

Callback fired when the state is changed.
Parameter event
The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).

property value

value?: unknown;

The value of the component.

interface FormControlState

interface FormControlState extends Pick<FormControlProps, ContextFromPropsKey> {}

property adornedStart

adornedStart: boolean;

property filled

filled: boolean;

property focused

focused: boolean;

property onBlur

onBlur: () => void;

property onEmpty

onEmpty: () => void;

property onFilled

onFilled: () => void;

property onFocus

onFocus: () => void;

interface FormControlTypeMap

interface FormControlTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: FormControlClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * The contents of the form control.
     */
    children?: React.ReactNode;
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color?: 'primary' | 'secondary';
    /**
     * If `true`, the label, input and helper text should be displayed in a disabled state.
     */
    disabled?: boolean;
    /**
     * If `true`, the label should be displayed in an error state.
     */
    error?: boolean;
    /**
     * If `true`, the component will take up the full width of its container.
     */
    fullWidth?: boolean;
    /**
     * If `true`, the component will be displayed in focused state.
     */
    focused?: boolean;
    /**
     * If `true`, the label will be hidden.
     * This is used to increase density for a `FilledInput`.
     * Be sure to add `aria-label` to the `input` element.
     */
    hiddenLabel?: boolean;
    /**
     * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
     */
    margin?: PropTypes.Margin;
    /**
     * If `true`, the label will indicate that the input is required.
     */
    required?: boolean;
    /**
     * The size of the text field.
     */
    size?: 'small' | 'medium';
    /**
     * The variant to use.
     */
    variant?: 'standard' | 'outlined' | 'filled';
};

interface FormGroupProps

interface FormGroupProps
    extends StandardProps<React.HTMLAttributes<HTMLDivElement>, FormGroupClassKey> {}

property children

children?: React.ReactNode;

The content of the component.

property row

row?: boolean;

Display group of elements in a compact row.

interface FormHelperTextTypeMap

interface FormHelperTextTypeMap<P = {}, D extends React.ElementType = 'p'> {}

property classKey

classKey: FormHelperTextClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * The content of the component.
     *
     * If `' '` is provided, the component reserves one line height for displaying a future message.
     */
    children?: React.ReactNode;
    /**
     * If `true`, the helper text should be displayed in a disabled state.
     */
    disabled?: boolean;
    /**
     * If `true`, helper text should be displayed in an error state.
     */
    error?: boolean;
    /**
     * If `true`, the helper text should use filled classes key.
     */
    filled?: boolean;
    /**
     * If `true`, the helper text should use focused classes key.
     */
    focused?: boolean;
    /**
     * If `dense`, will adjust vertical spacing. This is normally obtained via context from
     * FormControl.
     */
    margin?: 'dense';
    /**
     * If `true`, the helper text should use required classes key.
     */
    required?: boolean;
    /**
     * The variant to use.
     */
    variant?: 'standard' | 'outlined' | 'filled';
};

interface FormLabelTypeMap

interface FormLabelTypeMap<P = {}, D extends React.ElementType = 'label'> {}

property classKey

classKey: FormLabelClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P &
    FormLabelBaseProps & {
        /**
         * The content of the component.
         */
        children?: React.ReactNode;
        /**
         * The color of the component. It supports those theme colors that make sense for this component.
         */
        color?: 'primary' | 'secondary';
        /**
         * If `true`, the label should be displayed in a disabled state.
         */
        disabled?: boolean;
        /**
         * If `true`, the label should be displayed in an error state.
         */
        error?: boolean;
        /**
         * If `true`, the label should use filled classes key.
         */
        filled?: boolean;
        /**
         * If `true`, the input of this label is focused (used by `FormGroup` components).
         */
        focused?: boolean;
        /**
         * If `true`, the label will indicate that the input is required.
         */
        required?: boolean;
    };

interface GridListTileBarProps

interface GridListTileBarProps extends StandardProps<{}, GridListTileBarClassKey> {}

property actionIcon

actionIcon?: React.ReactNode;

An IconButton element to be used as secondary action target (primary action target is the tile itself).

property actionPosition

actionPosition?: 'left' | 'right';

Position of secondary action IconButton.

property subtitle

subtitle?: React.ReactNode;

String or element serving as subtitle (support text).

property title

title?: React.ReactNode;

Title to be displayed on tile.

property titlePosition

titlePosition?: 'top' | 'bottom';

Position of the title bar.

interface GridListTileTypeMap

interface GridListTileTypeMap<P = {}, D extends React.ElementType = 'li'> {}

property classKey

classKey: GridListTileClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    cols?: number;
    rows?: number;
};

interface GridListTypeMap

interface GridListTypeMap<P = {}, D extends React.ElementType = 'ul'> {}

property classKey

classKey: GridListClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    cellHeight?: number | 'auto';
    cols?: number;
    spacing?: number;
};

interface GridTypeMap

interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: GridClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * Defines the `align-content` style property.
     * It's applied for all screen sizes.
     */
    alignContent?: GridContentAlignment;
    /**
     * Defines the `align-items` style property.
     * It's applied for all screen sizes.
     */
    alignItems?: GridItemsAlignment;
    /**
     * The content of the component.
     */
    children?: React.ReactNode;
    /**
     * If `true`, the component will have the flex *container* behavior.
     * You should be wrapping *items* with a *container*.
     */
    container?: boolean;
    /**
     * Defines the `flex-direction` style property.
     * It is applied for all screen sizes.
     */
    direction?: GridDirection;
    /**
     * If `true`, the component will have the flex *item* behavior.
     * You should be wrapping *items* with a *container*.
     */
    item?: boolean;
    /**
     * Defines the `justify-content` style property.
     * It is applied for all screen sizes.
     * @deprecated Use `justifyContent` instead, the prop was renamed
     */
    justify?: GridJustification;
    /**
     * Defines the `justify-content` style property.
     * It is applied for all screen sizes.
     */
    justifyContent?: GridJustification;
    /**
     * Defines the number of grids the component is going to use.
     * It's applied for the `lg` breakpoint and wider screens if not overridden.
     */
    lg?: boolean | GridSize;
    /**
     * Defines the number of grids the component is going to use.
     * It's applied for the `md` breakpoint and wider screens if not overridden.
     */
    md?: boolean | GridSize;
    /**
     * Defines the number of grids the component is going to use.
     * It's applied for the `sm` breakpoint and wider screens if not overridden.
     */
    sm?: boolean | GridSize;
    /**
     * Defines the space between the type `item` component.
     * It can only be used on a type `container` component.
     */
    spacing?: GridSpacing;
    /**
     * Defines the `flex-wrap` style property.
     * It's applied for all screen sizes.
     */
    wrap?: GridWrap;
    /**
     * Defines the number of grids the component is going to use.
     * It's applied for the `xl` breakpoint and wider screens.
     */
    xl?: boolean | GridSize;
    /**
     * Defines the number of grids the component is going to use.
     * It's applied for all the screen sizes with the lowest priority.
     */
    xs?: boolean | GridSize;
    /**
     * If `true`, it sets `min-width: 0` on the item.
     * Refer to the limitations section of the documentation to better understand the use case.
     */
    zeroMinWidth?: boolean;
};

interface GrowProps

interface GrowProps extends Omit<TransitionProps, 'timeout'> {}

property children

children?: React.ReactElement<any, any>;

A single child content element.

property disableStrictModeCompat

disableStrictModeCompat?: boolean;

Enable this prop if you encounter 'Function components cannot be given refs', use unstable_createStrictModeTheme, and can't forward the ref in the child component.

property in

in?: boolean;

If true, show the component; triggers the enter or exit animation.

property ref

ref?: React.Ref<unknown>;

property timeout

timeout?: TransitionProps['timeout'] | 'auto';

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.

interface HiddenProps

interface HiddenProps {}

property implementation

implementation?: 'js' | 'css';

Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering.

property initialWidth

initialWidth?: Breakpoint;

You can use this prop when choosing the js implementation with server-side rendering.
As window.innerWidth is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint

property lgDown

lgDown?: boolean;

If true, screens this size and down will be hidden.

property lgUp

lgUp?: boolean;

If true, screens this size and up will be hidden.

property mdDown

mdDown?: boolean;

If true, screens this size and down will be hidden.

property mdUp

mdUp?: boolean;

If true, screens this size and up will be hidden.

property only

only?: Breakpoint | Breakpoint[];

Hide the given breakpoint(s).

property smDown

smDown?: boolean;

If true, screens this size and down will be hidden.

property smUp

smUp?: boolean;

If true, screens this size and up will be hidden.

property xlDown

xlDown?: boolean;

If true, screens this size and down will be hidden.

property xlUp

xlUp?: boolean;

If true, screens this size and up will be hidden.

property xsDown

xsDown?: boolean;

If true, screens this size and down will be hidden.

property xsUp

xsUp?: boolean;

If true, screens this size and up will be hidden.

interface IconTypeMap

interface IconTypeMap<P = {}, D extends React.ElementType = 'span'> {}

property classKey

classKey: IconClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    color?: PropTypes.Color | 'action' | 'disabled' | 'error';
    fontSize?: 'default' | 'inherit' | 'large' | 'medium' | 'small';
};

interface ImageListItemBarProps

interface ImageListItemBarProps
    extends StandardProps<{}, ImageListItemBarClassKey> {}

property actionIcon

actionIcon?: React.ReactNode;

An IconButton element to be used as secondary action target (primary action target is the item itself).

property actionPosition

actionPosition?: 'left' | 'right';

Position of secondary action IconButton.

property position

position?: 'top' | 'bottom';

Position of the title bar.

property subtitle

subtitle?: React.ReactNode;

String or element serving as subtitle (support text).

property title

title?: React.ReactNode;

Title to be displayed on item.

property titlePosition

titlePosition?: 'top' | 'bottom';

Position of the title bar.
Deprecated
Use position instead.

interface ImageListItemTypeMap

interface ImageListItemTypeMap<P = {}, D extends React.ElementType = 'li'> {}

property classKey

classKey: ImageListItemClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * While you can pass any node as children, the main use case is for an img.
     */
    children?: React.ReactNode;
    /**
     * Width of the item in number of grid columns.
     */
    cols?: number;
    /**
     * Height of the item in number of grid rows.
     */
    rows?: number;
};

interface ImageListTypeMap

interface ImageListTypeMap<P = {}, D extends React.ElementType = 'ul'> {}

property classKey

classKey: ImageListClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * Cell height in `px`.
     * Set to `'auto'` to let the children determine the height.
     * @deprecated Use rowHeight instead.
     */
    cellHeight?: number | 'auto';
    /**
     * Items that will be in the image list.
     */
    children?: React.ReactNode;
    /**
     * Number of columns.
     */
    cols?: number;
    /**
     * The gap between items in `px`.
     */
    gap?: number;
    /**
     * The height of one row in `px`.
     */
    rowHeight?: number | 'auto';
    /**
     * The spacing between items in `px`.
     * @deprecated Use gap instead.
     */
    spacing?: number;
};

interface InjectedProps

interface InjectedProps extends WithMobileDialog {}

Deprecated

interface InputAdornmentTypeMap

interface InputAdornmentTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: InputAdornmentClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    disablePointerEvents?: boolean;
    disableTypography?: boolean;
    position: 'start' | 'end';
    variant?: 'standard' | 'outlined' | 'filled';
};

interface InputBaseComponentProps

interface InputBaseComponentProps
    extends React.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {}

index signature

[arbitrary: string]: any;

interface InputBaseProps

interface InputBaseProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        InputBaseClassKey,
        /*
         * `onChange`, `onKeyUp`, `onKeyDown`, `onBlur`, `onFocus` are applied to the inner `InputComponent`,
         * which by default is an input or textarea. Since these handlers differ from the
         * ones inherited by `React.HTMLAttributes<HTMLDivElement>` we need to omit them.
         */
        | 'children'
        | 'onChange'
        | 'onKeyUp'
        | 'onKeyDown'
        | 'onBlur'
        | 'onFocus'
        | 'defaultValue'
    > {}

property 'aria-describedby'

'aria-describedby'?: string;

property autoComplete

autoComplete?: string;

This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).

property autoFocus

autoFocus?: boolean;

If true, the input element will be focused during the first mount.

property color

color?: 'primary' | 'secondary';

The color of the component. It supports those theme colors that make sense for this component.

property defaultValue

defaultValue?: unknown;

The default input element value. Use when the component is not controlled.

property disabled

disabled?: boolean;

If true, the input element will be disabled.

property endAdornment

endAdornment?: React.ReactNode;

End InputAdornment for this component.

property error

error?: boolean;

If true, the input will indicate an error. This is normally obtained via context from FormControl.

property fullWidth

fullWidth?: boolean;

If true, the input will take up the full width of its container.

property id

id?: string;

The id of the input element.

property inputComponent

inputComponent?: React.ElementType<InputBaseComponentProps>;

The component used for the input element. Either a string to use a HTML element or a component.

property inputProps

inputProps?: InputBaseComponentProps;

[Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the input element.

property inputRef

inputRef?: React.Ref<any>;

Pass a ref to the input element.

property margin

margin?: 'dense' | 'none';

If dense, will adjust vertical spacing. This is normally obtained via context from FormControl.

property maxRows

maxRows?: string | number;

Maximum number of rows to display when multiline option is set to true.

property minRows

minRows?: string | number;

Minimum number of rows to display when multiline option is set to true.

property multiline

multiline?: boolean;

If true, a textarea element will be rendered.

property name

name?: string;

Name attribute of the input element.

property onBlur

onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;

Callback fired when the input is blurred.
Notice that the first argument (event) might be undefined.

property onChange

onChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;

Callback fired when the value is changed.
Parameter event
The event source of the callback. You can pull out the new value by accessing event.target.value (string).

property onFocus

onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;

property onKeyDown

onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;

property onKeyUp

onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;

property placeholder

placeholder?: string;

The short hint displayed in the input before the user enters a value.

property readOnly

readOnly?: boolean;

It prevents the user from changing the value of the field (not from interacting with the field).

property renderSuffix

renderSuffix?: (state: {
    disabled?: boolean;
    error?: boolean;
    filled?: boolean;
    focused?: boolean;
    margin?: 'dense' | 'none' | 'normal';
    required?: boolean;
    startAdornment?: React.ReactNode;
}) => React.ReactNode;

property required

required?: boolean;

If true, the input element will be required.

property rows

rows?: string | number;

Number of rows to display when multiline option is set to true.

property rowsMax

rowsMax?: string | number;

Maximum number of rows to display.
Deprecated
Use maxRows instead.

property rowsMin

rowsMin?: string | number;

Minimum number of rows to display.
Deprecated
Use minRows instead.

property startAdornment

startAdornment?: React.ReactNode;

Start InputAdornment for this component.

property type

type?: string;

Type of the input element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).

property value

value?: unknown;

The value of the input element, required for a controlled component.

interface InputLabelProps

interface InputLabelProps
    extends StandardProps<FormLabelProps, InputLabelClassKey> {}

property children

children?: React.ReactNode;

The contents of the InputLabel.

property color

color?: FormLabelProps['color'];

property disableAnimation

disableAnimation?: boolean;

If true, the transition animation is disabled.

property disabled

disabled?: boolean;

If true, apply disabled class.

property error

error?: boolean;

If true, the label will be displayed in an error state.

property focused

focused?: boolean;

If true, the input of this label is focused.

property margin

margin?: 'dense';

If dense, will adjust vertical spacing. This is normally obtained via context from FormControl.

property required

required?: boolean;

if true, the label will indicate that the input is required.

property shrink

shrink?: boolean;

If true, the label is shrunk.

property variant

variant?: 'standard' | 'outlined' | 'filled';

The variant to use.

interface InputProps

interface InputProps extends StandardProps<InputBaseProps, InputClassKey> {}

property disableUnderline

disableUnderline?: boolean;

If true, the input will not have an underline.

interface LabelDisplayedRowsArgs

interface LabelDisplayedRowsArgs {}

property count

count: number;

property from

from: number;

property page

page: number;

property to

to: number;

interface LinearProgressProps

interface LinearProgressProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        LinearProgressClassKey,
        'children'
    > {}

property color

color?: 'primary' | 'secondary';

The color of the component. It supports those theme colors that make sense for this component.

property value

value?: number;

The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100.

property valueBuffer

valueBuffer?: number;

The value for the buffer variant. Value between 0 and 100.

property variant

variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';

The variant to use. Use indeterminate or query when there is no progress value.

interface LinkTypeMap

interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {}

property classKey

classKey: LinkClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P &
    LinkBaseProps & {
        TypographyClasses?: TypographyProps['classes'];
        underline?: 'none' | 'hover' | 'always';
    };

interface ListItemAvatarProps

interface ListItemAvatarProps extends StandardProps<{}, ListItemAvatarClassKey> {}

property children

children: React.ReactElement;

The content of the component – normally Avatar.

interface ListItemIconProps

interface ListItemIconProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        ListItemIconClassKey
    > {}

property children

children?: React.ReactNode;

The content of the component, normally Icon, SvgIcon, or a @material-ui/icons SVG icon element.

interface ListItemSecondaryActionProps

interface ListItemSecondaryActionProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        ListItemSecondaryActionClassKey
    > {}

property children

children?: React.ReactNode;

The content of the component, normally an IconButton or selection control.

interface ListItemTextProps

interface ListItemTextProps<
    PrimaryTypographyComponent extends React.ElementType = 'span',
    SecondaryTypographyComponent extends React.ElementType = 'p'
> extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        ListItemTextClassKey
    > {}

property children

children?: React.ReactNode;

Alias for the primary prop.

property disableTypography

disableTypography?: boolean;

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.

property inset

inset?: boolean;

If true, the children will be indented. This should be used if there is no left avatar or left icon.

property primary

primary?: React.ReactNode;

The main content element.

property primaryTypographyProps

primaryTypographyProps?: TypographyProps<
    PrimaryTypographyComponent,
    { component?: PrimaryTypographyComponent }
>;

These props will be forwarded to the primary typography component (as long as disableTypography is not true).

property secondary

secondary?: React.ReactNode;

The secondary content element.

property secondaryTypographyProps

secondaryTypographyProps?: TypographyProps<
    SecondaryTypographyComponent,
    { component?: SecondaryTypographyComponent }
>;

These props will be forwarded to the secondary typography component (as long as disableTypography is not true).

interface ListItemTypeMap

interface ListItemTypeMap<P, D extends React.ElementType> {}

property classKey

classKey: ListItemClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    alignItems?: 'flex-start' | 'center';
    autoFocus?: boolean;
    button?: boolean;
    ContainerComponent?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
    ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
    dense?: boolean;
    disabled?: boolean;
    disableGutters?: boolean;
    divider?: boolean;
    focusVisibleClassName?: string;
    selected?: boolean;
};

interface ListSubheaderTypeMap

interface ListSubheaderTypeMap<P = {}, D extends React.ElementType = 'li'> {}

property classKey

classKey: ListSubheaderClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    color?: 'default' | 'primary' | 'inherit';
    disableGutters?: boolean;
    disableSticky?: boolean;
    inset?: boolean;
};

interface ListTypeMap

interface ListTypeMap<P = {}, D extends React.ElementType = 'ul'> {}

property classKey

classKey: ListClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    dense?: boolean;
    disablePadding?: boolean;
    subheader?: React.ReactElement;
};

interface Mark

interface Mark {}

property label

label?: React.ReactNode;

property value

value: number;

interface MenuListProps

interface MenuListProps extends StandardProps<ListProps, MenuListClassKey> {}

property autoFocus

autoFocus?: boolean;

If true, will focus the [role="menu"] container and move into tab order.

property autoFocusItem

autoFocusItem?: boolean;

If true, will focus the first menuitem if variant="menu" or selected item if variant="selectedMenu".

property children

children?: React.ReactNode;

MenuList contents, normally MenuItems.

property disabledItemsFocusable

disabledItemsFocusable?: boolean;

If true, will allow focus on disabled items.

property disableListWrap

disableListWrap?: boolean;

If true, the menu items will not wrap focus.

property variant

variant?: 'menu' | 'selectedMenu';

The variant to use. Use menu to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element.

interface MenuProps

interface MenuProps
    extends StandardProps<
        PopoverProps & Partial<TransitionHandlerProps>,
        MenuClassKey
    > {}

property anchorEl

anchorEl?: PopoverProps['anchorEl'];

A HTML element, or a function that returns it. It's used to set the position of the menu.

property autoFocus

autoFocus?: boolean;

If true (Default) will focus the [role="menu"] if no focusable child is found. Disabled children are not focusable. If you set this prop to false focus will be placed on the parent modal container. This has severe accessibility implications and should only be considered if you manage focus otherwise.

property children

children?: React.ReactNode;

Menu contents, normally MenuItems.

property disableAutoFocusItem

disableAutoFocusItem?: boolean;

When opening the menu will not focus the active item but the [role="menu"] unless autoFocus is also set to false. Not using the default means not following WAI-ARIA authoring practices. Please be considerate about possible accessibility implications.

property MenuListProps

MenuListProps?: Partial<MenuListProps>;

Props applied to the [MenuList](/api/menu-list/) element.

property onClose

onClose?: PopoverProps['onClose'];

Callback fired when the component requests to be closed.
Parameter event
The event source of the callback.
Parameter reason
Can be: "escapeKeyDown", "backdropClick", "tabKeyDown".

property onEnter

onEnter?: PopoverProps['onEnter'];

Callback fired before the Menu enters.
Deprecated
Use the TransitionProps prop instead.

property onEntered

onEntered?: PopoverProps['onEntered'];

Callback fired when the Menu has entered.
Deprecated
Use the TransitionProps prop instead.

property onEntering

onEntering?: PopoverProps['onEntering'];

Callback fired when the Menu is entering.
Deprecated
Use the TransitionProps prop instead.

property onExit

onExit?: PopoverProps['onExit'];

Callback fired before the Menu exits.
Deprecated
Use the TransitionProps prop instead.

property onExited

onExited?: PopoverProps['onExited'];

Callback fired when the Menu has exited.
Deprecated
Use the TransitionProps prop instead.

property onExiting

onExiting?: PopoverProps['onExiting'];

Callback fired when the Menu is exiting.
Deprecated
Use the TransitionProps prop instead.

property open

open: boolean;

If true, the menu is visible.

property PopoverClasses

PopoverClasses?: PopoverProps['classes'];

classes prop applied to the [Popover](/api/popover/) element.

property transitionDuration

transitionDuration?: TransitionProps['timeout'] | 'auto';

The length of the transition in ms, or 'auto'

property TransitionProps

TransitionProps?: TransitionProps;

Props applied to the transition element. By default, the element is based on this [Transition](http://reactcommunity.org/react-transition-group/transition) component.

property variant

variant?: 'menu' | 'selectedMenu';

The variant to use. Use menu to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element.

interface MobileStepperProps

interface MobileStepperProps
    extends StandardProps<
        PaperProps,
        MobileStepperClassKey,
        'children' | 'variant'
    > {}

property activeStep

activeStep?: number;

Set the active step (zero based index). Defines which dot is highlighted when the variant is 'dots'.

property backButton

backButton: React.ReactNode;

A back button element. For instance, it can be a Button or an IconButton.

property LinearProgressProps

LinearProgressProps?: Partial<LinearProgressProps>;

Props applied to the LinearProgress element.

property nextButton

nextButton: React.ReactNode;

A next button element. For instance, it can be a Button or an IconButton.

property position

position?: 'bottom' | 'top' | 'static';

Set the positioning type.

property steps

steps: number;

The total steps.

property variant

variant?: 'text' | 'dots' | 'progress';

The variant to use.

interface ModalProps

interface ModalProps
    extends StandardProps<React.HTMLAttributes<HTMLDivElement>, never, 'children'> {}

property BackdropComponent

BackdropComponent?: React.ElementType<BackdropProps>;

property BackdropProps

BackdropProps?: Partial<BackdropProps>;

property children

children: React.ReactElement;

property closeAfterTransition

closeAfterTransition?: boolean;

property container

container?: PortalProps['container'];

property disableAutoFocus

disableAutoFocus?: boolean;

property disableBackdropClick

disableBackdropClick?: boolean;

If true, clicking the backdrop will not fire the onClose callback.
Deprecated
Use the onClose prop with the reason argument to filter the backdropClick events.

property disableEnforceFocus

disableEnforceFocus?: boolean;

property disableEscapeKeyDown

disableEscapeKeyDown?: boolean;

property disablePortal

disablePortal?: PortalProps['disablePortal'];

property disableRestoreFocus

disableRestoreFocus?: boolean;

property disableScrollLock

disableScrollLock?: boolean;

property hideBackdrop

hideBackdrop?: boolean;

property keepMounted

keepMounted?: boolean;

property manager

manager?: ModalManager;

property onBackdropClick

onBackdropClick?: React.ReactEventHandler<{}>;

Callback fired when the backdrop is clicked.
Deprecated
Use the onClose prop with the reason argument to handle the backdropClick events.

property onClose

onClose?: {
    bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
}['bivarianceHack'];

Callback fired when the component requests to be closed.
Parameter event
The event source of the callback.
Parameter reason
Can be: "escapeKeyDown", "backdropClick".

property onEscapeKeyDown

onEscapeKeyDown?: React.ReactEventHandler<{}>;

Callback fired when the escape key is pressed, disableKeyboard is false and the modal is in focus.
Deprecated
Use the onClose prop with the reason argument to handle the escapeKeyDown events.

property onRendered

onRendered?: PortalProps['onRendered'];

Callback fired once the children has been mounted into the container. It signals that the open={true} prop took effect.
This prop will be removed in v5, the ref can be used instead.
Deprecated
Use the ref instead.

property open

open: boolean;

If true, the modal is open.

interface MuiMediaQueryList

interface MuiMediaQueryList {}

property addListener

addListener: (listener: MuiMediaQueryListListener) => void;

property matches

matches: boolean;

property removeListener

removeListener: (listener: MuiMediaQueryListListener) => void;

interface MuiMediaQueryListEvent

interface MuiMediaQueryListEvent {}

property matches

matches: boolean;

interface NativeSelectProps

interface NativeSelectProps
    extends StandardProps<
        InputProps,
        NativeSelectClassKey,
        'inputProps' | 'value' | 'onChange'
    > {}

property children

children?: React.ReactNode;

The option elements to populate the select with. Can be some <option> elements.

property IconComponent

IconComponent?: React.ElementType;

The icon that displays the arrow.

property input

input?: React.ReactElement<any, any>;

An Input element; does not have to be a material-ui specific Input.

property inputProps

inputProps?: NativeSelectInputProps;

Attributes applied to the select element.

property onChange

onChange?: NativeSelectInputProps['onChange'];

Callback function fired when a menu item is selected.
Parameter event
The event source of the callback. You can pull out the new value by accessing event.target.value (string).

property value

value?: unknown;

The input value. The DOM API casts this to a string.

property variant

variant?: 'standard' | 'outlined' | 'filled';

The variant to use.

interface NoSsrProps

interface NoSsrProps {}

property children

children?: React.ReactNode;

You can wrap a node.

property defer

defer?: boolean;

If true, the component will not only prevent server-side rendering. It will also defer the rendering of the children into a different screen frame.

property fallback

fallback?: React.ReactNode;

The fallback content to display.

interface Options

interface Options {}

property defaultMatches

defaultMatches?: boolean;

property noSsr

noSsr?: boolean;

property ssrMatchMedia

ssrMatchMedia?: (query: string) => { matches: boolean };

interface OutlinedInputProps

interface OutlinedInputProps
    extends StandardProps<InputBaseProps, OutlinedInputClassKey> {}

property label

label?: React.ReactNode;

The label of the input. It is only used for layout. The actual labelling is handled by InputLabel. If specified labelWidth is ignored.

property labelWidth

labelWidth?: number;

The width of the label. Is ignored if label is provided. Prefer label if the input label appears with a strike through.

property notched

notched?: boolean;

If true, the outline is notched to accommodate the label.

interface OutlinedTextFieldProps

interface OutlinedTextFieldProps extends BaseTextFieldProps {}

property inputProps

inputProps?: OutlinedInputProps['inputProps'];

[Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the input element.

property InputProps

InputProps?: Partial<OutlinedInputProps>;

Props applied to the Input element. It will be a [FilledInput](/api/filled-input/), [OutlinedInput](/api/outlined-input/) or [Input](/api/input/) component depending on the variant prop value.

property onBlur

onBlur?: OutlinedInputProps['onBlur'];

property onChange

onChange?: OutlinedInputProps['onChange'];

Callback fired when the value is changed.
Parameter event
The event source of the callback. You can pull out the new value by accessing event.target.value (string).

property onFocus

onFocus?: OutlinedInputProps['onFocus'];

property variant

variant: 'outlined';

The variant to use.

interface OverridableCardHeader

interface OverridableCardHeader extends OverridableComponent<CardHeaderTypeMap> {}

call signature

<
    DefaultComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
    Props = {},
    TitleTypographyComponent extends React.ElementType = 'span',
    SubheaderTypographyComponent extends React.ElementType = 'span'
>(
    props: CardHeaderPropsWithComponent<
        DefaultComponent,
        Props,
        TitleTypographyComponent,
        SubheaderTypographyComponent
    >
): JSX.Element;

interface PaperProps

interface PaperProps
    extends StandardProps<React.HTMLAttributes<HTMLDivElement>, PaperClassKey> {}

property children

children?: React.ReactNode;

The content of the component.

property component

component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;

The component used for the root node. Either a string to use a HTML element or a component.

property elevation

elevation?: number;

Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive.

property square

square?: boolean;

If true, rounded corners are disabled.

property variant

variant?: 'elevation' | 'outlined';

The variant to use.

interface PopoverActions

interface PopoverActions {}

method updatePosition

updatePosition: () => void;

interface PopoverOrigin

interface PopoverOrigin {}

property horizontal

horizontal: 'left' | 'center' | 'right' | number;

property vertical

vertical: 'top' | 'center' | 'bottom' | number;

interface PopoverPosition

interface PopoverPosition {}

property left

left: number;

property top

top: number;

interface PopoverProps

interface PopoverProps
    extends StandardProps<
        ModalProps & Partial<TransitionHandlerProps>,
        PopoverClassKey,
        'children'
    > {}

property action

action?: React.Ref<PopoverActions>;

A ref for imperative actions. It currently only supports updatePosition() action.

property anchorEl

anchorEl?: null | Element | ((element: Element) => Element);

A HTML element, or a function that returns it. It's used to set the position of the popover.

property anchorOrigin

anchorOrigin?: PopoverOrigin;

This is the point on the anchor where the popover's anchorEl will attach to. This is not used when the anchorReference is 'anchorPosition'.
Options: vertical: [top, center, bottom]; horizontal: [left, center, right].

property anchorPosition

anchorPosition?: PopoverPosition;

This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area.

property anchorReference

anchorReference?: PopoverReference;

This determines which anchor prop to refer to to set the position of the popover.

property children

children?: React.ReactNode;

The content of the component.

property container

container?: ModalProps['container'];

A HTML element, component instance, or function that returns either. The container will passed to the Modal component.
By default, it uses the body of the anchorEl's top-level document object, so it's simply document.body most of the time.

property elevation

elevation?: number;

The elevation of the popover.

property getContentAnchorEl

getContentAnchorEl?: null | ((element: Element) => Element);

This function is called in order to retrieve the content anchor element. It's the opposite of the anchorEl prop. The content anchor element should be an element inside the popover. It's used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element.

property marginThreshold

marginThreshold?: number;

Specifies how close to the edge of the window the popover can appear.

property onClose

onClose?: ModalProps['onClose'];

property onEnter

onEnter?: TransitionHandlerProps['onEnter'];

Callback fired before the component is entering.
Deprecated
Use the TransitionProps prop instead.

property onEntered

onEntered?: TransitionHandlerProps['onEntered'];

Callback fired when the component has entered.
Deprecated
Use the TransitionProps prop instead.

property onEntering

onEntering?: TransitionHandlerProps['onEntering'];

Callback fired when the component is entering.
Deprecated
Use the TransitionProps prop instead.

property onExit

onExit?: TransitionHandlerProps['onExit'];

Callback fired before the component is exiting.
Deprecated
Use the TransitionProps prop instead.

property onExited

onExited?: TransitionHandlerProps['onExited'];

Callback fired when the component has exited.
Deprecated
Use the TransitionProps prop instead.

property onExiting

onExiting?: TransitionHandlerProps['onExiting'];

Callback fired when the component is exiting.
Deprecated
Use the TransitionProps prop instead.

property open

open: boolean;

If true, the popover is visible.

property PaperProps

PaperProps?: Partial<PaperProps>;

Props applied to the [Paper](/api/paper/) element.

property transformOrigin

transformOrigin?: PopoverOrigin;

This is the point on the popover which will attach to the anchor's origin.
Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)].

property TransitionComponent

TransitionComponent?: React.ComponentType<
    TransitionProps & { children?: React.ReactElement<any, any> }
>;

The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

property transitionDuration

transitionDuration?: TransitionProps['timeout'] | 'auto';

Set to 'auto' to automatically calculate transition time based on height.

property TransitionProps

TransitionProps?: TransitionProps;

Props applied to the [Transition](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.

interface PopperProps

interface PopperProps
    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {}

property anchorEl

anchorEl?: null | ReferenceObject | (() => ReferenceObject);

A HTML element, [referenceObject](https://popper.js.org/docs/v1/#referenceObject), or a function that returns either. It's used to set the position of the popper. The return value will passed as the reference object of the Popper instance.

property children

children:
    | React.ReactNode
    | ((props: {
          placement: PopperPlacementType;
          TransitionProps?: {
              in: boolean;
              onEnter: () => {};
              onExited: () => {};
          };
      }) => React.ReactNode);

Popper render function or node.

property container

container?: PortalProps['container'];

A HTML element, component instance, or function that returns either. The container will have the portal children appended to it.
By default, it uses the body of the top-level document object, so it's simply document.body most of the time.

property disablePortal

disablePortal?: PortalProps['disablePortal'];

Disable the portal behavior. The children stay within it's parent DOM hierarchy.

property keepMounted

keepMounted?: boolean;

Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper.

property modifiers

modifiers?: object;

Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".
A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v1/#modifiers).

property open

open: boolean;

If true, the popper is visible.

property placement

placement?: PopperPlacementType;

Popper placement.

property popperOptions

popperOptions?: object;

Options provided to the [popper.js](https://popper.js.org/docs/v1/) instance.

property popperRef

popperRef?: React.Ref<PopperJs>;

A ref that points to the used popper instance.

property ref

ref?: React.Ref<HTMLDivElement>;

property transition

transition?: boolean;

Help supporting a react-transition-group/Transition component.

interface PortalProps

interface PortalProps {}

property children

children?: React.ReactNode;

The children to render into the container.

property container

container?: React.ReactInstance | (() => React.ReactInstance | null) | null;

A HTML element, component instance, or function that returns either. The container will have the portal children appended to it.
By default, it uses the body of the top-level document object, so it's simply document.body most of the time.

property disablePortal

disablePortal?: boolean;

Disable the portal behavior. The children stay within it's parent DOM hierarchy.

property onRendered

onRendered?: () => void;

Callback fired once the children has been mounted into the container.
This prop will be removed in v5, the ref can be used instead.
Deprecated
Use the ref instead.

interface RadioGroupProps

interface RadioGroupProps
    extends StandardProps<FormGroupProps, RadioGroupClassKey, 'onChange'> {}

property defaultValue

defaultValue?: FormGroupProps['defaultValue'];

The default input element value. Use when the component is not controlled.

property name

name?: string;

The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name.

property onChange

onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;

Callback fired when a radio button is selected.
Parameter event
The event source of the callback. You can pull out the new value by accessing event.target.value (string).

property value

value?: any;

Value of the selected radio button. The DOM API casts this to a string.

interface RadioGroupState

interface RadioGroupState
    extends Pick<RadioGroupProps, 'name' | 'onChange' | 'value'> {}

interface RadioProps

interface RadioProps
    extends StandardProps<
        SwitchBaseProps,
        RadioClassKey,
        'checkedIcon' | 'color' | 'icon' | 'type'
    > {}

property checkedIcon

checkedIcon?: React.ReactNode;

The icon to display when the component is checked.

property color

color?: 'primary' | 'secondary' | 'default';

The color of the component. It supports those theme colors that make sense for this component.

property disabled

disabled?: boolean;

If true, the radio will be disabled.

property icon

icon?: React.ReactNode;

The icon to display when the component is unchecked.

property size

size?: 'small' | 'medium';

The size of the radio. small is equivalent to the dense radio styling.

interface RootRefProps

interface RootRefProps<T = any> {}

property rootRef

rootRef?: ((instance: T | null) => void) | React.RefObject<T>;

interface SelectProps

interface SelectProps
    extends StandardProps<InputProps, SelectClassKey, 'value' | 'onChange'>,
        Pick<SelectInputProps, 'onChange'> {}

property autoWidth

autoWidth?: boolean;

If true, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input.

property children

children?: React.ReactNode;

The option elements to populate the select with. Can be some MenuItem when native is false and option when native is true.
⚠️The MenuItem elements **must** be direct descendants when native is false.

property defaultValue

defaultValue?: unknown;

The default element value. Use when the component is not controlled.

property displayEmpty

displayEmpty?: boolean;

If true, a value is displayed even if no items are selected.
In order to display a meaningful value, a function should be passed to the renderValue prop which returns the value to be displayed when no items are selected. You can only use it when the native prop is false (default).

property IconComponent

IconComponent?: React.ElementType;

The icon that displays the arrow.

property id

id?: string;

The id of the wrapper element or the select element when native.

property input

input?: React.ReactElement<any, any>;

An Input element; does not have to be a material-ui specific Input.

property inputProps

inputProps?: InputProps['inputProps'];

[Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the input element. When native is true, the attributes are applied on the select element.

property label

label?: React.ReactNode;

See [OutlinedInput#label](/api/outlined-input/#props)

property labelId

labelId?: string;

The ID of an element that acts as an additional label. The Select will be labelled by the additional label and the selected value.

property labelWidth

labelWidth?: number;

See [OutlinedInput#label](/api/outlined-input/#props)

property MenuProps

MenuProps?: Partial<MenuProps>;

Props applied to the [Menu](/api/menu/) element.

property multiple

multiple?: boolean;

If true, value must be an array and the menu will support multiple selections.

property native

native?: boolean;

If true, the component will be using a native select element.

property onChange

onChange?: SelectInputProps['onChange'];

Callback function fired when a menu item is selected.
Parameter event
The event source of the callback. You can pull out the new value by accessing event.target.value (any).
Parameter child
The react element that was selected when native is false (default).

property onClose

onClose?: (event: React.ChangeEvent<{}>) => void;

Callback fired when the component requests to be closed. Use in controlled mode (see open).
Parameter event
The event source of the callback.

property onOpen

onOpen?: (event: React.ChangeEvent<{}>) => void;

Callback fired when the component requests to be opened. Use in controlled mode (see open).
Parameter event
The event source of the callback.

property open

open?: boolean;

Control select open state. You can only use it when the native prop is false (default).

property renderValue

renderValue?: (value: SelectProps['value']) => React.ReactNode;

Render the selected value. You can only use it when the native prop is false (default).
Parameter value
The value provided to the component.
Returns
{ReactNode}

property SelectDisplayProps

SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;

Props applied to the clickable div element.

property value

value?: unknown;

The input value. Providing an empty string will select no options. This prop is required when the native prop is false (default). Set to an empty string '' if you don't want any of the available options to be selected.
If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected.

property variant

variant?: 'standard' | 'outlined' | 'filled';

The variant to use.

interface SimplePaletteColorOptions

interface SimplePaletteColorOptions {}

property contrastText

contrastText?: string;

property dark

dark?: string;

property light

light?: string;

property main

main: string;

interface SlideProps

interface SlideProps extends TransitionProps {}

property children

children?: React.ReactElement<any, any>;

A single child content element.

property direction

direction?: 'left' | 'right' | 'up' | 'down';

Direction the child node will enter from.

property in

in?: TransitionProps['in'];

If true, show the component; triggers the enter or exit animation.

property ref

ref?: React.Ref<unknown>;

property timeout

timeout?: TransitionProps['timeout'];

The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

interface SliderTypeMap

interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {}

property classKey

classKey: SliderClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    'aria-label'?: string;
    'aria-labelledby'?: string;
    'aria-valuetext'?: string;
    color?: 'primary' | 'secondary';
    defaultValue?: number | number[];
    disabled?: boolean;
    getAriaLabel?: (index: number) => string;
    getAriaValueText?: (value: number, index: number) => string;
    marks?: boolean | Mark[];
    max?: number;
    min?: number;
    name?: string;
    onChange?: (event: React.ChangeEvent<{}>, value: number | number[]) => void;
    onChangeCommitted?: (
        event: React.ChangeEvent<{}>,
        value: number | number[]
    ) => void;
    orientation?: 'horizontal' | 'vertical';
    step?: number | null;
    scale?: (value: number) => number;
    ThumbComponent?: React.ElementType<React.HTMLAttributes<HTMLSpanElement>>;
    track?: 'normal' | false | 'inverted';
    value?: number | number[];
    ValueLabelComponent?: React.ElementType<ValueLabelProps>;
    valueLabelDisplay?: 'on' | 'auto' | 'off';
    valueLabelFormat?:
        | string
        | ((value: number, index: number) => React.ReactNode);
};

interface SnackbarContentProps

interface SnackbarContentProps
    extends StandardProps<PaperProps, SnackbarContentClassKey, 'children'> {}

property action

action?: React.ReactNode;

The action to display. It renders after the message, at the end of the snackbar.

property message

message?: React.ReactNode;

The message to display.

property role

role?: PaperProps['role'];

The ARIA role attribute of the element.

interface SnackbarOrigin

interface SnackbarOrigin {}

property horizontal

horizontal: 'left' | 'center' | 'right';

property vertical

vertical: 'top' | 'bottom';

interface SnackbarProps

interface SnackbarProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlerProps>,
        SnackbarClassKey
    > {}

property action

action?: SnackbarContentProps['action'];

The action to display. It renders after the message, at the end of the snackbar.

property anchorOrigin

anchorOrigin?: SnackbarOrigin;

The anchor of the Snackbar.

property autoHideDuration

autoHideDuration?: number | null;

The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar. This behavior is disabled by default with the null value.

property children

children?: React.ReactElement<any, any>;

Replace the SnackbarContent component.

property ClickAwayListenerProps

ClickAwayListenerProps?: Partial<ClickAwayListenerProps>;

Props applied to the ClickAwayListener element.

property ContentProps

ContentProps?: Partial<SnackbarContentProps>;

Props applied to the [SnackbarContent](/api/snackbar-content/) element.

property disableWindowBlurListener

disableWindowBlurListener?: boolean;

If true, the autoHideDuration timer will expire even if the window is not focused.

property key

key?: any;

When displaying multiple consecutive Snackbars from a parent rendering a single , add the key prop to ensure independent treatment of each message. e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and features such as autoHideDuration may be canceled.

property message

message?: SnackbarContentProps['message'];

The message to display.

property onClose

onClose?: (
    event: React.SyntheticEvent<any>,
    reason: SnackbarCloseReason
) => void;

Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway.
Parameter event
The event source of the callback.
Parameter reason
Can be: "timeout" (autoHideDuration expired), "clickaway".

property onEnter

onEnter?: TransitionHandlerProps['onEnter'];

Callback fired before the transition is entering.
Deprecated
Use the TransitionProps prop instead.

property onEntered

onEntered?: TransitionHandlerProps['onEntered'];

Callback fired when the transition has entered.
Deprecated
Use the TransitionProps prop instead.

property onEntering

onEntering?: TransitionHandlerProps['onEntering'];

Callback fired when the transition is entering.
Deprecated
Use the TransitionProps prop instead.

property onExit

onExit?: TransitionHandlerProps['onExit'];

Callback fired before the transition is exiting.
Deprecated
Use the TransitionProps prop instead.

property onExited

onExited?: TransitionHandlerProps['onExited'];

Callback fired when the transition has exited.
Deprecated
Use the TransitionProps prop instead.

property onExiting

onExiting?: TransitionHandlerProps['onExiting'];

Callback fired when the transition is exiting.
Deprecated
Use the TransitionProps prop instead.

property onMouseEnter

onMouseEnter?: React.MouseEventHandler<any>;

property onMouseLeave

onMouseLeave?: React.MouseEventHandler<any>;

property open

open?: boolean;

If true, Snackbar is open.

property resumeHideDuration

resumeHideDuration?: number;

The number of milliseconds to wait before dismissing after user interaction. If autoHideDuration prop isn't specified, it does nothing. If autoHideDuration prop is specified but resumeHideDuration isn't, we default to autoHideDuration / 2 ms.

property TransitionComponent

TransitionComponent?: React.ComponentType<
    TransitionProps & { children?: React.ReactElement<any, any> }
>;

The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

property transitionDuration

transitionDuration?: TransitionProps['timeout'];

The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

property TransitionProps

TransitionProps?: TransitionProps;

Props applied to the [Transition](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.

interface StandardTextFieldProps

interface StandardTextFieldProps extends BaseTextFieldProps {}

property inputProps

inputProps?: StandardInputProps['inputProps'];

[Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the input element.

property InputProps

InputProps?: Partial<StandardInputProps>;

Props applied to the Input element. It will be a [FilledInput](/api/filled-input/), [OutlinedInput](/api/outlined-input/) or [Input](/api/input/) component depending on the variant prop value.

property onBlur

onBlur?: StandardInputProps['onBlur'];

property onChange

onChange?: StandardInputProps['onChange'];

Callback fired when the value is changed.
Parameter event
The event source of the callback. You can pull out the new value by accessing event.target.value (string).

property onFocus

onFocus?: StandardInputProps['onFocus'];

property variant

variant?: 'standard';

The variant to use.

interface StepConnectorProps

interface StepConnectorProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        StepConnectorClasskey,
        'children'
    > {}

interface StepContentProps

interface StepContentProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        StepContentClasskey
    > {}

property children

children?: React.ReactNode;

Step content.

property TransitionComponent

TransitionComponent?: React.ComponentType<TransitionProps>;

The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

property transitionDuration

transitionDuration?: TransitionProps['timeout'] | 'auto';

Adjust the duration of the content expand transition. Passed as a prop to the transition component.
Set to 'auto' to automatically calculate transition time based on height.

property TransitionProps

TransitionProps?: TransitionProps;

Props applied to the [Transition](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.

interface StepIconProps

interface StepIconProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        StepIconClasskey,
        'children'
    > {}

property active

active?: boolean;

Whether this step is active.

property completed

completed?: boolean;

Mark the step as completed. Is passed to child components.

property error

error?: boolean;

Mark the step as failed.

property icon

icon: React.ReactNode;

The label displayed in the step icon.

interface StepLabelProps

interface StepLabelProps
    extends StandardProps<React.HTMLAttributes<HTMLDivElement>, StepLabelClasskey> {}

property children

children?: React.ReactNode;

In most cases will simply be a string containing a title for the label.

property disabled

disabled?: boolean;

Mark the step as disabled, will also disable the button if StepLabelButton is a child of StepLabel. Is passed to child components.

property error

error?: boolean;

Mark the step as failed.

property icon

icon?: React.ReactNode;

Override the default label of the step icon.

property optional

optional?: React.ReactNode;

The optional node to display.

property StepIconComponent

StepIconComponent?: React.ElementType;

The component to render in place of the [StepIcon](/api/step-icon/).

property StepIconProps

StepIconProps?: Partial<StepIconProps>;

Props applied to the [StepIcon](/api/step-icon/) element.

interface StepperProps

interface StepperProps extends StandardProps<PaperProps, StepperClasskey> {}

property activeStep

activeStep?: number;

Set the active step (zero based index). Set to -1 to disable all the steps.

property alternativeLabel

alternativeLabel?: boolean;

If set to 'true' and orientation is horizontal, then the step label will be positioned under the icon.

property children

children: React.ReactNode;

Two or more <Step /> components.

property connector

connector?: React.ReactElement<any, any>;

An element to be placed between each step.

property nonLinear

nonLinear?: boolean;

If set the Stepper will not assist in controlling steps for linear flow.

property orientation

orientation?: Orientation;

The stepper orientation (layout flow direction).

interface StepProps

interface StepProps
    extends StandardProps<React.HTMLAttributes<HTMLDivElement>, StepClasskey> {}

property active

active?: boolean;

Sets the step as active. Is passed to child components.

property children

children?: React.ReactNode;

Should be Step sub-components such as StepLabel, StepContent.

property completed

completed?: boolean;

Mark the step as completed. Is passed to child components.

property disabled

disabled?: boolean;

Mark the step as disabled, will also disable the button if StepButton is a child of Step. Is passed to child components.

property expanded

expanded?: boolean;

Expand the step.

interface StyledProps

interface StyledProps {}

property className

className: string;

interface SvgIconTypeMap

interface SvgIconTypeMap<P = {}, D extends React.ElementType = 'svg'> {}

property classKey

classKey: SvgIconClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * Node passed into the SVG element.
     */
    children?: React.ReactNode;
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
     */
    color?:
        | 'inherit'
        | 'primary'
        | 'secondary'
        | 'action'
        | 'disabled'
        | 'error';
    /**
     * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
     */
    fontSize?: 'default' | 'inherit' | 'large' | 'medium' | 'small';
    /**
     * Applies a color attribute to the SVG element.
     */
    htmlColor?: string;
    /**
     * The shape-rendering attribute. The behavior of the different options is described on the
     * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
     * If you are having issues with blurry icons you should investigate this prop.
     * @document
     */
    shapeRendering?: string;
    /**
     * Provides a human-readable title for the element that contains it.
     * https://www.w3.org/TR/SVG-access/#Equivalent
     */
    titleAccess?: string;
    /**
     * Allows you to redefine what the coordinates without units mean inside an SVG element.
     * For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20",
     * this means that the coordinates inside the SVG will go from the top left corner (0,0)
     * to bottom right (50,20) and each unit will be worth 10px.
     */
    viewBox?: string;
};

interface SwipeableDrawerProps

interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open'> {}

property disableBackdropTransition

disableBackdropTransition?: boolean;

property disableDiscovery

disableDiscovery?: boolean;

property disableSwipeToOpen

disableSwipeToOpen?: boolean;

property hysteresis

hysteresis?: number;

property minFlingVelocity

minFlingVelocity?: number;

property onClose

onClose: React.ReactEventHandler<{}>;

property onOpen

onOpen: React.ReactEventHandler<{}>;

property open

open: boolean;

property SwipeAreaProps

SwipeAreaProps?: object;

property swipeAreaWidth

swipeAreaWidth?: number;

interface SwitchProps

interface SwitchProps
    extends StandardProps<
        SwitchBaseProps,
        SwitchClassKey,
        'checkedIcon' | 'color' | 'icon'
    > {}

property checkedIcon

checkedIcon?: React.ReactNode;

The icon to display when the component is checked.

property color

color?: 'primary' | 'secondary' | 'default';

The color of the component. It supports those theme colors that make sense for this component.

property disabled

disabled?: boolean;

If true, the switch will be disabled.

property icon

icon?: React.ReactNode;

The icon to display when the component is unchecked.

property size

size?: 'small' | 'medium';

The size of the switch. small is equivalent to the dense switch styling.

property value

value?: unknown;

The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value.

interface TableBodyTypeMap

interface TableBodyTypeMap<P extends {} = {}, D extends React.ElementType = 'tbody'>
    extends OverridableTypeMap {}

property classKey

classKey: TableBodyClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P;

interface TableCellProps

interface TableCellProps
    extends StandardProps<TableCellBaseProps, TableCellClassKey, 'align'> {}

<TableCell> will be rendered as an <th>or <td> depending on the context it is used in. Where context literally is the React context.
Since it is not decided via prop, we have create loose typings here.

property align

align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';

Set the text-align on the table cell content.
Monetary or generally number fields **should be right aligned** as that allows you to add them up quickly in your head without having to worry about decimals.

property children

children?: React.ReactNode;

The table cell contents.

property component

component?: React.ElementType<TableCellBaseProps>;

The component used for the root node. Either a string to use a HTML element or a component.

property padding

padding?: Padding;

Sets the padding applied to the cell. By default, the Table parent component set the value (normal). default is deprecated, use normal instead.

property scope

scope?: TableCellBaseProps['scope'];

Set scope attribute.

property size

size?: Size;

Specify the size of the cell. By default, the Table parent component set the value (medium).

property sortDirection

sortDirection?: SortDirection;

Set aria-sort direction.

property variant

variant?: 'head' | 'body' | 'footer';

Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value.

interface TableContainerTypeMap

interface TableContainerTypeMap<
    P extends {} = {},
    D extends React.ElementType = 'div'
> extends OverridableTypeMap {}

property classKey

classKey: TableContainerClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P;

interface TableFooterTypeMap

interface TableFooterTypeMap<
    P extends {} = {},
    D extends React.ElementType = 'tfoot'
> extends OverridableTypeMap {}

property classKey

classKey: TableFooterClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P;

interface TableHeadTypeMap

interface TableHeadTypeMap<P extends {} = {}, D extends React.ElementType = 'thead'>
    extends OverridableTypeMap {}

property classKey

classKey: TableHeadClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P;

interface TablePaginationTypeMap

interface TablePaginationTypeMap<P, D extends React.ElementType> {}

property classKey

classKey: TablePaginationClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P &
    TablePaginationBaseProps & {
        ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
        backIconButtonText?: string;
        backIconButtonProps?: Partial<IconButtonProps>;
        count: number;
        labelDisplayedRows?: (
            paginationInfo: LabelDisplayedRowsArgs
        ) => React.ReactNode;
        labelRowsPerPage?: React.ReactNode;
        nextIconButtonProps?: Partial<IconButtonProps>;
        nextIconButtonText?: string;
        /**
         * Callback fired when the page is changed.
         *
         * @param {object} event The event source of the callback.
         * @param {number} page The page selected.
         * @deprecated Use the onPageChange prop instead.
         */
        onChangePage?: (
            event: React.MouseEvent<HTMLButtonElement> | null,
            page: number
        ) => void;
        onPageChange: (
            event: React.MouseEvent<HTMLButtonElement> | null,
            page: number
        ) => void;
        /**
         * Callback fired when the number of rows per page is changed.
         *
         * @param {object} event The event source of the callback.
         * @deprecated Use the onRowsPerPageChange prop instead.
         */
        onChangeRowsPerPage?: React.ChangeEventHandler<
            HTMLTextAreaElement | HTMLInputElement
        >;
        onRowsPerPageChange?: React.ChangeEventHandler<
            HTMLTextAreaElement | HTMLInputElement
        >;
        page: number;
        rowsPerPage: number;
        rowsPerPageOptions?: Array<number | { value: number; label: string }>;
        SelectProps?: Partial<SelectProps>;
    };

interface TableRowTypeMap

interface TableRowTypeMap<P = {}, D extends React.ElementType = 'tr'> {}

property classKey

classKey: TableRowClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    hover?: boolean;
    selected?: boolean;
};

interface TableTypeMap

interface TableTypeMap<P = {}, D extends React.ElementType = 'table'> {}

property classKey

classKey: TableClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    padding?: Padding;
    size?: Size;
    stickyHeader?: boolean;
};

interface TabsActions

interface TabsActions {}

method updateIndicator

updateIndicator: () => void;

method updateScrollButtons

updateScrollButtons: () => void;

interface TabScrollButtonProps

interface TabScrollButtonProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        TabScrollButtonClassKey
    > {}

property children

children?: React.ReactNode;

The content of the component.

property direction

direction: 'left' | 'right';

Which direction should the button indicate?

property disabled

disabled?: boolean;

If true, the element will be disabled.

property orientation

orientation: 'horizontal' | 'vertical';

The tabs orientation (layout flow direction).

interface TabsTypeMap

interface TabsTypeMap<P = {}, D extends React.ElementType = typeof ButtonBase> {}

property classKey

classKey: TabsClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    /**
     * Callback fired when the component mounts.
     * This is useful when you want to trigger an action programmatically.
     * It supports two actions: `updateIndicator()` and `updateScrollButtons()`
     *
     * @param {object} actions This object contains all possible actions
     * that can be triggered programmatically.
     */
    action?: React.Ref<TabsActions>;
    /**
     * The label for the Tabs as a string.
     */
    'aria-label'?: string;
    /**
     * An id or list of ids separated by a space that label the Tabs.
     */
    'aria-labelledby'?: string;
    /**
     * If `true`, the tabs will be centered.
     * This property is intended for large views.
     */
    centered?: boolean;
    /**
     * The content of the component.
     */
    children?: React.ReactNode;
    /**
     * Determines the color of the indicator.
     */
    indicatorColor?: 'secondary' | 'primary';
    /**
     * Callback fired when the value changes.
     *
     * @param {object} event The event source of the callback
     * @param {any} value We default to the index of the child (number)
     */
    onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
    /**
     * The tabs orientation (layout flow direction).
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * The component used to render the scroll buttons.
     */
    ScrollButtonComponent?: React.ElementType;
    /**
     * Determine behavior of scroll buttons when tabs are set to scroll:
     *
     * - `auto` will only present them when not all the items are visible.
     * - `desktop` will only present them on medium and larger viewports.
     * - `on` will always present them.
     * - `off` will never present them.
     */
    scrollButtons?: 'auto' | 'desktop' | 'on' | 'off';
    /**
     * If `true` the selected tab changes on focus. Otherwise it only
     * changes on activation.
     */
    selectionFollowsFocus?: boolean;
    /**
     * Props applied to the tab indicator element.
     */
    TabIndicatorProps?: Partial<React.HTMLAttributes<HTMLDivElement>>;
    /**
     * Props applied to the [`TabScrollButton`](/api/tab-scroll-button/) element.
     */
    TabScrollButtonProps?: Partial<TabScrollButtonProps>;
    /**
     * Determines the color of the `Tab`.
     */
    textColor?: 'secondary' | 'primary' | 'inherit';
    /**
     * The value of the currently selected `Tab`.
     * If you don't want any selected `Tab`, you can set this property to `false`.
     */
    value?: any;
    /**
     *  Determines additional display behavior of the tabs:
     *
     *  - `scrollable` will invoke scrolling properties and allow for horizontally
     *  scrolling (or swiping) of the tab bar.
     *  -`fullWidth` will make the tabs grow to use all the available space,
     *  which should be used for small views, like on mobile.
     *  - `standard` will render the default state.
     */
    variant?: 'standard' | 'scrollable' | 'fullWidth';
};

interface TextareaAutosizeProps

interface TextareaAutosizeProps
    extends Omit<
        React.TextareaHTMLAttributes<HTMLTextAreaElement>,
        'children' | 'rows'
    > {}

property maxRows

maxRows?: string | number;

Maximum number of rows to display.

property minRows

minRows?: string | number;

Minimum number of rows to display.

property ref

ref?: React.Ref<HTMLTextAreaElement>;

property rows

rows?: string | number;

Minimum number of rows to display.
Deprecated
Use minRows instead.

property rowsMax

rowsMax?: string | number;

Maximum number of rows to display.
Deprecated
Use maxRows instead.

property rowsMin

rowsMin?: string | number;

Minimum number of rows to display.
Deprecated
Use minRows instead.

interface Theme

interface Theme {}

property breakpoints

breakpoints: Breakpoints;

property direction

direction: Direction;

property mixins

mixins: Mixins;

property overrides

overrides?: Overrides;

property palette

palette: Palette;

property props

props?: ComponentsProps;

property shadows

shadows: Shadows;

property shape

shape: Shape;

property spacing

spacing: Spacing;

property transitions

transitions: Transitions;

property typography

typography: Typography;

property unstable_strictMode

unstable_strictMode?: boolean;

property zIndex

zIndex: ZIndex;

interface ThemeOptions

interface ThemeOptions {}

property breakpoints

breakpoints?: BreakpointsOptions;

property direction

direction?: Direction;

property mixins

mixins?: MixinsOptions;

property overrides

overrides?: Overrides;

property palette

palette?: PaletteOptions;

property props

props?: ComponentsProps;

property shadows

shadows?: Shadows;

property shape

shape?: ShapeOptions;

property spacing

spacing?: SpacingOptions;

property transitions

transitions?: TransitionsOptions;

property typography

typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);

property unstable_strictMode

unstable_strictMode?: boolean;

property zIndex

zIndex?: ZIndexOptions;

interface ToolbarTypeMap

interface ToolbarTypeMap<P = {}, D extends React.ElementType = 'div'> {}

property classKey

classKey: ToolbarClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    disableGutters?: boolean;
    variant?: 'regular' | 'dense';
};

interface TooltipProps

interface TooltipProps
    extends StandardProps<
        React.HTMLAttributes<HTMLDivElement>,
        TooltipClassKey,
        'title'
    > {}

property arrow

arrow?: boolean;

If true, adds an arrow to the tooltip.

property children

children: React.ReactElement<any, any>;

Tooltip reference element.

property disableFocusListener

disableFocusListener?: boolean;

Do not respond to focus events.

property disableHoverListener

disableHoverListener?: boolean;

Do not respond to hover events.

property disableTouchListener

disableTouchListener?: boolean;

Do not respond to long press touch events.

property enterDelay

enterDelay?: number;

The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (enterTouchDelay).

property enterNextDelay

enterNextDelay?: number;

The number of milliseconds to wait before showing the tooltip when one was already recently opened.

property enterTouchDelay

enterTouchDelay?: number;

The number of milliseconds a user must touch the element before showing the tooltip.

property id

id?: string;

This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.

property interactive

interactive?: boolean;

Makes a tooltip interactive, i.e. will not close when the user hovers over the tooltip before the leaveDelay is expired.

property leaveDelay

leaveDelay?: number;

The number of milliseconds to wait before hiding the tooltip. This prop won't impact the leave touch delay (leaveTouchDelay).

property leaveTouchDelay

leaveTouchDelay?: number;

The number of milliseconds after the user stops touching an element before hiding the tooltip.

property onClose

onClose?: (event: React.ChangeEvent<{}>) => void;

Callback fired when the component requests to be closed.
Parameter event
The event source of the callback.

property onOpen

onOpen?: (event: React.ChangeEvent<{}>) => void;

Callback fired when the component requests to be open.
Parameter event
The event source of the callback.

property open

open?: boolean;

If true, the tooltip is shown.

property placement

placement?:
    | 'bottom-end'
    | 'bottom-start'
    | 'bottom'
    | 'left-end'
    | 'left-start'
    | 'left'
    | 'right-end'
    | 'right-start'
    | 'right'
    | 'top-end'
    | 'top-start'
    | 'top';

Tooltip placement.

property PopperComponent

PopperComponent?: React.ComponentType<PopperProps>;

The component used for the popper.

property PopperProps

PopperProps?: Partial<PopperProps>;

Props applied to the [Popper](/api/popper/) element.

property title

title: NonNullable<React.ReactNode>;

Tooltip title. Zero-length titles string are never displayed.

property TransitionComponent

TransitionComponent?: React.ComponentType<
    TransitionProps & { children?: React.ReactElement<any, any> }
>;

The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

property TransitionProps

TransitionProps?: TransitionProps;

Props applied to the [Transition](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.

interface Transitions

interface Transitions {}

property duration

duration: Duration;

property easing

easing: Easing;

method create

create: (
    props: string | string[],
    options?: Partial<{
        duration: number | string;
        easing: string;
        delay: number | string;
    }>
) => string;

method getAutoHeightDuration

getAutoHeightDuration: (height: number) => number;

interface TransitionsOptions

interface TransitionsOptions {}

property create

create?: (
    props: string | string[],
    options?: Partial<{
        duration: number | string;
        easing: string;
        delay: number | string;
    }>
) => string;

property duration

duration?: Partial<Duration>;

property easing

easing?: Partial<Easing>;

property getAutoHeightDuration

getAutoHeightDuration?: (height: number) => number;

interface TrapFocusProps

interface TrapFocusProps {}

property children

children: React.ReactNode;

A single child content element.

property disableAutoFocus

disableAutoFocus?: boolean;

If true, the trap focus will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any trap focus children that have the disableAutoFocus prop.
Generally this should never be set to true as it makes the trap focus less accessible to assistive technologies, like screen readers.

property disableEnforceFocus

disableEnforceFocus?: boolean;

If true, the trap focus will not prevent focus from leaving the trap focus while open.
Generally this should never be set to true as it makes the trap focus less accessible to assistive technologies, like screen readers.

property disableRestoreFocus

disableRestoreFocus?: boolean;

If true, the trap focus will not restore focus to previously focused element once trap focus is hidden.

property getDoc

getDoc: () => Document;

Return the document to consider. We use it to implement the restore focus between different browser documents.

property isEnabled

isEnabled: () => boolean;

Do we still want to enforce the focus? This prop helps nesting TrapFocus elements.

property open

open: boolean;

If true, focus will be locked.

interface TypographyTypeMap

interface TypographyTypeMap<P = {}, D extends React.ElementType = 'span'> {}

property classKey

classKey: TypographyClassKey;

property defaultComponent

defaultComponent: D;

property props

props: P & {
    align?: PropTypes.Alignment;
    /**
     * The content of the component.
     */
    children?: React.ReactNode;
    color?:
        | 'initial'
        | 'inherit'
        | 'primary'
        | 'secondary'
        | 'textPrimary'
        | 'textSecondary'
        | 'error';
    display?: 'initial' | 'block' | 'inline';
    gutterBottom?: boolean;
    noWrap?: boolean;
    paragraph?: boolean;
    variant?: Variant | 'inherit';
    variantMapping?: Partial<Record<Variant, string>>;
};

interface ValueLabelProps

interface ValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {}

property children

children: React.ReactElement;

property open

open: boolean;

property value

value: number;

interface WithMobileDialog

interface WithMobileDialog extends WithWidth {}

property fullScreen

fullScreen: boolean;

interface WithMobileDialogOptions

interface WithMobileDialogOptions {}

property breakpoint

breakpoint: Breakpoint;

interface WithTheme

interface WithTheme {}

property theme

theme: Theme;

interface WithWidth

interface WithWidth {}

property width

width: Breakpoint;

interface WithWidthOptions

interface WithWidthOptions {}

property initialWidth

initialWidth?: Breakpoint;

property noSSR

noSSR?: boolean;

property resizeInterval

resizeInterval?: number;

property withTheme

withTheme?: boolean;

interface WithWidthProps

interface WithWidthProps extends Partial<WithWidth> {}

property innerRef

innerRef?: React.Ref<any>;

interface ZoomProps

interface ZoomProps extends TransitionProps {}

property children

children?: React.ReactElement<any, any>;

A single child content element.

property disableStrictModeCompat

disableStrictModeCompat?: boolean;

Enable this prop if you encounter 'Function components cannot be given refs', use unstable_createStrictModeTheme, and can't forward the ref in the child component.

property in

in?: boolean;

If true, the component will transition in.

property ref

ref?: React.Ref<unknown>;

property timeout

timeout?: TransitionProps['timeout'];

The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

Type Aliases

type AccordionActionsClassKey

type AccordionActionsClassKey = 'root' | 'spacing';

type AccordionClassKey

type AccordionClassKey = 'root' | 'rounded' | 'expanded' | 'disabled';

type AccordionDetailsClassKey

type AccordionDetailsClassKey = 'root';

type AccordionSummaryClassKey

type AccordionSummaryClassKey =
    | 'root'
    | 'expanded'
    // deprecated
    | 'focused'
    | 'focusVisible'
    | 'disabled'
    | 'content'
    | 'expandIcon';

type AccordionSummaryProps

type AccordionSummaryProps<
    D extends React.ElementType = AccordionSummaryTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<AccordionSummaryTypeMap<P, D>, D>;

type AccordionSummaryTypeMap

type AccordionSummaryTypeMap<
    P = {},
    D extends React.ElementType = 'div'
> = ExtendButtonBaseTypeMap<{
    props: P & {
        /**
         * The content of the accordion summary.
         */
        children?: React.ReactNode;
        /**
         * The icon to display as the expand indicator.
         */
        expandIcon?: React.ReactNode;
        /**
         * Props applied to the `IconButton` element wrapping the expand icon.
         */
        IconButtonProps?: Partial<IconButtonProps>;
    };
    defaultComponent: D;
    classKey: AccordionSummaryClassKey;
}>;

type AppBarClassKey

type AppBarClassKey =
    | 'root'
    | 'positionFixed'
    | 'positionAbsolute'
    | 'positionSticky'
    | 'positionStatic'
    | 'positionRelative'
    | 'colorDefault'
    | 'colorPrimary'
    | 'colorSecondary';

type AvatarClassKey

type AvatarClassKey =
    | 'root'
    | 'colorDefault'
    | 'circle'
    | 'circular'
    | 'rounded'
    | 'square'
    | 'img'
    | 'fallback';

type AvatarProps

type AvatarProps<
    D extends React.ElementType = AvatarTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<AvatarTypeMap<P, D>, D>;

type BackdropClassKey

type BackdropClassKey = 'root' | 'invisible';

type BadgeClassKey

type BadgeClassKey =
    | 'root'
    | 'badge'
    | 'colorPrimary'
    | 'colorSecondary'
    | 'colorError'
    | 'dot'
    | 'anchorOriginTopRightRectangle'
    | 'anchorOriginBottomRightRectangle'
    | 'anchorOriginTopLeftRectangle'
    | 'anchorOriginBottomLeftRectangle'
    | 'anchorOriginTopRightCircle'
    | 'anchorOriginBottomRightCircle'
    | 'anchorOriginTopLeftCircle'
    | 'anchorOriginTopRightRectangular'
    | 'anchorOriginBottomRightRectangular'
    | 'anchorOriginTopLeftRectangular'
    | 'anchorOriginBottomLeftRectangular'
    | 'anchorOriginTopRightCircular'
    | 'anchorOriginBottomRightCircular'
    | 'anchorOriginTopLeftCircular'
    | 'invisible';

type BadgeProps

type BadgeProps<
    D extends React.ElementType = BadgeTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<BadgeTypeMap<P, D>, D>;

type BottomNavigationActionClassKey

type BottomNavigationActionClassKey =
    | 'root'
    | 'selected'
    | 'iconOnly'
    | 'wrapper'
    | 'label';

type BottomNavigationActionProps

type BottomNavigationActionProps<
    D extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<BottomNavigationActionTypeMap<P, D>, D>;

type BottomNavigationActionTypeMap

type BottomNavigationActionTypeMap<
    P,
    D extends React.ElementType
> = ExtendButtonBaseTypeMap<{
    props: P & {
        /**
         * This prop isn't supported.
         * Use the `component` prop if you need to change the children structure.
         */
        children?: React.ReactNode;
        /**
         * The icon element.
         */
        icon?: React.ReactNode;
        /**
         * The label element.
         */
        label?: React.ReactNode;
        onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
        onClick?: React.ReactEventHandler<any>;
        selected?: boolean;
        /**
         * If `true`, the `BottomNavigationAction` will show its label.
         * By default, only the selected `BottomNavigationAction`
         * inside `BottomNavigation` will show its label.
         */
        showLabel?: boolean;
        /**
         * You can provide your own value. Otherwise, we fallback to the child position index.
         */
        value?: any;
    };
    defaultComponent: D;
    classKey: BottomNavigationActionClassKey;
}>;

type BottomNavigationClassKey

type BottomNavigationClassKey = 'root';

type BottomNavigationProps

type BottomNavigationProps<
    D extends React.ElementType = BottomNavigationTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<BottomNavigationTypeMap<P, D>, D>;

type BreadcrumbsClassKey

type BreadcrumbsClassKey = 'root' | 'ol' | 'li' | 'separator';

type BreadcrumbsProps

type BreadcrumbsProps<
    D extends React.ElementType = BreadcrumbsTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<BreadcrumbsTypeMap<P, D>, D>;

type ButtonBaseClassKey

type ButtonBaseClassKey = 'root' | 'disabled' | 'focusVisible';

type ButtonBaseProps

type ButtonBaseProps<
    D extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ButtonBaseTypeMap<P, D>, D>;

type ButtonClassKey

type ButtonClassKey =
    | 'root'
    | 'label'
    | 'text'
    | 'textPrimary'
    | 'textSecondary'
    | 'outlined'
    | 'outlinedPrimary'
    | 'outlinedSecondary'
    | 'contained'
    | 'containedPrimary'
    | 'containedSecondary'
    | 'disableElevation'
    | 'focusVisible'
    | 'disabled'
    | 'colorInherit'
    | 'textSizeSmall'
    | 'textSizeLarge'
    | 'outlinedSizeSmall'
    | 'outlinedSizeLarge'
    | 'containedSizeSmall'
    | 'containedSizeLarge'
    | 'sizeSmall'
    | 'sizeLarge'
    | 'fullWidth'
    | 'startIcon'
    | 'endIcon'
    | 'iconSizeSmall'
    | 'iconSizeMedium'
    | 'iconSizeLarge';

type ButtonGroupClassKey

type ButtonGroupClassKey =
    | 'root'
    | 'contained'
    | 'disabled'
    | 'disableElevation'
    | 'fullWidth'
    | 'vertical'
    | 'grouped'
    | 'groupedHorizontal'
    | 'groupedVertical'
    | 'groupedText'
    | 'groupedTextHorizontal'
    | 'groupedTextVertical'
    | 'groupedTextPrimary'
    | 'groupedTextSecondary'
    | 'groupedOutlined'
    | 'groupedOutlinedHorizontal'
    | 'groupedOutlinedVertical'
    | 'groupedOutlinedPrimary'
    | 'groupedOutlinedSecondary'
    | 'groupedContained'
    | 'groupedContainedHorizontal'
    | 'groupedContainedVertical'
    | 'groupedContainedPrimary'
    | 'groupedContainedSecondary';

type ButtonGroupProps

type ButtonGroupProps<
    D extends React.ElementType = ButtonGroupTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ButtonGroupTypeMap<P, D>, D>;

type ButtonProps

type ButtonProps<
    D extends React.ElementType = ButtonTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ButtonTypeMap<P, D>, D>;

type ButtonTypeMap

type ButtonTypeMap<
    P = {},
    D extends React.ElementType = 'button'
> = ExtendButtonBaseTypeMap<{
    props: P & {
        /**
         * The content of the button.
         */
        children?: React.ReactNode;
        /**
         * The color of the component. It supports those theme colors that make sense for this component.
         */
        color?: PropTypes.Color;
        /**
         * If `true`, the button will be disabled.
         */
        disabled?: boolean;
        /**
         * If `true`, no elevation is used.
         */
        disableElevation?: boolean;
        /**
         * If `true`, the  keyboard focus ripple will be disabled.
         */
        disableFocusRipple?: boolean;
        /**
         * Element placed after the children.
         */
        endIcon?: React.ReactNode;
        /**
         * If `true`, the button will take up the full width of its container.
         */
        fullWidth?: boolean;
        /**
         * The URL to link to when the button is clicked.
         * If defined, an `a` element will be used as the root node.
         */
        href?: string;
        /**
         * The size of the button.
         * `small` is equivalent to the dense button styling.
         */
        size?: 'small' | 'medium' | 'large';
        /**
         * Element placed before the children.
         */
        startIcon?: React.ReactNode;
        /**
         * The variant to use.
         */
        variant?: 'text' | 'outlined' | 'contained';
    };
    defaultComponent: D;
    classKey: ButtonClassKey;
}>;

type CardActionAreaClassKey

type CardActionAreaClassKey = 'root' | 'focusVisible' | 'focusHighlight';

type CardActionAreaProps

type CardActionAreaProps<
    D extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<CardActionAreaTypeMap<P, D>, D>;

type CardActionAreaTypeMap

type CardActionAreaTypeMap<
    P,
    D extends React.ElementType
> = ExtendButtonBaseTypeMap<{
    props: P & {
        focusVisibleClassName?: string;
    };
    defaultComponent: D;
    classKey: CardActionAreaClassKey;
}>;

type CardActionsClassKey

type CardActionsClassKey = 'root' | 'spacing';

type CardClassKey

type CardClassKey = 'root';

type CardContentClassKey

type CardContentClassKey = 'root';

type CardContentProps

type CardContentProps<
    D extends React.ElementType = CardContentTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<CardContentTypeMap<P, D>, D>;

type CardHeaderClassKey

type CardHeaderClassKey =
    | 'root'
    | 'avatar'
    | 'action'
    | 'content'
    | 'title'
    | 'subheader';

type CardHeaderProps

type CardHeaderProps<
    DefaultComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
    Props = {},
    TitleTypographyComponent extends React.ElementType = 'span',
    SubheaderTypographyComponent extends React.ElementType = 'span'
> = OverrideProps<
    CardHeaderTypeMap<
        Props,
        DefaultComponent,
        TitleTypographyComponent,
        SubheaderTypographyComponent
    >,
    DefaultComponent
>;

type CardHeaderPropsWithComponent

type CardHeaderPropsWithComponent<
    DefaultComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'],
    Props = {},
    TitleTypographyComponent extends React.ElementType = 'span',
    SubheaderTypographyComponent extends React.ElementType = 'span'
> = {
    /**
     * The component used for the root node.
     * Either a string to use a HTML element or a component.
     */
    component?: DefaultComponent;
} & CardHeaderProps<
    DefaultComponent,
    Props,
    TitleTypographyComponent,
    SubheaderTypographyComponent
>;

type CardMediaClassKey

type CardMediaClassKey = 'root' | 'media';

type CardMediaProps

type CardMediaProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<
    CardMediaTypeMap<P, D>,
    D
>;

type CheckboxClassKey

type CheckboxClassKey =
    | SwitchBaseClassKey
    | 'indeterminate'
    | 'colorPrimary'
    | 'colorSecondary';

type ChipClassKey

type ChipClassKey =
    | 'root'
    | 'sizeSmall'
    | 'colorPrimary'
    | 'colorSecondary'
    | 'disabled'
    | 'clickable'
    | 'clickableColorPrimary'
    | 'clickableColorSecondary'
    | 'deletable'
    | 'deletableColorPrimary'
    | 'deletableColorSecondary'
    | 'outlined'
    | 'outlinedPrimary'
    | 'outlinedSecondary'
    | 'avatar'
    | 'avatarSmall'
    | 'avatarColorPrimary'
    | 'avatarColorSecondary'
    | 'icon'
    | 'iconSmall'
    | 'iconColorPrimary'
    | 'iconColorSecondary'
    | 'label'
    | 'labelSmall'
    | 'deleteIcon'
    | 'deleteIconSmall'
    | 'deleteIconColorPrimary'
    | 'deleteIconColorSecondary'
    | 'deleteIconOutlinedColorPrimary'
    | 'deleteIconOutlinedColorSecondary';

type ChipProps

type ChipProps<
    D extends React.ElementType = ChipTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ChipTypeMap<P, D>, D>;

type CircularProgressClassKey

type CircularProgressClassKey =
    | 'root'
    | 'static'
    | 'determinate'
    | 'indeterminate'
    | 'colorPrimary'
    | 'colorSecondary'
    | 'svg'
    | 'circle'
    | 'circleStatic'
    | 'circleDeterminate'
    | 'circleIndeterminate'
    | 'circleDisableShrink';

type CollapseClassKey

type CollapseClassKey = 'root' | 'entered' | 'hidden' | 'wrapper' | 'wrapperInner';

type ColorFormat

type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla';

type ContainerClassKey

type ContainerClassKey =
    | 'root'
    | 'disableGutters'
    | 'fixed'
    | 'maxWidthXs'
    | 'maxWidthSm'
    | 'maxWidthMd'
    | 'maxWidthLg'
    | 'maxWidthXl';

type ContainerProps

type ContainerProps<
    D extends React.ElementType = ContainerTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ContainerTypeMap<P, D>, D>;

type CssBaselineClassKey

type CssBaselineClassKey = '@global';

Deprecated
The name of this type is misleading. CssBaseline implements no class at all.

type DialogActionsClassKey

type DialogActionsClassKey = 'root' | 'spacing';

type DialogClassKey

type DialogClassKey =
    | 'root'
    | 'scrollPaper'
    | 'scrollBody'
    | 'container'
    | 'paper'
    | 'paperScrollPaper'
    | 'paperScrollBody'
    | 'paperWidthFalse'
    | 'paperWidthXs'
    | 'paperWidthSm'
    | 'paperWidthMd'
    | 'paperWidthLg'
    | 'paperWidthXl'
    | 'paperFullWidth'
    | 'paperFullScreen';

type DialogContentClassKey

type DialogContentClassKey = 'root' | 'dividers';

type DialogContentTextClassKey

type DialogContentTextClassKey = 'root';

type DialogContentTextProps

type DialogContentTextProps<
    D extends React.ElementType = DialogContentTextTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<DialogContentTextTypeMap<P, D>, D>;

type DialogTitleClassKey

type DialogTitleClassKey = 'root';

type Direction

type Direction = 'ltr' | 'rtl';

type DividerClassKey

type DividerClassKey =
    | 'root'
    | 'absolute'
    | 'inset'
    | 'light'
    | 'middle'
    | 'vertical';

type DividerProps

type DividerProps<
    D extends React.ElementType = DividerTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<DividerTypeMap<P, D>, D>;

type DrawerClassKey

type DrawerClassKey =
    | 'root'
    | 'docked'
    | 'paper'
    | 'paperAnchorLeft'
    | 'paperAnchorRight'
    | 'paperAnchorTop'
    | 'paperAnchorBottom'
    | 'paperAnchorDockedLeft'
    | 'paperAnchorDockedTop'
    | 'paperAnchorDockedRight'
    | 'paperAnchorDockedBottom'
    | 'modal';

type ExpansionPanelActionsClassKey

type ExpansionPanelActionsClassKey = 'root' | 'spacing';

type ExpansionPanelClassKey

type ExpansionPanelClassKey = 'root' | 'rounded' | 'expanded' | 'disabled';

type ExpansionPanelDetailsClassKey

type ExpansionPanelDetailsClassKey = 'root';

type ExpansionPanelSummaryClassKey

type ExpansionPanelSummaryClassKey =
    | 'root'
    | 'expanded'
    | 'focused'
    | 'disabled'
    | 'content'
    | 'expandIcon';

type ExpansionPanelSummaryProps

type ExpansionPanelSummaryProps<
    D extends React.ElementType = ExpansionPanelSummaryTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ExpansionPanelSummaryTypeMap<P, D>, D>;

type ExpansionPanelSummaryTypeMap

type ExpansionPanelSummaryTypeMap<
    P = {},
    D extends React.ElementType = 'div'
> = ExtendButtonBaseTypeMap<{
    props: P & {
        /**
         * The content of the expansion panel summary.
         */
        children?: React.ReactNode;
        /**
         * The icon to display as the expand indicator.
         */
        expandIcon?: React.ReactNode;
        /**
         * Props applied to the `IconButton` element wrapping the expand icon.
         */
        IconButtonProps?: Partial<IconButtonProps>;
    };
    defaultComponent: D;
    classKey: ExpansionPanelSummaryClassKey;
}>;

type ExtendButtonBase

type ExtendButtonBase<M extends OverridableTypeMap> = ((
    props: { href: string } & OverrideProps<ExtendButtonBaseTypeMap<M>, 'a'>
) => JSX.Element) &
    OverridableComponent<ExtendButtonBaseTypeMap<M>>;

type FabClassKey

type FabClassKey =
    | 'root'
    | 'label'
    | 'primary'
    | 'secondary'
    | 'extended'
    | 'focusVisible'
    | 'disabled'
    | 'colorInherit'
    | 'sizeSmall'
    | 'sizeMedium';

type FabProps

type FabProps<
    D extends React.ElementType = FabTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<FabTypeMap<P, D>, D>;

type FabTypeMap

type FabTypeMap<
    P = {},
    D extends React.ElementType = 'button'
> = ExtendButtonBaseTypeMap<{
    props: P & {
        /**
         * The content of the button.
         */
        children: NonNullable<React.ReactNode>;
        /**
         * The color of the component. It supports those theme colors that make sense for this component.
         */
        color?: PropTypes.Color;
        /**
         * If `true`, the button will be disabled.
         */
        disabled?: boolean;
        /**
         * If `true`, the  keyboard focus ripple will be disabled.
         */
        disableFocusRipple?: boolean;
        /**
         * If `true`, the ripple effect will be disabled.
         */
        disableRipple?: boolean;
        /**
         * The URL to link to when the button is clicked.
         * If defined, an `a` element will be used as the root node.
         */
        href?: string;
        /**
         * The size of the button.
         * `small` is equivalent to the dense button styling.
         */
        size?: 'small' | 'medium' | 'large';
        /**
         * The variant to use.
         * 'round' is deprecated, use 'circular' instead.
         */
        variant?: 'circular' | 'extended' | 'round';
    };
    defaultComponent: D;
    classKey: FabClassKey;
}>;

type FilledInputClassKey

type FilledInputClassKey = InputBaseClassKey | 'colorSecondary' | 'underline';

type FormControlClassKey

type FormControlClassKey = 'root' | 'marginNormal' | 'marginDense' | 'fullWidth';

type FormControlLabelClassKey

type FormControlLabelClassKey =
    | 'root'
    | 'labelPlacementStart'
    | 'labelPlacementTop'
    | 'labelPlacementBottom'
    | 'disabled'
    | 'label';

type FormControlProps

type FormControlProps<
    D extends React.ElementType = FormControlTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<FormControlTypeMap<P, D>, D>;

type FormGroupClassKey

type FormGroupClassKey = 'root' | 'row';

type FormHelperTextClassKey

type FormHelperTextClassKey =
    | 'root'
    | 'error'
    | 'disabled'
    | 'marginDense'
    | 'focused'
    | 'filled'
    | 'contained'
    | 'required';

type FormHelperTextProps

type FormHelperTextProps<
    D extends React.ElementType = FormHelperTextTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<FormHelperTextTypeMap<P, D>, D>;

type FormLabelBaseProps

type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;

type FormLabelClassKey

type FormLabelClassKey =
    | 'root'
    | 'colorSecondary'
    | 'focused'
    | 'disabled'
    | 'error'
    | 'filled'
    | 'required'
    | 'asterisk';

type FormLabelProps

type FormLabelProps<
    D extends React.ElementType = FormLabelTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<FormLabelTypeMap<P, D>, D>;

type GridClassKey

type GridClassKey =
    | 'root'
    | 'container'
    | 'item'
    | 'zeroMinWidth'
    | 'direction-xs-column'
    | 'direction-xs-column-reverse'
    | 'direction-xs-row-reverse'
    | 'wrap-xs-nowrap'
    | 'wrap-xs-wrap-reverse'
    | 'align-items-xs-center'
    | 'align-items-xs-flex-start'
    | 'align-items-xs-flex-end'
    | 'align-items-xs-baseline'
    | 'align-content-xs-center'
    | 'align-content-xs-flex-start'
    | 'align-content-xs-flex-end'
    | 'align-content-xs-space-between'
    | 'align-content-xs-space-around'
    | 'justify-content-xs-center'
    | 'justify-content-xs-flex-end'
    | 'justify-content-xs-space-between'
    | 'justify-content-xs-space-around'
    | 'justify-content-xs-space-evenly'
    | 'spacing-xs-1'
    | 'spacing-xs-2'
    | 'spacing-xs-3'
    | 'spacing-xs-4'
    | 'spacing-xs-5'
    | 'spacing-xs-6'
    | 'spacing-xs-7'
    | 'spacing-xs-8'
    | 'spacing-xs-9'
    | 'spacing-xs-10'
    | 'grid-xs-auto'
    | 'grid-xs-true'
    | 'grid-xs-1'
    | 'grid-xs-2'
    | 'grid-xs-3'
    | 'grid-xs-4'
    | 'grid-xs-5'
    | 'grid-xs-6'
    | 'grid-xs-7'
    | 'grid-xs-8'
    | 'grid-xs-9'
    | 'grid-xs-10'
    | 'grid-xs-11'
    | 'grid-xs-12';

type GridContentAlignment

type GridContentAlignment =
    | 'stretch'
    | 'center'
    | 'flex-start'
    | 'flex-end'
    | 'space-between'
    | 'space-around';

type GridDirection

type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';

type GridItemsAlignment

type GridItemsAlignment =
    | 'flex-start'
    | 'center'
    | 'flex-end'
    | 'stretch'
    | 'baseline';

type GridJustification

type GridJustification =
    | 'flex-start'
    | 'center'
    | 'flex-end'
    | 'space-between'
    | 'space-around'
    | 'space-evenly';

type GridListClassKey

type GridListClassKey = 'root';

type GridListProps

type GridListProps<
    D extends React.ElementType = GridListTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<GridListTypeMap<P, D>, D>;

type GridListTileBarClassKey

type GridListTileBarClassKey =
    | 'root'
    | 'titlePositionBottom'
    | 'titlePositionTop'
    | 'rootSubtitle'
    | 'titleWrap'
    | 'titleWrapActionPosLeft'
    | 'titleWrapActionPosRight'
    | 'title'
    | 'subtitle'
    | 'actionIcon'
    | 'actionIconActionPosLeft';

type GridListTileClassKey

type GridListTileClassKey = 'root' | 'tile' | 'imgFullHeight' | 'imgFullWidth';

type GridListTileProps

type GridListTileProps<
    D extends React.ElementType = GridListTileTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<GridListTileTypeMap<P, D>, D>;

type GridProps

type GridProps<
    D extends React.ElementType = GridTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<GridTypeMap<P, D>, D>;

type GridSize

type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

type GridSpacing

type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;

type GridWrap

type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';

type IconButtonClassKey

type IconButtonClassKey =
    | 'root'
    | 'edgeStart'
    | 'edgeEnd'
    | 'colorInherit'
    | 'colorPrimary'
    | 'colorSecondary'
    | 'disabled'
    | 'sizeSmall'
    | 'label';

type IconButtonProps

type IconButtonProps<
    D extends React.ElementType = IconButtonTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<IconButtonTypeMap<P, D>, D>;

type IconButtonTypeMap

type IconButtonTypeMap<
    P = {},
    D extends React.ElementType = 'button'
> = ExtendButtonBaseTypeMap<{
    props: P & {
        color?: PropTypes.Color;
        disableFocusRipple?: boolean;
        /**
         * If given, uses a negative margin to counteract the padding on one
         * side (this is often helpful for aligning the left or right
         * side of the icon with content above or below, without ruining the border
         * size and shape).
         */
        edge?: 'start' | 'end' | false;
        size?: 'small' | 'medium';
    };
    defaultComponent: D;
    classKey: IconButtonClassKey;
}>;

type IconClassKey

type IconClassKey =
    | 'root'
    | 'colorSecondary'
    | 'colorAction'
    | 'colorDisabled'
    | 'colorError'
    | 'colorPrimary'
    | 'fontSizeInherit'
    | 'fontSizeSmall'
    | 'fontSizeLarge';

type IconProps

type IconProps<
    D extends React.ElementType = IconTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<IconTypeMap<P, D>, D>;

type ImageListClassKey

type ImageListClassKey = 'root';

type ImageListItemBarClassKey

type ImageListItemBarClassKey =
    | 'root'
    | 'positionBottom'
    | 'positionTop'
    | 'rootSubtitle'
    | 'titleWrap'
    | 'titleWrapActionPosLeft'
    | 'titleWrapActionPosRight'
    | 'title'
    | 'subtitle'
    | 'actionIcon'
    | 'actionIconActionPosLeft';

type ImageListItemClassKey

type ImageListItemClassKey = 'root' | 'item' | 'imgFullHeight' | 'imgFullWidth';

type ImageListItemProps

type ImageListItemProps<
    D extends React.ElementType = ImageListItemTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ImageListItemTypeMap<P, D>, D>;

type ImageListProps

type ImageListProps<
    D extends React.ElementType = ImageListTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ImageListTypeMap<P, D>, D>;

type InputAdornmentClassKey

type InputAdornmentClassKey =
    | 'root'
    | 'filled'
    | 'positionStart'
    | 'positionEnd'
    | 'disablePointerEvents'
    | 'hiddenLabel'
    | 'marginDense';

type InputAdornmentProps

type InputAdornmentProps<
    D extends React.ElementType = InputAdornmentTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<InputAdornmentTypeMap<P, D>, D>;

type InputBaseClassKey

type InputBaseClassKey =
    | 'root'
    | 'formControl'
    | 'focused'
    | 'disabled'
    | 'adornedEnd'
    | 'adornedStart'
    | 'error'
    | 'marginDense'
    | 'multiline'
    | 'fullWidth'
    | 'colorSecondary'
    | 'input'
    | 'inputMarginDense'
    | 'inputMultiline'
    | 'inputTypeSearch'
    | 'inputAdornedStart'
    | 'inputAdornedEnd'
    | 'inputHiddenLabel';

type InputClassKey

type InputClassKey =
    | 'root'
    | 'formControl'
    | 'focused'
    | 'disabled'
    | 'colorSecondary'
    | 'underline'
    | 'error'
    | 'marginDense'
    | 'multiline'
    | 'fullWidth'
    | 'input'
    | 'inputMarginDense'
    | 'inputMultiline'
    | 'inputTypeSearch';

type InputLabelClassKey

type InputLabelClassKey =
    | 'root'
    | 'focused'
    | 'disabled'
    | 'error'
    | 'required'
    | 'asterisk'
    | 'formControl'
    | 'marginDense'
    | 'shrink'
    | 'animated'
    | 'filled'
    | 'outlined';

type LinearProgressClassKey

type LinearProgressClassKey =
    | 'root'
    | 'colorPrimary'
    | 'colorSecondary'
    | 'determinate'
    | 'indeterminate'
    | 'buffer'
    | 'query'
    | 'dashed'
    | 'dashedColorPrimary'
    | 'dashedColorSecondary'
    | 'bar'
    | 'barColorPrimary'
    | 'barColorSecondary'
    | 'bar1Indeterminate'
    | 'bar2Indeterminate'
    | 'bar1Determinate'
    | 'bar1Buffer'
    | 'bar2Buffer';

type LinkBaseProps

type LinkBaseProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
    Omit<TypographyProps, 'component'>;

type LinkClassKey

type LinkClassKey =
    | 'root'
    | 'underlineNone'
    | 'underlineHover'
    | 'underlineAlways'
    | 'button'
    | 'focusVisible';

type LinkProps

type LinkProps<
    D extends React.ElementType = LinkTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<LinkTypeMap<P, D>, D>;

type ListClassKey

type ListClassKey = 'root' | 'padding' | 'dense' | 'subheader';

type ListItemAvatarClassKey

type ListItemAvatarClassKey = 'root' | 'icon';

type ListItemClassKey

type ListItemClassKey =
    | 'root'
    | 'container'
    | 'focusVisible'
    | 'default'
    | 'dense'
    | 'disabled'
    | 'divider'
    | 'gutters'
    | 'button'
    | 'secondaryAction'
    | 'selected';

type ListItemIconClassKey

type ListItemIconClassKey = 'root' | 'alignItemsFlexStart';

type ListItemProps

type ListItemProps<D extends React.ElementType = 'li', P = {}> = OverrideProps<
    ListItemTypeMap<P, D>,
    D
>;

type ListItemSecondaryActionClassKey

type ListItemSecondaryActionClassKey = 'root';

type ListItemTextClassKey

type ListItemTextClassKey =
    | 'root'
    | 'multiline'
    | 'dense'
    | 'inset'
    | 'primary'
    | 'secondary';

type ListProps

type ListProps<
    D extends React.ElementType = ListTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ListTypeMap<P, D>, D>;

type ListSubheaderClassKey

type ListSubheaderClassKey =
    | 'root'
    | 'colorPrimary'
    | 'colorInherit'
    | 'inset'
    | 'sticky'
    | 'gutters';

type ListSubheaderProps

type ListSubheaderProps<
    D extends React.ElementType = ListSubheaderTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ListSubheaderTypeMap<P, D>, D>;

type MenuClassKey

type MenuClassKey = 'paper' | 'list';

type MenuItemClassKey

type MenuItemClassKey = 'root' | 'gutters' | 'selected' | 'dense';

type MenuItemProps

type MenuItemProps<
    D extends React.ElementType = MenuItemTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<MenuItemTypeMap<P, D>, D>;

type MenuItemTypeMap

type MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> = Omit<
    ListItemTypeMap<P, D>,
    'classKey'
> & {
    classKey: MenuItemClassKey;
    /**
     * `classes` prop applied to the [`ListItem`](/api/list-item/) element.
     */
    ListItemClasses: ListItemProps['classes'];
};

type MenuListClassKey

type MenuListClassKey = ListClassKey;

type MobileStepperClassKey

type MobileStepperClassKey =
    | 'root'
    | 'positionBottom'
    | 'positionTop'
    | 'positionStatic'
    | 'dots'
    | 'dot'
    | 'dotActive'
    | 'progress';

type MuiMediaQueryListListener

type MuiMediaQueryListListener = (event: MuiMediaQueryListEvent) => void;

type NativeSelectClassKey

type NativeSelectClassKey =
    | 'root'
    | 'select'
    | 'filled'
    | 'outlined'
    | 'selectMenu'
    | 'disabled'
    | 'icon'
    | 'iconFilled'
    | 'iconOutlined';

type Orientation

type Orientation = 'horizontal' | 'vertical';

type OutlinedInputClassKey

type OutlinedInputClassKey =
    | 'root'
    | 'colorSecondary'
    | 'focused'
    | 'disabled'
    | 'adornedStart'
    | 'adornedEnd'
    | 'error'
    | 'marginDense'
    | 'multiline'
    | 'notchedOutline'
    | 'input'
    | 'inputMarginDense'
    | 'inputMultiline'
    | 'inputAdornedStart'
    | 'inputAdornedEnd';

type Padding

type Padding = 'normal' | 'checkbox' | 'none' | 'default';

type PaletteColorOptions

type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;

type PaletteType

type PaletteType = 'light' | 'dark';

type PaperClassKey

type PaperClassKey =
    | 'root'
    | 'rounded'
    | 'outlined'
    | 'elevation0'
    | 'elevation1'
    | 'elevation2'
    | 'elevation3'
    | 'elevation4'
    | 'elevation5'
    | 'elevation6'
    | 'elevation7'
    | 'elevation8'
    | 'elevation9'
    | 'elevation10'
    | 'elevation11'
    | 'elevation12'
    | 'elevation13'
    | 'elevation14'
    | 'elevation15'
    | 'elevation16'
    | 'elevation17'
    | 'elevation18'
    | 'elevation19'
    | 'elevation20'
    | 'elevation21'
    | 'elevation22'
    | 'elevation23'
    | 'elevation24';

type PopoverClassKey

type PopoverClassKey = 'root' | 'paper';

type PopoverReference

type PopoverReference = 'anchorEl' | 'anchorPosition' | 'none';

type PopperPlacementType

type PopperPlacementType =
    | 'bottom-end'
    | 'bottom-start'
    | 'bottom'
    | 'left-end'
    | 'left-start'
    | 'left'
    | 'right-end'
    | 'right-start'
    | 'right'
    | 'top-end'
    | 'top-start'
    | 'top';

type RadioClassKey

type RadioClassKey = SwitchBaseClassKey | 'colorPrimary' | 'colorSecondary';

type RadioGroupClassKey

type RadioGroupClassKey = FormGroupClassKey;

type SelectClassKey

type SelectClassKey =
    | 'root'
    | 'select'
    | 'filled'
    | 'outlined'
    | 'selectMenu'
    | 'disabled'
    | 'icon'
    | 'iconOpen'
    | 'iconFilled'
    | 'iconOutlined';

type Size

type Size = 'small' | 'medium';

type SliderClassKey

type SliderClassKey =
    | 'root'
    | 'colorPrimary'
    | 'colorSecondary'
    | 'marked'
    | 'vertical'
    | 'disabled'
    | 'rail'
    | 'track'
    | 'trackFalse'
    | 'trackInverted'
    | 'thumb'
    | 'thumbColorPrimary'
    | 'thumbColorSecondary'
    | 'active'
    | 'focusVisible'
    | 'valueLabel'
    | 'mark'
    | 'markActive'
    | 'markLabel'
    | 'markLabelActive';

type SliderProps

type SliderProps<
    D extends React.ElementType = SliderTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<SliderTypeMap<P, D>, D>;

type SnackbarClassKey

type SnackbarClassKey =
    | 'root'
    | 'anchorOriginTopCenter'
    | 'anchorOriginBottomCenter'
    | 'anchorOriginTopRight'
    | 'anchorOriginBottomRight'
    | 'anchorOriginTopLeft'
    | 'anchorOriginBottomLeft';

type SnackbarCloseReason

type SnackbarCloseReason = 'timeout' | 'clickaway';

type SnackbarContentClassKey

type SnackbarContentClassKey = 'root' | 'message' | 'action';

type SortDirection

type SortDirection = 'asc' | 'desc' | false;

type StandardProps

type StandardProps<
    C,
    ClassKey extends string,
    Removals extends keyof C = never
> = Omit<C, 'classes' | Removals> &
    StyledComponentProps<ClassKey> & {
        className?: string;
        ref?: C extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
        style?: React.CSSProperties;
    };

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.

type StepButtonClasskey

type StepButtonClasskey = 'root' | 'vertical' | 'touchRipple';

type StepButtonIcon

type StepButtonIcon = React.ReactNode;

Deprecated
use StepButtonProps['icon'] instead

type StepButtonProps

type StepButtonProps<
    D extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<StepButtonTypeMap<P, D>, D>;

type StepButtonTypeMap

type StepButtonTypeMap<P, D extends React.ElementType> = ExtendButtonBaseTypeMap<{
    props: P & {
        active?: boolean;
        alternativeLabel?: boolean;
        completed?: boolean;
        disabled?: boolean;
        icon?: React.ReactNode;
        last?: boolean;
        optional?: React.ReactNode;
        orientation?: Orientation;
    };
    defaultComponent: D;
    classKey: StepButtonClasskey;
}>;

type StepClasskey

type StepClasskey =
    | 'root'
    | 'horizontal'
    | 'vertical'
    | 'alternativeLabel'
    | 'completed';

type StepConnectorClasskey

type StepConnectorClasskey =
    | 'root'
    | 'horizontal'
    | 'vertical'
    | 'alternativeLabel'
    | 'active'
    | 'completed'
    | 'disabled'
    | 'line'
    | 'lineHorizontal'
    | 'lineVertical';

type StepConnectorIcon

type StepConnectorIcon = React.ReactElement | string | number;

type StepContentClasskey

type StepContentClasskey = 'root' | 'last' | 'transition';

type StepIconClasskey

type StepIconClasskey = 'root' | 'text' | 'active' | 'completed' | 'error';

type StepLabelClasskey

type StepLabelClasskey =
    | 'root'
    | 'horizontal'
    | 'vertical'
    | 'active'
    | 'completed'
    | 'alternativeLabel'
    | 'error'
    | 'disabled'
    | 'label'
    | 'iconContainer'
    | 'labelContainer';

type StepperClasskey

type StepperClasskey = 'root' | 'horizontal' | 'vertical' | 'alternativeLabel';

type StyleRules

type StyleRules<
    ClassKey extends string = string,
    Props extends object = {}
> = ActualStyleRules<Props, ClassKey>;

Adapter for StyleRules from @material-ui/styles for backwards compatibility. Order of generic arguments is just reversed.
TODO: to normalize in v5

type SvgIconClassKey

type SvgIconClassKey =
    | 'root'
    | 'colorSecondary'
    | 'colorAction'
    | 'colorDisabled'
    | 'colorError'
    | 'colorPrimary'
    | 'fontSizeInherit'
    | 'fontSizeSmall'
    | 'fontSizeLarge';

type SvgIconProps

type SvgIconProps<
    D extends React.ElementType = SvgIconTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<SvgIconTypeMap<P, D>, D>;

type SwitchClassKey

type SwitchClassKey =
    | SwitchBaseClassKey
    | 'switchBase'
    | 'colorPrimary'
    | 'colorSecondary'
    | 'sizeSmall'
    | 'thumb'
    | 'track';

type TabClassKey

type TabClassKey =
    | 'root'
    | 'labelIcon'
    | 'textColorInherit'
    | 'textColorPrimary'
    | 'textColorSecondary'
    | 'selected'
    | 'disabled'
    | 'fullWidth'
    | 'wrapped'
    | 'wrapper';

type TableBodyClassKey

type TableBodyClassKey = 'root';

type TableBodyProps

type TableBodyProps<
    D extends React.ElementType = TableBodyTypeMap['defaultComponent'],
    P extends {} = {}
> = OverrideProps<TableBodyTypeMap<P, D>, D>;

type TableCellBaseProps

type TableCellBaseProps = React.ThHTMLAttributes<HTMLTableHeaderCellElement> &
    React.TdHTMLAttributes<HTMLTableDataCellElement>;

type TableCellClassKey

type TableCellClassKey =
    | 'root'
    | 'head'
    | 'body'
    | 'footer'
    | 'alignLeft'
    | 'alignCenter'
    | 'alignRight'
    | 'alignJustify'
    | 'sizeSmall'
    | 'paddingCheckbox'
    | 'paddingNone'
    | 'stickyHeader';

type TableClassKey

type TableClassKey = 'root' | 'stickyHeader';

type TableContainerClassKey

type TableContainerClassKey = 'root';

type TableContainerProps

type TableContainerProps<
    D extends React.ElementType = TableContainerTypeMap['defaultComponent'],
    P extends {} = {}
> = OverrideProps<TableContainerTypeMap<P, D>, D>;

type TableFooterClassKey

type TableFooterClassKey = 'root';

type TableFooterProps

type TableFooterProps<
    D extends React.ElementType = TableFooterTypeMap['defaultComponent'],
    P extends {} = {}
> = OverrideProps<TableFooterTypeMap<P, D>, D>;

type TableHeadClassKey

type TableHeadClassKey = 'root';

type TableHeadProps

type TableHeadProps<
    D extends React.ElementType = TableHeadTypeMap['defaultComponent'],
    P extends {} = {}
> = OverrideProps<TableHeadTypeMap<P, D>, D>;

type TablePaginationBaseProps

type TablePaginationBaseProps = Omit<TableCellProps, 'classes' | 'component'>;

type TablePaginationClassKey

type TablePaginationClassKey =
    | 'root'
    | 'toolbar'
    | 'spacer'
    | 'menuItem'
    | 'caption'
    | 'input'
    | 'selectRoot'
    | 'select'
    | 'selectIcon'
    | 'actions';

type TablePaginationProps

type TablePaginationProps<
    D extends React.ElementType = React.ComponentType<TablePaginationBaseProps>,
    P = {}
> = OverrideProps<TablePaginationTypeMap<P, D>, D>;

type TableProps

type TableProps<
    D extends React.ElementType = TableTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<TableTypeMap<P, D>, D>;

type TableRowClassKey

type TableRowClassKey = 'root' | 'selected' | 'hover' | 'head' | 'footer';

type TableRowProps

type TableRowProps<
    D extends React.ElementType = TableRowTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<TableRowTypeMap<P, D>, D>;

type TableSortLabelClassKey

type TableSortLabelClassKey =
    | 'root'
    | 'active'
    | 'icon'
    | 'iconDirectionDesc'
    | 'iconDirectionAsc';

type TableSortLabelProps

type TableSortLabelProps<
    D extends React.ElementType = TableSortLabelTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<TableSortLabelTypeMap<P, D>, D>;

type TableSortLabelTypeMap

type TableSortLabelTypeMap<
    P = {},
    D extends React.ElementType = 'span'
> = ExtendButtonBaseTypeMap<{
    props: P & {
        active?: boolean;
        direction?: 'asc' | 'desc';
        hideSortIcon?: boolean;
        IconComponent?: React.ComponentType<{ className: string }>;
    };
    defaultComponent: D;
    classKey: TableSortLabelClassKey;
}>;

type TabProps

type TabProps<
    D extends React.ElementType = TabTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<TabTypeMap<P, D>, D>;

type TabsClassKey

type TabsClassKey =
    | 'root'
    | 'flexContainer'
    | 'scroller'
    | 'fixed'
    | 'scrollable'
    | 'centered'
    | 'scrollButtons'
    | 'scrollButtonsDesktop'
    | 'indicator';

type TabScrollButtonClassKey

type TabScrollButtonClassKey = 'root' | 'vertical' | 'disabled';

type TabsProps

type TabsProps<
    D extends React.ElementType = TabsTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<TabsTypeMap<P, D>, D>;

type TabTypeMap

type TabTypeMap<
    P = {},
    D extends React.ElementType = 'div'
> = ExtendButtonBaseTypeMap<{
    props: P & {
        disableFocusRipple?: boolean;
        fullWidth?: boolean;
        icon?: string | React.ReactElement;
        label?: React.ReactNode;
        onChange?: (
            event: React.ChangeEvent<{ checked: boolean }>,
            value: any
        ) => void;
        onClick?: React.EventHandler<any>;
        selected?: boolean;
        style?: React.CSSProperties;
        textColor?: string | 'secondary' | 'primary' | 'inherit';
        value?: any;
        wrapped?: boolean;
    };
    defaultComponent: D;
    classKey: TabClassKey;
}>;

type TextFieldClassKey

type TextFieldClassKey = 'root';

type TextFieldProps

type TextFieldProps =
    | StandardTextFieldProps
    | FilledTextFieldProps
    | OutlinedTextFieldProps;

type ToolbarClassKey

type ToolbarClassKey = 'root' | 'gutters' | 'regular' | 'dense';

type ToolbarProps

type ToolbarProps<
    D extends React.ElementType = ToolbarTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<ToolbarTypeMap<P, D>, D>;

type TooltipClassKey

type TooltipClassKey =
    | 'popper'
    | 'popperInteractive'
    | 'popperArrow'
    | 'tooltip'
    | 'tooltipArrow'
    | 'arrow'
    | 'touch'
    | 'tooltipPlacementLeft'
    | 'tooltipPlacementRight'
    | 'tooltipPlacementTop'
    | 'tooltipPlacementBottom';

type TypographyClassKey

type TypographyClassKey =
    | 'root'
    | 'h1'
    | 'h2'
    | 'h3'
    | 'h4'
    | 'h5'
    | 'h6'
    | 'subtitle1'
    | 'subtitle2'
    | 'body1'
    | 'body2'
    | 'caption'
    | 'button'
    | 'overline'
    | 'srOnly'
    | 'alignLeft'
    | 'alignCenter'
    | 'alignRight'
    | 'alignJustify'
    | 'noWrap'
    | 'gutterBottom'
    | 'paragraph'
    | 'colorInherit'
    | 'colorPrimary'
    | 'colorSecondary'
    | 'colorTextPrimary'
    | 'colorTextSecondary'
    | 'colorError'
    | 'displayInline'
    | 'displayBlock';

type TypographyProps

type TypographyProps<
    D extends React.ElementType = TypographyTypeMap['defaultComponent'],
    P = {}
> = OverrideProps<TypographyTypeMap<P, D>, D>;

type TypographyStyle

type TypographyStyle = CSSProperties;

type TypographyVariant

type Variant =
    | 'h1'
    | 'h2'
    | 'h3'
    | 'h4'
    | 'h5'
    | 'h6'
    | 'subtitle1'
    | 'subtitle2'
    | 'body1'
    | 'body2'
    | 'caption'
    | 'button'
    | 'overline';

type WithStyles

type WithStyles<
    StylesOrClassKey extends string | Styles<any, any, any> = string,
    IncludeTheme extends boolean | undefined = false
> = (IncludeTheme extends true ? { theme: Theme } : {}) & {
    classes: ClassNameMap<ClassKeyOfStyles<StylesOrClassKey>>;
};

Namespaces

namespace colors

module 'colors/index.d.ts' {}

variable amber

const amber: {
    50: '#fff8e1';
    100: '#ffecb3';
    200: '#ffe082';
    300: '#ffd54f';
    400: '#ffca28';
    500: '#ffc107';
    600: '#ffb300';
    700: '#ffa000';
    800: '#ff8f00';
    900: '#ff6f00';
    A100: '#ffe57f';
    A200: '#ffd740';
    A400: '#ffc400';
    A700: '#ffab00';
};

![amber 50](https://mui.com/static/colors-preview/amber-50-24x24.svg) ![amber 100](https://mui.com/static/colors-preview/amber-100-24x24.svg) ![amber 200](https://mui.com/static/colors-preview/amber-200-24x24.svg) ![amber 300](https://mui.com/static/colors-preview/amber-300-24x24.svg) ![amber 400](https://mui.com/static/colors-preview/amber-400-24x24.svg) ![amber 500](https://mui.com/static/colors-preview/amber-500-24x24.svg) ![amber 600](https://mui.com/static/colors-preview/amber-600-24x24.svg) ![amber 700](https://mui.com/static/colors-preview/amber-700-24x24.svg) ![amber 800](https://mui.com/static/colors-preview/amber-800-24x24.svg) ![amber 900](https://mui.com/static/colors-preview/amber-900-24x24.svg) ![amber A100](https://mui.com/static/colors-preview/amber-A100-24x24.svg) ![amber A200](https://mui.com/static/colors-preview/amber-A200-24x24.svg) ![amber A400](https://mui.com/static/colors-preview/amber-A400-24x24.svg) ![amber A700](https://mui.com/static/colors-preview/amber-A700-24x24.svg)

variable blue

const blue: {
    50: '#e3f2fd';
    100: '#bbdefb';
    200: '#90caf9';
    300: '#64b5f6';
    400: '#42a5f5';
    500: '#2196f3';
    600: '#1e88e5';
    700: '#1976d2';
    800: '#1565c0';
    900: '#0d47a1';
    A100: '#82b1ff';
    A200: '#448aff';
    A400: '#2979ff';
    A700: '#2962ff';
};

![blue 50](https://mui.com/static/colors-preview/blue-50-24x24.svg) ![blue 100](https://mui.com/static/colors-preview/blue-100-24x24.svg) ![blue 200](https://mui.com/static/colors-preview/blue-200-24x24.svg) ![blue 300](https://mui.com/static/colors-preview/blue-300-24x24.svg) ![blue 400](https://mui.com/static/colors-preview/blue-400-24x24.svg) ![blue 500](https://mui.com/static/colors-preview/blue-500-24x24.svg) ![blue 600](https://mui.com/static/colors-preview/blue-600-24x24.svg) ![blue 700](https://mui.com/static/colors-preview/blue-700-24x24.svg) ![blue 800](https://mui.com/static/colors-preview/blue-800-24x24.svg) ![blue 900](https://mui.com/static/colors-preview/blue-900-24x24.svg) ![blue A100](https://mui.com/static/colors-preview/blue-A100-24x24.svg) ![blue A200](https://mui.com/static/colors-preview/blue-A200-24x24.svg) ![blue A400](https://mui.com/static/colors-preview/blue-A400-24x24.svg) ![blue A700](https://mui.com/static/colors-preview/blue-A700-24x24.svg)

variable blueGrey

const blueGrey: {
    50: '#eceff1';
    100: '#cfd8dc';
    200: '#b0bec5';
    300: '#90a4ae';
    400: '#78909c';
    500: '#607d8b';
    600: '#546e7a';
    700: '#455a64';
    800: '#37474f';
    900: '#263238';
    A100: '#cfd8dc';
    A200: '#b0bec5';
    A400: '#78909c';
    A700: '#455a64';
};

![blueGrey 50](https://mui.com/static/colors-preview/blueGrey-50-24x24.svg) ![blueGrey 100](https://mui.com/static/colors-preview/blueGrey-100-24x24.svg) ![blueGrey 200](https://mui.com/static/colors-preview/blueGrey-200-24x24.svg) ![blueGrey 300](https://mui.com/static/colors-preview/blueGrey-300-24x24.svg) ![blueGrey 400](https://mui.com/static/colors-preview/blueGrey-400-24x24.svg) ![blueGrey 500](https://mui.com/static/colors-preview/blueGrey-500-24x24.svg) ![blueGrey 600](https://mui.com/static/colors-preview/blueGrey-600-24x24.svg) ![blueGrey 700](https://mui.com/static/colors-preview/blueGrey-700-24x24.svg) ![blueGrey 800](https://mui.com/static/colors-preview/blueGrey-800-24x24.svg) ![blueGrey 900](https://mui.com/static/colors-preview/blueGrey-900-24x24.svg) ![blueGrey A100](https://mui.com/static/colors-preview/blueGrey-A100-24x24.svg) ![blueGrey A200](https://mui.com/static/colors-preview/blueGrey-A200-24x24.svg) ![blueGrey A400](https://mui.com/static/colors-preview/blueGrey-A400-24x24.svg) ![blueGrey A700](https://mui.com/static/colors-preview/blueGrey-A700-24x24.svg)

variable brown

const brown: {
    50: '#efebe9';
    100: '#d7ccc8';
    200: '#bcaaa4';
    300: '#a1887f';
    400: '#8d6e63';
    500: '#795548';
    600: '#6d4c41';
    700: '#5d4037';
    800: '#4e342e';
    900: '#3e2723';
    A100: '#d7ccc8';
    A200: '#bcaaa4';
    A400: '#8d6e63';
    A700: '#5d4037';
};

![brown 50](https://mui.com/static/colors-preview/brown-50-24x24.svg) ![brown 100](https://mui.com/static/colors-preview/brown-100-24x24.svg) ![brown 200](https://mui.com/static/colors-preview/brown-200-24x24.svg) ![brown 300](https://mui.com/static/colors-preview/brown-300-24x24.svg) ![brown 400](https://mui.com/static/colors-preview/brown-400-24x24.svg) ![brown 500](https://mui.com/static/colors-preview/brown-500-24x24.svg) ![brown 600](https://mui.com/static/colors-preview/brown-600-24x24.svg) ![brown 700](https://mui.com/static/colors-preview/brown-700-24x24.svg) ![brown 800](https://mui.com/static/colors-preview/brown-800-24x24.svg) ![brown 900](https://mui.com/static/colors-preview/brown-900-24x24.svg) ![brown A100](https://mui.com/static/colors-preview/brown-A100-24x24.svg) ![brown A200](https://mui.com/static/colors-preview/brown-A200-24x24.svg) ![brown A400](https://mui.com/static/colors-preview/brown-A400-24x24.svg) ![brown A700](https://mui.com/static/colors-preview/brown-A700-24x24.svg)

variable common

const common: { black: '#000'; white: '#fff' };

![common black](https://mui.com/static/colors-preview/common-black-24x24.svg) ![common white](https://mui.com/static/colors-preview/common-white-24x24.svg)

variable cyan

const cyan: {
    50: '#e0f7fa';
    100: '#b2ebf2';
    200: '#80deea';
    300: '#4dd0e1';
    400: '#26c6da';
    500: '#00bcd4';
    600: '#00acc1';
    700: '#0097a7';
    800: '#00838f';
    900: '#006064';
    A100: '#84ffff';
    A200: '#18ffff';
    A400: '#00e5ff';
    A700: '#00b8d4';
};

![cyan 50](https://mui.com/static/colors-preview/cyan-50-24x24.svg) ![cyan 100](https://mui.com/static/colors-preview/cyan-100-24x24.svg) ![cyan 200](https://mui.com/static/colors-preview/cyan-200-24x24.svg) ![cyan 300](https://mui.com/static/colors-preview/cyan-300-24x24.svg) ![cyan 400](https://mui.com/static/colors-preview/cyan-400-24x24.svg) ![cyan 500](https://mui.com/static/colors-preview/cyan-500-24x24.svg) ![cyan 600](https://mui.com/static/colors-preview/cyan-600-24x24.svg) ![cyan 700](https://mui.com/static/colors-preview/cyan-700-24x24.svg) ![cyan 800](https://mui.com/static/colors-preview/cyan-800-24x24.svg) ![cyan 900](https://mui.com/static/colors-preview/cyan-900-24x24.svg) ![cyan A100](https://mui.com/static/colors-preview/cyan-A100-24x24.svg) ![cyan A200](https://mui.com/static/colors-preview/cyan-A200-24x24.svg) ![cyan A400](https://mui.com/static/colors-preview/cyan-A400-24x24.svg) ![cyan A700](https://mui.com/static/colors-preview/cyan-A700-24x24.svg)

variable deepOrange

const deepOrange: {
    50: '#fbe9e7';
    100: '#ffccbc';
    200: '#ffab91';
    300: '#ff8a65';
    400: '#ff7043';
    500: '#ff5722';
    600: '#f4511e';
    700: '#e64a19';
    800: '#d84315';
    900: '#bf360c';
    A100: '#ff9e80';
    A200: '#ff6e40';
    A400: '#ff3d00';
    A700: '#dd2c00';
};

![deepOrange 50](https://mui.com/static/colors-preview/deepOrange-50-24x24.svg) ![deepOrange 100](https://mui.com/static/colors-preview/deepOrange-100-24x24.svg) ![deepOrange 200](https://mui.com/static/colors-preview/deepOrange-200-24x24.svg) ![deepOrange 300](https://mui.com/static/colors-preview/deepOrange-300-24x24.svg) ![deepOrange 400](https://mui.com/static/colors-preview/deepOrange-400-24x24.svg) ![deepOrange 500](https://mui.com/static/colors-preview/deepOrange-500-24x24.svg) ![deepOrange 600](https://mui.com/static/colors-preview/deepOrange-600-24x24.svg) ![deepOrange 700](https://mui.com/static/colors-preview/deepOrange-700-24x24.svg) ![deepOrange 800](https://mui.com/static/colors-preview/deepOrange-800-24x24.svg) ![deepOrange 900](https://mui.com/static/colors-preview/deepOrange-900-24x24.svg) ![deepOrange A100](https://mui.com/static/colors-preview/deepOrange-A100-24x24.svg) ![deepOrange A200](https://mui.com/static/colors-preview/deepOrange-A200-24x24.svg) ![deepOrange A400](https://mui.com/static/colors-preview/deepOrange-A400-24x24.svg) ![deepOrange A700](https://mui.com/static/colors-preview/deepOrange-A700-24x24.svg)

variable deepPurple

const deepPurple: {
    50: '#ede7f6';
    100: '#d1c4e9';
    200: '#b39ddb';
    300: '#9575cd';
    400: '#7e57c2';
    500: '#673ab7';
    600: '#5e35b1';
    700: '#512da8';
    800: '#4527a0';
    900: '#311b92';
    A100: '#b388ff';
    A200: '#7c4dff';
    A400: '#651fff';
    A700: '#6200ea';
};

![deepPurple 50](https://mui.com/static/colors-preview/deepPurple-50-24x24.svg) ![deepPurple 100](https://mui.com/static/colors-preview/deepPurple-100-24x24.svg) ![deepPurple 200](https://mui.com/static/colors-preview/deepPurple-200-24x24.svg) ![deepPurple 300](https://mui.com/static/colors-preview/deepPurple-300-24x24.svg) ![deepPurple 400](https://mui.com/static/colors-preview/deepPurple-400-24x24.svg) ![deepPurple 500](https://mui.com/static/colors-preview/deepPurple-500-24x24.svg) ![deepPurple 600](https://mui.com/static/colors-preview/deepPurple-600-24x24.svg) ![deepPurple 700](https://mui.com/static/colors-preview/deepPurple-700-24x24.svg) ![deepPurple 800](https://mui.com/static/colors-preview/deepPurple-800-24x24.svg) ![deepPurple 900](https://mui.com/static/colors-preview/deepPurple-900-24x24.svg) ![deepPurple A100](https://mui.com/static/colors-preview/deepPurple-A100-24x24.svg) ![deepPurple A200](https://mui.com/static/colors-preview/deepPurple-A200-24x24.svg) ![deepPurple A400](https://mui.com/static/colors-preview/deepPurple-A400-24x24.svg) ![deepPurple A700](https://mui.com/static/colors-preview/deepPurple-A700-24x24.svg)

variable green

const green: {
    50: '#e8f5e9';
    100: '#c8e6c9';
    200: '#a5d6a7';
    300: '#81c784';
    400: '#66bb6a';
    500: '#4caf50';
    600: '#43a047';
    700: '#388e3c';
    800: '#2e7d32';
    900: '#1b5e20';
    A100: '#b9f6ca';
    A200: '#69f0ae';
    A400: '#00e676';
    A700: '#00c853';
};

![green 50](https://mui.com/static/colors-preview/green-50-24x24.svg) ![green 100](https://mui.com/static/colors-preview/green-100-24x24.svg) ![green 200](https://mui.com/static/colors-preview/green-200-24x24.svg) ![green 300](https://mui.com/static/colors-preview/green-300-24x24.svg) ![green 400](https://mui.com/static/colors-preview/green-400-24x24.svg) ![green 500](https://mui.com/static/colors-preview/green-500-24x24.svg) ![green 600](https://mui.com/static/colors-preview/green-600-24x24.svg) ![green 700](https://mui.com/static/colors-preview/green-700-24x24.svg) ![green 800](https://mui.com/static/colors-preview/green-800-24x24.svg) ![green 900](https://mui.com/static/colors-preview/green-900-24x24.svg) ![green A100](https://mui.com/static/colors-preview/green-A100-24x24.svg) ![green A200](https://mui.com/static/colors-preview/green-A200-24x24.svg) ![green A400](https://mui.com/static/colors-preview/green-A400-24x24.svg) ![green A700](https://mui.com/static/colors-preview/green-A700-24x24.svg)

variable grey

const grey: {
    50: '#fafafa';
    100: '#f5f5f5';
    200: '#eeeeee';
    300: '#e0e0e0';
    400: '#bdbdbd';
    500: '#9e9e9e';
    600: '#757575';
    700: '#616161';
    800: '#424242';
    900: '#212121';
    A100: '#d5d5d5';
    A200: '#aaaaaa';
    A400: '#303030';
    A700: '#616161';
};

![grey 50](https://mui.com/static/colors-preview/grey-50-24x24.svg) ![grey 100](https://mui.com/static/colors-preview/grey-100-24x24.svg) ![grey 200](https://mui.com/static/colors-preview/grey-200-24x24.svg) ![grey 300](https://mui.com/static/colors-preview/grey-300-24x24.svg) ![grey 400](https://mui.com/static/colors-preview/grey-400-24x24.svg) ![grey 500](https://mui.com/static/colors-preview/grey-500-24x24.svg) ![grey 600](https://mui.com/static/colors-preview/grey-600-24x24.svg) ![grey 700](https://mui.com/static/colors-preview/grey-700-24x24.svg) ![grey 800](https://mui.com/static/colors-preview/grey-800-24x24.svg) ![grey 900](https://mui.com/static/colors-preview/grey-900-24x24.svg) ![grey A100](https://mui.com/static/colors-preview/grey-A100-24x24.svg) ![grey A200](https://mui.com/static/colors-preview/grey-A200-24x24.svg) ![grey A400](https://mui.com/static/colors-preview/grey-A400-24x24.svg) ![grey A700](https://mui.com/static/colors-preview/grey-A700-24x24.svg)

variable indigo

const indigo: {
    50: '#e8eaf6';
    100: '#c5cae9';
    200: '#9fa8da';
    300: '#7986cb';
    400: '#5c6bc0';
    500: '#3f51b5';
    600: '#3949ab';
    700: '#303f9f';
    800: '#283593';
    900: '#1a237e';
    A100: '#8c9eff';
    A200: '#536dfe';
    A400: '#3d5afe';
    A700: '#304ffe';
};

![indigo 50](https://mui.com/static/colors-preview/indigo-50-24x24.svg) ![indigo 100](https://mui.com/static/colors-preview/indigo-100-24x24.svg) ![indigo 200](https://mui.com/static/colors-preview/indigo-200-24x24.svg) ![indigo 300](https://mui.com/static/colors-preview/indigo-300-24x24.svg) ![indigo 400](https://mui.com/static/colors-preview/indigo-400-24x24.svg) ![indigo 500](https://mui.com/static/colors-preview/indigo-500-24x24.svg) ![indigo 600](https://mui.com/static/colors-preview/indigo-600-24x24.svg) ![indigo 700](https://mui.com/static/colors-preview/indigo-700-24x24.svg) ![indigo 800](https://mui.com/static/colors-preview/indigo-800-24x24.svg) ![indigo 900](https://mui.com/static/colors-preview/indigo-900-24x24.svg) ![indigo A100](https://mui.com/static/colors-preview/indigo-A100-24x24.svg) ![indigo A200](https://mui.com/static/colors-preview/indigo-A200-24x24.svg) ![indigo A400](https://mui.com/static/colors-preview/indigo-A400-24x24.svg) ![indigo A700](https://mui.com/static/colors-preview/indigo-A700-24x24.svg)

variable lightBlue

const lightBlue: {
    50: '#e1f5fe';
    100: '#b3e5fc';
    200: '#81d4fa';
    300: '#4fc3f7';
    400: '#29b6f6';
    500: '#03a9f4';
    600: '#039be5';
    700: '#0288d1';
    800: '#0277bd';
    900: '#01579b';
    A100: '#80d8ff';
    A200: '#40c4ff';
    A400: '#00b0ff';
    A700: '#0091ea';
};

![lightBlue 50](https://mui.com/static/colors-preview/lightBlue-50-24x24.svg) ![lightBlue 100](https://mui.com/static/colors-preview/lightBlue-100-24x24.svg) ![lightBlue 200](https://mui.com/static/colors-preview/lightBlue-200-24x24.svg) ![lightBlue 300](https://mui.com/static/colors-preview/lightBlue-300-24x24.svg) ![lightBlue 400](https://mui.com/static/colors-preview/lightBlue-400-24x24.svg) ![lightBlue 500](https://mui.com/static/colors-preview/lightBlue-500-24x24.svg) ![lightBlue 600](https://mui.com/static/colors-preview/lightBlue-600-24x24.svg) ![lightBlue 700](https://mui.com/static/colors-preview/lightBlue-700-24x24.svg) ![lightBlue 800](https://mui.com/static/colors-preview/lightBlue-800-24x24.svg) ![lightBlue 900](https://mui.com/static/colors-preview/lightBlue-900-24x24.svg) ![lightBlue A100](https://mui.com/static/colors-preview/lightBlue-A100-24x24.svg) ![lightBlue A200](https://mui.com/static/colors-preview/lightBlue-A200-24x24.svg) ![lightBlue A400](https://mui.com/static/colors-preview/lightBlue-A400-24x24.svg) ![lightBlue A700](https://mui.com/static/colors-preview/lightBlue-A700-24x24.svg)

variable lightGreen

const lightGreen: {
    50: '#f1f8e9';
    100: '#dcedc8';
    200: '#c5e1a5';
    300: '#aed581';
    400: '#9ccc65';
    500: '#8bc34a';
    600: '#7cb342';
    700: '#689f38';
    800: '#558b2f';
    900: '#33691e';
    A100: '#ccff90';
    A200: '#b2ff59';
    A400: '#76ff03';
    A700: '#64dd17';
};

![lightGreen 50](https://mui.com/static/colors-preview/lightGreen-50-24x24.svg) ![lightGreen 100](https://mui.com/static/colors-preview/lightGreen-100-24x24.svg) ![lightGreen 200](https://mui.com/static/colors-preview/lightGreen-200-24x24.svg) ![lightGreen 300](https://mui.com/static/colors-preview/lightGreen-300-24x24.svg) ![lightGreen 400](https://mui.com/static/colors-preview/lightGreen-400-24x24.svg) ![lightGreen 500](https://mui.com/static/colors-preview/lightGreen-500-24x24.svg) ![lightGreen 600](https://mui.com/static/colors-preview/lightGreen-600-24x24.svg) ![lightGreen 700](https://mui.com/static/colors-preview/lightGreen-700-24x24.svg) ![lightGreen 800](https://mui.com/static/colors-preview/lightGreen-800-24x24.svg) ![lightGreen 900](https://mui.com/static/colors-preview/lightGreen-900-24x24.svg) ![lightGreen A100](https://mui.com/static/colors-preview/lightGreen-A100-24x24.svg) ![lightGreen A200](https://mui.com/static/colors-preview/lightGreen-A200-24x24.svg) ![lightGreen A400](https://mui.com/static/colors-preview/lightGreen-A400-24x24.svg) ![lightGreen A700](https://mui.com/static/colors-preview/lightGreen-A700-24x24.svg)

variable lime

const lime: {
    50: '#f9fbe7';
    100: '#f0f4c3';
    200: '#e6ee9c';
    300: '#dce775';
    400: '#d4e157';
    500: '#cddc39';
    600: '#c0ca33';
    700: '#afb42b';
    800: '#9e9d24';
    900: '#827717';
    A100: '#f4ff81';
    A200: '#eeff41';
    A400: '#c6ff00';
    A700: '#aeea00';
};

![lime 50](https://mui.com/static/colors-preview/lime-50-24x24.svg) ![lime 100](https://mui.com/static/colors-preview/lime-100-24x24.svg) ![lime 200](https://mui.com/static/colors-preview/lime-200-24x24.svg) ![lime 300](https://mui.com/static/colors-preview/lime-300-24x24.svg) ![lime 400](https://mui.com/static/colors-preview/lime-400-24x24.svg) ![lime 500](https://mui.com/static/colors-preview/lime-500-24x24.svg) ![lime 600](https://mui.com/static/colors-preview/lime-600-24x24.svg) ![lime 700](https://mui.com/static/colors-preview/lime-700-24x24.svg) ![lime 800](https://mui.com/static/colors-preview/lime-800-24x24.svg) ![lime 900](https://mui.com/static/colors-preview/lime-900-24x24.svg) ![lime A100](https://mui.com/static/colors-preview/lime-A100-24x24.svg) ![lime A200](https://mui.com/static/colors-preview/lime-A200-24x24.svg) ![lime A400](https://mui.com/static/colors-preview/lime-A400-24x24.svg) ![lime A700](https://mui.com/static/colors-preview/lime-A700-24x24.svg)

variable orange

const orange: {
    50: '#fff3e0';
    100: '#ffe0b2';
    200: '#ffcc80';
    300: '#ffb74d';
    400: '#ffa726';
    500: '#ff9800';
    600: '#fb8c00';
    700: '#f57c00';
    800: '#ef6c00';
    900: '#e65100';
    A100: '#ffd180';
    A200: '#ffab40';
    A400: '#ff9100';
    A700: '#ff6d00';
};

![orange 50](https://mui.com/static/colors-preview/orange-50-24x24.svg) ![orange 100](https://mui.com/static/colors-preview/orange-100-24x24.svg) ![orange 200](https://mui.com/static/colors-preview/orange-200-24x24.svg) ![orange 300](https://mui.com/static/colors-preview/orange-300-24x24.svg) ![orange 400](https://mui.com/static/colors-preview/orange-400-24x24.svg) ![orange 500](https://mui.com/static/colors-preview/orange-500-24x24.svg) ![orange 600](https://mui.com/static/colors-preview/orange-600-24x24.svg) ![orange 700](https://mui.com/static/colors-preview/orange-700-24x24.svg) ![orange 800](https://mui.com/static/colors-preview/orange-800-24x24.svg) ![orange 900](https://mui.com/static/colors-preview/orange-900-24x24.svg) ![orange A100](https://mui.com/static/colors-preview/orange-A100-24x24.svg) ![orange A200](https://mui.com/static/colors-preview/orange-A200-24x24.svg) ![orange A400](https://mui.com/static/colors-preview/orange-A400-24x24.svg) ![orange A700](https://mui.com/static/colors-preview/orange-A700-24x24.svg)

variable pink

const pink: {
    50: '#fce4ec';
    100: '#f8bbd0';
    200: '#f48fb1';
    300: '#f06292';
    400: '#ec407a';
    500: '#e91e63';
    600: '#d81b60';
    700: '#c2185b';
    800: '#ad1457';
    900: '#880e4f';
    A100: '#ff80ab';
    A200: '#ff4081';
    A400: '#f50057';
    A700: '#c51162';
};

![pink 50](https://mui.com/static/colors-preview/pink-50-24x24.svg) ![pink 100](https://mui.com/static/colors-preview/pink-100-24x24.svg) ![pink 200](https://mui.com/static/colors-preview/pink-200-24x24.svg) ![pink 300](https://mui.com/static/colors-preview/pink-300-24x24.svg) ![pink 400](https://mui.com/static/colors-preview/pink-400-24x24.svg) ![pink 500](https://mui.com/static/colors-preview/pink-500-24x24.svg) ![pink 600](https://mui.com/static/colors-preview/pink-600-24x24.svg) ![pink 700](https://mui.com/static/colors-preview/pink-700-24x24.svg) ![pink 800](https://mui.com/static/colors-preview/pink-800-24x24.svg) ![pink 900](https://mui.com/static/colors-preview/pink-900-24x24.svg) ![pink A100](https://mui.com/static/colors-preview/pink-A100-24x24.svg) ![pink A200](https://mui.com/static/colors-preview/pink-A200-24x24.svg) ![pink A400](https://mui.com/static/colors-preview/pink-A400-24x24.svg) ![pink A700](https://mui.com/static/colors-preview/pink-A700-24x24.svg)

variable purple

const purple: {
    50: '#f3e5f5';
    100: '#e1bee7';
    200: '#ce93d8';
    300: '#ba68c8';
    400: '#ab47bc';
    500: '#9c27b0';
    600: '#8e24aa';
    700: '#7b1fa2';
    800: '#6a1b9a';
    900: '#4a148c';
    A100: '#ea80fc';
    A200: '#e040fb';
    A400: '#d500f9';
    A700: '#aa00ff';
};

![purple 50](https://mui.com/static/colors-preview/purple-50-24x24.svg) ![purple 100](https://mui.com/static/colors-preview/purple-100-24x24.svg) ![purple 200](https://mui.com/static/colors-preview/purple-200-24x24.svg) ![purple 300](https://mui.com/static/colors-preview/purple-300-24x24.svg) ![purple 400](https://mui.com/static/colors-preview/purple-400-24x24.svg) ![purple 500](https://mui.com/static/colors-preview/purple-500-24x24.svg) ![purple 600](https://mui.com/static/colors-preview/purple-600-24x24.svg) ![purple 700](https://mui.com/static/colors-preview/purple-700-24x24.svg) ![purple 800](https://mui.com/static/colors-preview/purple-800-24x24.svg) ![purple 900](https://mui.com/static/colors-preview/purple-900-24x24.svg) ![purple A100](https://mui.com/static/colors-preview/purple-A100-24x24.svg) ![purple A200](https://mui.com/static/colors-preview/purple-A200-24x24.svg) ![purple A400](https://mui.com/static/colors-preview/purple-A400-24x24.svg) ![purple A700](https://mui.com/static/colors-preview/purple-A700-24x24.svg)

variable red

const red: {
    50: '#ffebee';
    100: '#ffcdd2';
    200: '#ef9a9a';
    300: '#e57373';
    400: '#ef5350';
    500: '#f44336';
    600: '#e53935';
    700: '#d32f2f';
    800: '#c62828';
    900: '#b71c1c';
    A100: '#ff8a80';
    A200: '#ff5252';
    A400: '#ff1744';
    A700: '#d50000';
};

![red 50](https://mui.com/static/colors-preview/red-50-24x24.svg) ![red 100](https://mui.com/static/colors-preview/red-100-24x24.svg) ![red 200](https://mui.com/static/colors-preview/red-200-24x24.svg) ![red 300](https://mui.com/static/colors-preview/red-300-24x24.svg) ![red 400](https://mui.com/static/colors-preview/red-400-24x24.svg) ![red 500](https://mui.com/static/colors-preview/red-500-24x24.svg) ![red 600](https://mui.com/static/colors-preview/red-600-24x24.svg) ![red 700](https://mui.com/static/colors-preview/red-700-24x24.svg) ![red 800](https://mui.com/static/colors-preview/red-800-24x24.svg) ![red 900](https://mui.com/static/colors-preview/red-900-24x24.svg) ![red A100](https://mui.com/static/colors-preview/red-A100-24x24.svg) ![red A200](https://mui.com/static/colors-preview/red-A200-24x24.svg) ![red A400](https://mui.com/static/colors-preview/red-A400-24x24.svg) ![red A700](https://mui.com/static/colors-preview/red-A700-24x24.svg)

variable teal

const teal: {
    50: '#e0f2f1';
    100: '#b2dfdb';
    200: '#80cbc4';
    300: '#4db6ac';
    400: '#26a69a';
    500: '#009688';
    600: '#00897b';
    700: '#00796b';
    800: '#00695c';
    900: '#004d40';
    A100: '#a7ffeb';
    A200: '#64ffda';
    A400: '#1de9b6';
    A700: '#00bfa5';
};

![teal 50](https://mui.com/static/colors-preview/teal-50-24x24.svg) ![teal 100](https://mui.com/static/colors-preview/teal-100-24x24.svg) ![teal 200](https://mui.com/static/colors-preview/teal-200-24x24.svg) ![teal 300](https://mui.com/static/colors-preview/teal-300-24x24.svg) ![teal 400](https://mui.com/static/colors-preview/teal-400-24x24.svg) ![teal 500](https://mui.com/static/colors-preview/teal-500-24x24.svg) ![teal 600](https://mui.com/static/colors-preview/teal-600-24x24.svg) ![teal 700](https://mui.com/static/colors-preview/teal-700-24x24.svg) ![teal 800](https://mui.com/static/colors-preview/teal-800-24x24.svg) ![teal 900](https://mui.com/static/colors-preview/teal-900-24x24.svg) ![teal A100](https://mui.com/static/colors-preview/teal-A100-24x24.svg) ![teal A200](https://mui.com/static/colors-preview/teal-A200-24x24.svg) ![teal A400](https://mui.com/static/colors-preview/teal-A400-24x24.svg) ![teal A700](https://mui.com/static/colors-preview/teal-A700-24x24.svg)

variable yellow

const yellow: {
    50: '#fffde7';
    100: '#fff9c4';
    200: '#fff59d';
    300: '#fff176';
    400: '#ffee58';
    500: '#ffeb3b';
    600: '#fdd835';
    700: '#fbc02d';
    800: '#f9a825';
    900: '#f57f17';
    A100: '#ffff8d';
    A200: '#ffff00';
    A400: '#ffea00';
    A700: '#ffd600';
};

![yellow 50](https://mui.com/static/colors-preview/yellow-50-24x24.svg) ![yellow 100](https://mui.com/static/colors-preview/yellow-100-24x24.svg) ![yellow 200](https://mui.com/static/colors-preview/yellow-200-24x24.svg) ![yellow 300](https://mui.com/static/colors-preview/yellow-300-24x24.svg) ![yellow 400](https://mui.com/static/colors-preview/yellow-400-24x24.svg) ![yellow 500](https://mui.com/static/colors-preview/yellow-500-24x24.svg) ![yellow 600](https://mui.com/static/colors-preview/yellow-600-24x24.svg) ![yellow 700](https://mui.com/static/colors-preview/yellow-700-24x24.svg) ![yellow 800](https://mui.com/static/colors-preview/yellow-800-24x24.svg) ![yellow 900](https://mui.com/static/colors-preview/yellow-900-24x24.svg) ![yellow A100](https://mui.com/static/colors-preview/yellow-A100-24x24.svg) ![yellow A200](https://mui.com/static/colors-preview/yellow-A200-24x24.svg) ![yellow A400](https://mui.com/static/colors-preview/yellow-A400-24x24.svg) ![yellow A700](https://mui.com/static/colors-preview/yellow-A700-24x24.svg)

namespace PropTypes

namespace PropTypes {}

type Alignment

type Alignment = 'inherit' | 'left' | 'center' | 'right' | 'justify';

type Color

type Color = 'inherit' | 'primary' | 'secondary' | 'default';

type Margin

type Margin = 'none' | 'dense' | 'normal';

Package Files (176)

Dependencies (12)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (3)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material-ui/core.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@material-ui/core)

HTML

<a href="https://www.jsdocs.io/package/@material-ui/core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 year ago.
Package analyzed in 15450 ms.
Missing or incorrect documentation? Open an issue for this package.

@material-ui/core

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable AccordionSummary

variable Avatar

variable Badge

variable BottomNavigation

variable BottomNavigationAction

variable Box

variable Breadcrumbs

variable Button

variable ButtonBase

variable ButtonGroup

variable CardActionArea

variable CardContent

variable CardHeader

variable CardMedia

variable Chip

variable Container

variable DialogContentText

variable Divider

variable duration

variable easing

variable ExpansionPanelSummary

variable Fab

variable FormControl

variable FormHelperText

variable FormLabel

variable Grid

variable GridList

variable GridListTile

variable Hidden

variable Icon

variable IconButton

variable ImageList

variable ImageListItem

variable InputAdornment

variable Link

variable List

variable ListItem

variable ListSubheader

variable MenuItem

variable Modal

variable RootRef

Deprecated

variable Slider

variable StepButton

variable SvgIcon

variable SwipeableDrawer

variable Tab

variable Table

variable TableBody

variable TableContainer

variable TableFooter

variable TableHead

variable TablePagination

variable TableRow

variable TableSortLabel

variable Tabs

variable Toolbar

variable Typography

variable withTheme

Functions

function Accordion

function AccordionActions

function AccordionDetails

function alpha

function AppBar

function Backdrop

function capitalize

function Card

function CardActions