@material-ui/core
- Version 4.12.4
- Published
- 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
- AccordionSummary
- Avatar
- Badge
- BottomNavigation
- BottomNavigationAction
- Box
- Breadcrumbs
- Button
- ButtonBase
- ButtonGroup
- CardActionArea
- CardContent
- CardHeader
- CardMedia
- Chip
- Container
- DialogContentText
- Divider
- duration
- easing
- ExpansionPanelSummary
- Fab
- FormControl
- FormHelperText
- FormLabel
- Grid
- GridList
- GridListTile
- Hidden
- Icon
- IconButton
- ImageList
- ImageListItem
- InputAdornment
- Link
- List
- ListItem
- ListSubheader
- MenuItem
- Modal
- RootRef
- Slider
- StepButton
- SvgIcon
- SwipeableDrawer
- Tab
- Table
- TableBody
- TableContainer
- TableFooter
- TableHead
- TablePagination
- TableRow
- TableSortLabel
- Tabs
- Toolbar
- Typography
- withTheme
Functions
- Accordion()
- AccordionActions()
- AccordionDetails()
- alpha()
- AppBar()
- Backdrop()
- capitalize()
- Card()
- CardActions()
- Checkbox()
- CircularProgress()
- ClickAwayListener()
- Collapse()
- createChainedFunction()
- createMuiTheme()
- createSvgIcon()
- createTheme()
- CssBaseline()
- darken()
- debounce()
- decomposeColor()
- deprecatedPropType()
- Dialog()
- DialogActions()
- DialogContent()
- DialogTitle()
- Drawer()
- emphasize()
- ExpansionPanel()
- ExpansionPanelActions()
- ExpansionPanelDetails()
- fade()
- Fade()
- FilledInput()
- formatMs()
- FormControlLabel()
- FormGroup()
- getContrastRatio()
- getLuminance()
- GridListTileBar()
- Grow()
- hexToRgb()
- hslToRgb()
- ImageListItemBar()
- Input()
- InputBase()
- InputLabel()
- isMuiElement()
- isWidthDown()
- isWidthUp()
- lighten()
- LinearProgress()
- ListItemAvatar()
- ListItemIcon()
- ListItemSecondaryAction()
- ListItemText()
- makeStyles()
- Menu()
- MenuList()
- MobileStepper()
- NativeSelect()
- NoSsr()
- OutlinedInput()
- ownerDocument()
- ownerWindow()
- Paper()
- Popover()
- Popper()
- Portal()
- Radio()
- RadioGroup()
- recomposeColor()
- requirePropFactory()
- responsiveFontSizes()
- rgbToHex()
- Select()
- setRef()
- Slide()
- Snackbar()
- SnackbarContent()
- Step()
- StepConnector()
- StepContent()
- StepIcon()
- StepLabel()
- Stepper()
- styled()
- Switch()
- TableCell()
- TabScrollButton()
- TextareaAutosize()
- TextField()
- Tooltip()
- unstable_createMuiStrictModeTheme()
- Unstable_TrapFocus()
- unsupportedProp()
- useControlled()
- useEventCallback()
- useForkRef()
- useFormControl()
- useIsFocusVisible()
- useMediaQuery()
- useRadioGroup()
- useScrollTrigger()
- useTheme()
- withMobileDialog()
- withStyles()
- withWidth()
- Zoom()
Classes
Interfaces
ComponentsPropsList
- MuiAccordion
- MuiAccordionActions
- MuiAccordionDetails
- MuiAccordionSummary
- MuiAppBar
- MuiAvatar
- MuiBackdrop
- MuiBadge
- MuiBottomNavigation
- MuiBottomNavigationAction
- MuiBreadcrumbs
- MuiButton
- MuiButtonBase
- MuiButtonGroup
- MuiCard
- MuiCardActionArea
- MuiCardActions
- MuiCardContent
- MuiCardHeader
- MuiCardMedia
- MuiCheckbox
- MuiChip
- MuiCircularProgress
- MuiCollapse
- MuiContainer
- MuiCssBaseline
- MuiDialog
- MuiDialogActions
- MuiDialogContent
- MuiDialogContentText
- MuiDialogTitle
- MuiDivider
- MuiDrawer
- MuiExpansionPanel
- MuiExpansionPanelActions
- MuiExpansionPanelDetails
- MuiExpansionPanelSummary
- MuiFab
- MuiFilledInput
- MuiFormControl
- MuiFormControlLabel
- MuiFormGroup
- MuiFormHelperText
- MuiFormLabel
- MuiGrid
- MuiIcon
- MuiIconButton
- MuiImageList
- MuiImageListItem
- MuiImageListItemBar
- MuiInput
- MuiInputAdornment
- MuiInputBase
- MuiInputLabel
- MuiLinearProgress
- MuiLink
- MuiList
- MuiListItem
- MuiListItemAvatar
- MuiListItemIcon
- MuiListItemSecondaryAction
- MuiListItemText
- MuiListSubheader
- MuiMenu
- MuiMenuItem
- MuiMenuList
- MuiMobileStepper
- MuiModal
- MuiNativeSelect
- MuiOutlinedInput
- MuiPaper
- MuiPopover
- MuiRadio
- MuiRadioGroup
- MuiSelect
- MuiSlider
- MuiSnackbar
- MuiSnackbarContent
- MuiStep
- MuiStepButton
- MuiStepConnector
- MuiStepContent
- MuiStepIcon
- MuiStepLabel
- MuiStepper
- MuiSvgIcon
- MuiSwipeableDrawer
- MuiSwitch
- MuiTab
- MuiTable
- MuiTableBody
- MuiTableCell
- MuiTableContainer
- MuiTableHead
- MuiTablePagination
- MuiTableRow
- MuiTableSortLabel
- MuiTabs
- MuiTextField
- MuiToolbar
- MuiTooltip
- MuiTouchRipple
- MuiTypography
- MuiUseMediaQuery
- MuiWithWidth
Type Aliases
- AccordionActionsClassKey
- AccordionClassKey
- AccordionDetailsClassKey
- AccordionSummaryClassKey
- AccordionSummaryProps
- AccordionSummaryTypeMap
- AppBarClassKey
- AvatarClassKey
- AvatarProps
- BackdropClassKey
- BadgeClassKey
- BadgeProps
- BottomNavigationActionClassKey
- BottomNavigationActionProps
- BottomNavigationActionTypeMap
- BottomNavigationClassKey
- BottomNavigationProps
- BreadcrumbsClassKey
- BreadcrumbsProps
- ButtonBaseClassKey
- ButtonBaseProps
- ButtonClassKey
- ButtonGroupClassKey
- ButtonGroupProps
- ButtonProps
- ButtonTypeMap
- CardActionAreaClassKey
- CardActionAreaProps
- CardActionAreaTypeMap
- CardActionsClassKey
- CardClassKey
- CardContentClassKey
- CardContentProps
- CardHeaderClassKey
- CardHeaderProps
- CardHeaderPropsWithComponent
- CardMediaClassKey
- CardMediaProps
- CheckboxClassKey
- ChipClassKey
- ChipProps
- CircularProgressClassKey
- CollapseClassKey
- ColorFormat
- ContainerClassKey
- ContainerProps
- CssBaselineClassKey
- DialogActionsClassKey
- DialogClassKey
- DialogContentClassKey
- DialogContentTextClassKey
- DialogContentTextProps
- DialogTitleClassKey
- Direction
- DividerClassKey
- DividerProps
- DrawerClassKey
- ExpansionPanelActionsClassKey
- ExpansionPanelClassKey
- ExpansionPanelDetailsClassKey
- ExpansionPanelSummaryClassKey
- ExpansionPanelSummaryProps
- ExpansionPanelSummaryTypeMap
- ExtendButtonBase
- FabClassKey
- FabProps
- FabTypeMap
- FilledInputClassKey
- FormControlClassKey
- FormControlLabelClassKey
- FormControlProps
- FormGroupClassKey
- FormHelperTextClassKey
- FormHelperTextProps
- FormLabelBaseProps
- FormLabelClassKey
- FormLabelProps
- GridClassKey
- GridContentAlignment
- GridDirection
- GridItemsAlignment
- GridJustification
- GridListClassKey
- GridListProps
- GridListTileBarClassKey
- GridListTileClassKey
- GridListTileProps
- GridProps
- GridSize
- GridSpacing
- GridWrap
- IconButtonClassKey
- IconButtonProps
- IconButtonTypeMap
- IconClassKey
- IconProps
- ImageListClassKey
- ImageListItemBarClassKey
- ImageListItemClassKey
- ImageListItemProps
- ImageListProps
- InputAdornmentClassKey
- InputAdornmentProps
- InputBaseClassKey
- InputClassKey
- InputLabelClassKey
- LinearProgressClassKey
- LinkBaseProps
- LinkClassKey
- LinkProps
- ListClassKey
- ListItemAvatarClassKey
- ListItemClassKey
- ListItemIconClassKey
- ListItemProps
- ListItemSecondaryActionClassKey
- ListItemTextClassKey
- ListProps
- ListSubheaderClassKey
- ListSubheaderProps
- MenuClassKey
- MenuItemClassKey
- MenuItemProps
- MenuItemTypeMap
- MenuListClassKey
- MobileStepperClassKey
- MuiMediaQueryListListener
- NativeSelectClassKey
- Orientation
- OutlinedInputClassKey
- Padding
- PaletteColorOptions
- PaletteType
- PaperClassKey
- PopoverClassKey
- PopoverReference
- PopperPlacementType
- RadioClassKey
- RadioGroupClassKey
- SelectClassKey
- Size
- SliderClassKey
- SliderProps
- SnackbarClassKey
- SnackbarCloseReason
- SnackbarContentClassKey
- SortDirection
- StandardProps
- StepButtonClasskey
- StepButtonIcon
- StepButtonProps
- StepButtonTypeMap
- StepClasskey
- StepConnectorClasskey
- StepConnectorIcon
- StepContentClasskey
- StepIconClasskey
- StepLabelClasskey
- StepperClasskey
- StyleRules
- SvgIconClassKey
- SvgIconProps
- SwitchClassKey
- TabClassKey
- TableBodyClassKey
- TableBodyProps
- TableCellBaseProps
- TableCellClassKey
- TableClassKey
- TableContainerClassKey
- TableContainerProps
- TableFooterClassKey
- TableFooterProps
- TableHeadClassKey
- TableHeadProps
- TablePaginationBaseProps
- TablePaginationClassKey
- TablePaginationProps
- TableProps
- TableRowClassKey
- TableRowProps
- TableSortLabelClassKey
- TableSortLabelProps
- TableSortLabelTypeMap
- TabProps
- TabsClassKey
- TabScrollButtonClassKey
- TabsProps
- TabTypeMap
- TextFieldClassKey
- TextFieldProps
- ToolbarClassKey
- ToolbarProps
- TooltipClassKey
- TypographyClassKey
- TypographyProps
- TypographyStyle
- TypographyVariant
- WithStyles
Namespaces
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>;
variable Breadcrumbs
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'
orimport 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'
orimport 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'
orimport 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/)
variable Modal
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 insideTableFooter
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/)
variable Toolbar
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 thearia-busy
attribute totrue
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'
orimport 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'
orimport 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'
orimport 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
andCheckbox
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 asCheckbox
andSwitch
. It provides compact row layout. For theRadio
, you should be using theRadioGroup
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'
orimport 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 thearia-busy
attribute totrue
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 anAvatar
. 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 anIcon
orSvgIcon
. 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>;
function Menu
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/)
function Popover
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/)
function Tooltip
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 tostatic
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
, theinput
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
, theinput
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 makelabel
andhelperText
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
ornormal
, 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 theinput
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 toSelect
asinput
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 {}
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 adata-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
, theinput
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 isindeterminate
.
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 passedComponent
.
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 {}
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;