| Feature | State |
|---|---|
styled |
✅ |
sx property |
✅ |
| System properties | ✅ |
| Theme context | ✅ |
| Slot classes | ✅ |
| Breakpoints as an object/array | ✅ |
styleOverrides |
| Transformer | State |
|---|---|
| MUI imports | ✅ |
| MUI components | ⏳ |
| ES6 destructuring assignment | ✅ |
| ES6 spread assignment | ✅ |
React.*Event |
✅ |
React.*EventHandler |
✅ |
React.*HTMLAttributes |
✅ |
React.Attributes.className |
✅ |
React.Attributes.key |
✅ |
React.Context |
✅ |
React.createContext |
✅ |
React.ElementType |
✅ |
React.forwardRef |
✅ |
React.Fragment |
✅ |
React.JSXElementConstructor |
✅ |
React.memo |
✅ |
React.ReactElement |
✅ |
React.ReactNode |
✅ |
React.Ref |
✅ |
React.useCallback |
✅ |
React.useContext |
✅ |
React.useEffect |
✅ |
React.useLayoutEffect |
✅ |
React.useMemo |
✅ |
React.useRef |
✅ |
React.useState |
✅ |
| Component | State | Pending props |
|---|---|---|
| Accordion | ||
| AccordionActions | ||
| AccordionDetails | ||
| AccordionSummary | ||
| Alert | ✅ | |
| AlertTitle | ✅ | |
| AppBar | ✅ | |
| Autocomplete | ||
| Avatar | ✅ | |
| AvatarGroup | ||
| Backdrop | ✅ | |
| Badge | ✅ | |
| BottomNavigation | ||
| BottomNavigationAction | ||
| Box | ✅ | |
| Breadcrumbs | ✅ | |
| Button | ✅ | |
| ButtonBase | ✅ | |
| ButtonGroup | ✅ | |
| Card | ✅ | |
| CardActionArea | ✅ | |
| CardActions | ✅ | |
| CardContent | ✅ | |
| CardHeader | ✅ | |
| CardMedia | ✅ | |
| Checkbox | ✅ | |
| Chip | ✅ | |
| CircularProgress | ✅ | |
| ClickAwayListener | ||
| Collapse | ||
| Container | ✅ | |
| CssBaseline | ✅ | |
| Dialog | ✅ | |
| DialogActions | ✅ | |
| DialogContent | ✅ | |
| DialogContentText | ✅ | |
| DialogTitle | ✅ | |
| Divider | ✅ | |
| Drawer | ✅ | |
| Fab | ✅ | |
| Fade | ✅ | |
| FilledInput | ✅ | |
| FormControl | ✅ | |
| FormControlLabel | ✅ | |
| FormGroup | ✅ | |
| FormHelperText | ✅ | |
| FormLabel | ✅ | |
| GlobalStyles | ✅ | |
| Grid | ✅ | |
| Grow | ✅ | |
| Hidden | ||
| Icon | ✅ | |
| IconButton | ✅ | |
| ImageList | ||
| ImageListItem | ||
| ImageListItemBar | ||
| Input | ✅ | |
| InputAdornment | ||
| InputBase | ✅ | |
| InputLabel | ✅ | |
| LinearProgress | ✅ | |
| Link | ✅ | |
| List | ✅ | |
| ListItem | ✅ | |
| ListItemAvatar | ✅ | |
| ListItemButton | ✅ | |
| ListItemIcon | ✅ | |
| ListItemSecondaryAction | ✅ | |
| ListItemText | ✅ | |
| ListSubheader | ✅ | |
| Menu | ✅ | |
| MenuItem | ✅ | |
| MenuList | ✅ | |
| MobileStepper | ||
| Modal | ✅ | |
| NativeSelect | ✅ | |
| NoSsr | ||
| OutlinedInput | ✅ | |
| Pagination | ||
| PaginationItem | ||
| Paper | ✅ | |
| Popover | ✅ | |
| Popper | ✅ | |
| Portal | ✅ | |
| Radio | ✅ | |
| RadioGroup | ✅ | |
| Rating | ||
| ScopedCssBaseline | ||
| Select | ✅ | |
| Skeleton | ✅ | |
| Slide | ✅ | |
| Slider | ||
| Snackbar | ||
| SnackbarContent | ||
| SpeedDial | ||
| SpeedDialAction | ||
| SpeedDialIcon | ||
| Stack | ✅ | |
| Step | ||
| StepButton | ||
| StepConnector | ||
| StepContent | ||
| StepIcon | ||
| StepLabel | ||
| Stepper | ||
| StyledEngineProvider | ||
| SvgIcon | ✅ | |
| SwipeableDrawer | ||
| Switch | ✅ | |
| Tab | ||
| Table | ✅ | |
| TableBody | ✅ | |
| TableCell | ✅ | |
| TableContainer | ✅ | |
| TableFooter | ✅ | |
| TableHead | ✅ | |
| TablePagination | ||
| TableRow | ✅ | |
| TableSortLabel | ||
| Tabs | ||
| TabScrollButton | ||
| TextField | ✅ | |
| ToggleButton | ✅ | |
| ToggleButtonGroup | ✅ | |
| Toolbar | ✅ | |
| Tooltip | ||
| Typography | ✅ | |
| Unstable_TrapFocus | ||
| useAutocomplete | ||
| useMediaQuery | ✅ | |
| usePagination | ||
| useScrollTrigger | ||
| useTouchRipple | ||
| Zoom |