diff --git a/packages/mui-material/src/styles/components.ts b/packages/mui-material/src/styles/components.ts index 8b44e4ee011908..6c35abfdf07c9c 100644 --- a/packages/mui-material/src/styles/components.ts +++ b/packages/mui-material/src/styles/components.ts @@ -12,490 +12,588 @@ export interface Components { defaultProps?: ComponentsProps['MuiAlert']; styleOverrides?: ComponentsOverrides['MuiAlert']; variants?: ComponentsVariants['MuiAlert']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiAlertTitle?: { defaultProps?: ComponentsProps['MuiAlertTitle']; styleOverrides?: ComponentsOverrides['MuiAlertTitle']; variants?: ComponentsVariants['MuiAlertTitle']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiAppBar?: { defaultProps?: ComponentsProps['MuiAppBar']; styleOverrides?: ComponentsOverrides['MuiAppBar']; variants?: ComponentsVariants['MuiAppBar']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiAutocomplete?: { defaultProps?: ComponentsProps['MuiAutocomplete']; styleOverrides?: ComponentsOverrides['MuiAutocomplete']; variants?: ComponentsVariants['MuiAutocomplete']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiAvatar?: { defaultProps?: ComponentsProps['MuiAvatar']; styleOverrides?: ComponentsOverrides['MuiAvatar']; variants?: ComponentsVariants['MuiAvatar']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiAvatarGroup?: { defaultProps?: ComponentsProps['MuiAvatarGroup']; styleOverrides?: ComponentsOverrides['MuiAvatarGroup']; variants?: ComponentsVariants['MuiAvatarGroup']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiBackdrop?: { defaultProps?: ComponentsProps['MuiBackdrop']; styleOverrides?: ComponentsOverrides['MuiBackdrop']; variants?: ComponentsVariants['MuiBackdrop']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiBadge?: { defaultProps?: ComponentsProps['MuiBadge']; styleOverrides?: ComponentsOverrides['MuiBadge']; variants?: ComponentsVariants['MuiBadge']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiBottomNavigation?: { defaultProps?: ComponentsProps['MuiBottomNavigation']; styleOverrides?: ComponentsOverrides['MuiBottomNavigation']; variants?: ComponentsVariants['MuiBottomNavigation']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiBottomNavigationAction?: { defaultProps?: ComponentsProps['MuiBottomNavigationAction']; styleOverrides?: ComponentsOverrides['MuiBottomNavigationAction']; variants?: ComponentsVariants['MuiBottomNavigationAction']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiBreadcrumbs?: { defaultProps?: ComponentsProps['MuiBreadcrumbs']; styleOverrides?: ComponentsOverrides['MuiBreadcrumbs']; variants?: ComponentsVariants['MuiBreadcrumbs']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiButton?: { defaultProps?: ComponentsProps['MuiButton']; styleOverrides?: ComponentsOverrides['MuiButton']; variants?: ComponentsVariants['MuiButton']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiButtonBase?: { defaultProps?: ComponentsProps['MuiButtonBase']; styleOverrides?: ComponentsOverrides['MuiButtonBase']; variants?: ComponentsVariants['MuiButtonBase']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiButtonGroup?: { defaultProps?: ComponentsProps['MuiButtonGroup']; styleOverrides?: ComponentsOverrides['MuiButtonGroup']; variants?: ComponentsVariants['MuiButtonGroup']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiCard?: { defaultProps?: ComponentsProps['MuiCard']; styleOverrides?: ComponentsOverrides['MuiCard']; variants?: ComponentsVariants['MuiCard']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiCardActionArea?: { defaultProps?: ComponentsProps['MuiCardActionArea']; styleOverrides?: ComponentsOverrides['MuiCardActionArea']; variants?: ComponentsVariants['MuiCardActionArea']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiCardActions?: { defaultProps?: ComponentsProps['MuiCardActions']; styleOverrides?: ComponentsOverrides['MuiCardActions']; variants?: ComponentsVariants['MuiCardActions']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiCardContent?: { defaultProps?: ComponentsProps['MuiCardContent']; styleOverrides?: ComponentsOverrides['MuiCardContent']; variants?: ComponentsVariants['MuiCardContent']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiCardHeader?: { defaultProps?: ComponentsProps['MuiCardHeader']; styleOverrides?: ComponentsOverrides['MuiCardHeader']; variants?: ComponentsVariants['MuiCardHeader']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiCardMedia?: { defaultProps?: ComponentsProps['MuiCardMedia']; styleOverrides?: ComponentsOverrides['MuiCardMedia']; variants?: ComponentsVariants['MuiCardMedia']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiCheckbox?: { defaultProps?: ComponentsProps['MuiCheckbox']; styleOverrides?: ComponentsOverrides['MuiCheckbox']; variants?: ComponentsVariants['MuiCheckbox']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiChip?: { defaultProps?: ComponentsProps['MuiChip']; styleOverrides?: ComponentsOverrides['MuiChip']; variants?: ComponentsVariants['MuiChip']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiCircularProgress?: { defaultProps?: ComponentsProps['MuiCircularProgress']; styleOverrides?: ComponentsOverrides['MuiCircularProgress']; variants?: ComponentsVariants['MuiCircularProgress']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiCollapse?: { defaultProps?: ComponentsProps['MuiCollapse']; styleOverrides?: ComponentsOverrides['MuiCollapse']; variants?: ComponentsVariants['MuiCollapse']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiContainer?: { defaultProps?: ComponentsProps['MuiContainer']; styleOverrides?: ComponentsOverrides['MuiContainer']; variants?: ComponentsVariants['MuiContainer']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiCssBaseline?: { defaultProps?: ComponentsProps['MuiCssBaseline']; styleOverrides?: ComponentsOverrides['MuiCssBaseline']; variants?: ComponentsVariants['MuiCssBaseline']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiDialog?: { defaultProps?: ComponentsProps['MuiDialog']; styleOverrides?: ComponentsOverrides['MuiDialog']; variants?: ComponentsVariants['MuiDialog']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiDialogActions?: { defaultProps?: ComponentsProps['MuiDialogActions']; styleOverrides?: ComponentsOverrides['MuiDialogActions']; variants?: ComponentsVariants['MuiDialogActions']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiDialogContent?: { defaultProps?: ComponentsProps['MuiDialogContent']; styleOverrides?: ComponentsOverrides['MuiDialogContent']; variants?: ComponentsVariants['MuiDialogContent']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiDialogContentText?: { defaultProps?: ComponentsProps['MuiDialogContentText']; styleOverrides?: ComponentsOverrides['MuiDialogContentText']; variants?: ComponentsVariants['MuiDialogContentText']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiDialogTitle?: { defaultProps?: ComponentsProps['MuiDialogTitle']; styleOverrides?: ComponentsOverrides['MuiDialogTitle']; variants?: ComponentsVariants['MuiDialogTitle']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiDivider?: { defaultProps?: ComponentsProps['MuiDivider']; styleOverrides?: ComponentsOverrides['MuiDivider']; variants?: ComponentsVariants['MuiDivider']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiDrawer?: { defaultProps?: ComponentsProps['MuiDrawer']; styleOverrides?: ComponentsOverrides['MuiDrawer']; variants?: ComponentsVariants['MuiDrawer']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiAccordion?: { defaultProps?: ComponentsProps['MuiAccordion']; styleOverrides?: ComponentsOverrides['MuiAccordion']; variants?: ComponentsVariants['MuiAccordion']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiAccordionActions?: { defaultProps?: ComponentsProps['MuiAccordionActions']; styleOverrides?: ComponentsOverrides['MuiAccordionActions']; variants?: ComponentsVariants['MuiAccordionActions']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiAccordionDetails?: { defaultProps?: ComponentsProps['MuiAccordionDetails']; styleOverrides?: ComponentsOverrides['MuiAccordionDetails']; variants?: ComponentsVariants['MuiAccordionDetails']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiAccordionSummary?: { defaultProps?: ComponentsProps['MuiAccordionSummary']; styleOverrides?: ComponentsOverrides['MuiAccordionSummary']; variants?: ComponentsVariants['MuiAccordionSummary']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiFab?: { defaultProps?: ComponentsProps['MuiFab']; styleOverrides?: ComponentsOverrides['MuiFab']; variants?: ComponentsVariants['MuiFab']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiFilledInput?: { defaultProps?: ComponentsProps['MuiFilledInput']; styleOverrides?: ComponentsOverrides['MuiFilledInput']; variants?: ComponentsVariants['MuiFilledInput']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiFormControl?: { defaultProps?: ComponentsProps['MuiFormControl']; styleOverrides?: ComponentsOverrides['MuiFormControl']; variants?: ComponentsVariants['MuiFormControl']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiFormControlLabel?: { defaultProps?: ComponentsProps['MuiFormControlLabel']; styleOverrides?: ComponentsOverrides['MuiFormControlLabel']; variants?: ComponentsVariants['MuiFormControlLabel']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiFormGroup?: { defaultProps?: ComponentsProps['MuiFormGroup']; styleOverrides?: ComponentsOverrides['MuiFormGroup']; variants?: ComponentsVariants['MuiFormGroup']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiFormHelperText?: { defaultProps?: ComponentsProps['MuiFormHelperText']; styleOverrides?: ComponentsOverrides['MuiFormHelperText']; variants?: ComponentsVariants['MuiFormHelperText']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiFormLabel?: { defaultProps?: ComponentsProps['MuiFormLabel']; styleOverrides?: ComponentsOverrides['MuiFormLabel']; variants?: ComponentsVariants['MuiFormLabel']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiGridLegacy?: { defaultProps?: ComponentsProps['MuiGridLegacy']; styleOverrides?: ComponentsOverrides['MuiGridLegacy']; variants?: ComponentsVariants['MuiGridLegacy']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiGrid?: { defaultProps?: ComponentsProps['MuiGrid']; styleOverrides?: ComponentsOverrides['MuiGrid']; variants?: ComponentsVariants['MuiGrid']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiImageList?: { defaultProps?: ComponentsProps['MuiImageList']; styleOverrides?: ComponentsOverrides['MuiImageList']; variants?: ComponentsVariants['MuiImageList']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiImageListItem?: { defaultProps?: ComponentsProps['MuiImageListItem']; styleOverrides?: ComponentsOverrides['MuiImageListItem']; variants?: ComponentsVariants['MuiImageListItem']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiImageListItemBar?: { defaultProps?: ComponentsProps['MuiImageListItemBar']; styleOverrides?: ComponentsOverrides['MuiImageListItemBar']; variants?: ComponentsVariants['MuiImageListItemBar']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiIcon?: { defaultProps?: ComponentsProps['MuiIcon']; styleOverrides?: ComponentsOverrides['MuiIcon']; variants?: ComponentsVariants['MuiIcon']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiIconButton?: { defaultProps?: ComponentsProps['MuiIconButton']; styleOverrides?: ComponentsOverrides['MuiIconButton']; variants?: ComponentsVariants['MuiIconButton']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiInput?: { defaultProps?: ComponentsProps['MuiInput']; styleOverrides?: ComponentsOverrides['MuiInput']; variants?: ComponentsVariants['MuiInput']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiInputAdornment?: { defaultProps?: ComponentsProps['MuiInputAdornment']; styleOverrides?: ComponentsOverrides['MuiInputAdornment']; variants?: ComponentsVariants['MuiInputAdornment']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiInputBase?: { defaultProps?: ComponentsProps['MuiInputBase']; styleOverrides?: ComponentsOverrides['MuiInputBase']; variants?: ComponentsVariants['MuiInputBase']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiInputLabel?: { defaultProps?: ComponentsProps['MuiInputLabel']; styleOverrides?: ComponentsOverrides['MuiInputLabel']; variants?: ComponentsVariants['MuiInputLabel']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiLinearProgress?: { defaultProps?: ComponentsProps['MuiLinearProgress']; styleOverrides?: ComponentsOverrides['MuiLinearProgress']; variants?: ComponentsVariants['MuiLinearProgress']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiLink?: { defaultProps?: ComponentsProps['MuiLink']; styleOverrides?: ComponentsOverrides['MuiLink']; variants?: ComponentsVariants['MuiLink']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiList?: { defaultProps?: ComponentsProps['MuiList']; styleOverrides?: ComponentsOverrides['MuiList']; variants?: ComponentsVariants['MuiList']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiListItem?: { defaultProps?: ComponentsProps['MuiListItem']; styleOverrides?: ComponentsOverrides['MuiListItem']; variants?: ComponentsVariants['MuiListItem']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiListItemButton?: { defaultProps?: ComponentsProps['MuiListItemButton']; styleOverrides?: ComponentsOverrides['MuiListItemButton']; variants?: ComponentsVariants['MuiListItemButton']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiListItemAvatar?: { defaultProps?: ComponentsProps['MuiListItemAvatar']; styleOverrides?: ComponentsOverrides['MuiListItemAvatar']; variants?: ComponentsVariants['MuiListItemAvatar']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiListItemIcon?: { defaultProps?: ComponentsProps['MuiListItemIcon']; styleOverrides?: ComponentsOverrides['MuiListItemIcon']; variants?: ComponentsVariants['MuiListItemIcon']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiListItemSecondaryAction?: { defaultProps?: ComponentsProps['MuiListItemSecondaryAction']; styleOverrides?: ComponentsOverrides['MuiListItemSecondaryAction']; variants?: ComponentsVariants['MuiListItemSecondaryAction']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiListItemText?: { defaultProps?: ComponentsProps['MuiListItemText']; styleOverrides?: ComponentsOverrides['MuiListItemText']; variants?: ComponentsVariants['MuiListItemText']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiListSubheader?: { defaultProps?: ComponentsProps['MuiListSubheader']; styleOverrides?: ComponentsOverrides['MuiListSubheader']; variants?: ComponentsVariants['MuiListSubheader']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiMenu?: { defaultProps?: ComponentsProps['MuiMenu']; styleOverrides?: ComponentsOverrides['MuiMenu']; variants?: ComponentsVariants['MuiMenu']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiMenuItem?: { defaultProps?: ComponentsProps['MuiMenuItem']; styleOverrides?: ComponentsOverrides['MuiMenuItem']; variants?: ComponentsVariants['MuiMenuItem']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiMenuList?: { defaultProps?: ComponentsProps['MuiMenuList']; styleOverrides?: ComponentsOverrides['MuiMenuList']; variants?: ComponentsVariants['MuiMenuList']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiMobileStepper?: { defaultProps?: ComponentsProps['MuiMobileStepper']; styleOverrides?: ComponentsOverrides['MuiMobileStepper']; variants?: ComponentsVariants['MuiMobileStepper']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiModal?: { defaultProps?: ComponentsProps['MuiModal']; styleOverrides?: ComponentsOverrides['MuiModal']; variants?: ComponentsVariants['MuiModal']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiNativeSelect?: { defaultProps?: ComponentsProps['MuiNativeSelect']; styleOverrides?: ComponentsOverrides['MuiNativeSelect']; variants?: ComponentsVariants['MuiNativeSelect']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiOutlinedInput?: { defaultProps?: ComponentsProps['MuiOutlinedInput']; styleOverrides?: ComponentsOverrides['MuiOutlinedInput']; variants?: ComponentsVariants['MuiOutlinedInput']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiPagination?: { defaultProps?: ComponentsProps['MuiPagination']; styleOverrides?: ComponentsOverrides['MuiPagination']; variants?: ComponentsVariants['MuiPagination']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiPaginationItem?: { defaultProps?: ComponentsProps['MuiPaginationItem']; styleOverrides?: ComponentsOverrides['MuiPaginationItem']; variants?: ComponentsVariants['MuiPaginationItem']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiPaper?: { defaultProps?: ComponentsProps['MuiPaper']; styleOverrides?: ComponentsOverrides['MuiPaper']; variants?: ComponentsVariants['MuiPaper']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiPopper?: { defaultProps?: ComponentsProps['MuiPopper']; styleOverrides?: ComponentsOverrides['MuiPopper']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiPopover?: { defaultProps?: ComponentsProps['MuiPopover']; styleOverrides?: ComponentsOverrides['MuiPopover']; variants?: ComponentsVariants['MuiPopover']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiRadio?: { defaultProps?: ComponentsProps['MuiRadio']; styleOverrides?: ComponentsOverrides['MuiRadio']; variants?: ComponentsVariants['MuiRadio']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiRadioGroup?: { defaultProps?: ComponentsProps['MuiRadioGroup']; styleOverrides?: ComponentsOverrides['MuiRadioGroup']; variants?: ComponentsVariants['MuiRadioGroup']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiRating?: { defaultProps?: ComponentsProps['MuiRating']; styleOverrides?: ComponentsOverrides['MuiRating']; variants?: ComponentsVariants['MuiRating']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiScopedCssBaseline?: { defaultProps?: ComponentsProps['MuiScopedCssBaseline']; styleOverrides?: ComponentsOverrides['MuiScopedCssBaseline']; variants?: ComponentsVariants['MuiScopedCssBaseline']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiSelect?: { defaultProps?: ComponentsProps['MuiSelect']; styleOverrides?: ComponentsOverrides['MuiSelect']; variants?: ComponentsVariants['MuiSelect']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiSkeleton?: { defaultProps?: ComponentsProps['MuiSkeleton']; styleOverrides?: ComponentsOverrides['MuiSkeleton']; variants?: ComponentsVariants['MuiSkeleton']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiSlider?: { defaultProps?: ComponentsProps['MuiSlider']; styleOverrides?: ComponentsOverrides['MuiSlider']; variants?: ComponentsVariants['MuiSlider']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiSnackbar?: { defaultProps?: ComponentsProps['MuiSnackbar']; styleOverrides?: ComponentsOverrides['MuiSnackbar']; variants?: ComponentsVariants['MuiSnackbar']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiSnackbarContent?: { defaultProps?: ComponentsProps['MuiSnackbarContent']; styleOverrides?: ComponentsOverrides['MuiSnackbarContent']; variants?: ComponentsVariants['MuiSnackbarContent']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiSpeedDial?: { defaultProps?: ComponentsProps['MuiSpeedDial']; styleOverrides?: ComponentsOverrides['MuiSpeedDial']; variants?: ComponentsVariants['MuiSpeedDial']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiSpeedDialAction?: { defaultProps?: ComponentsProps['MuiSpeedDialAction']; styleOverrides?: ComponentsOverrides['MuiSpeedDialAction']; variants?: ComponentsVariants['MuiSpeedDialAction']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiSpeedDialIcon?: { defaultProps?: ComponentsProps['MuiSpeedDialIcon']; styleOverrides?: ComponentsOverrides['MuiSpeedDialIcon']; variants?: ComponentsVariants['MuiSpeedDialIcon']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiStack?: { defaultProps?: ComponentsProps['MuiStack']; styleOverrides?: ComponentsOverrides['MuiStack']; variants?: ComponentsVariants['MuiStack']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiStep?: { defaultProps?: ComponentsProps['MuiStep']; styleOverrides?: ComponentsOverrides['MuiStep']; variants?: ComponentsVariants['MuiStep']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiStepButton?: { defaultProps?: ComponentsProps['MuiStepButton']; styleOverrides?: ComponentsOverrides['MuiStepButton']; variants?: ComponentsVariants['MuiStepButton']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiStepConnector?: { defaultProps?: ComponentsProps['MuiStepConnector']; styleOverrides?: ComponentsOverrides['MuiStepConnector']; variants?: ComponentsVariants['MuiStepConnector']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiStepContent?: { defaultProps?: ComponentsProps['MuiStepContent']; styleOverrides?: ComponentsOverrides['MuiStepContent']; variants?: ComponentsVariants['MuiStepContent']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiStepIcon?: { defaultProps?: ComponentsProps['MuiStepIcon']; styleOverrides?: ComponentsOverrides['MuiStepIcon']; variants?: ComponentsVariants['MuiStepIcon']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiStepLabel?: { defaultProps?: ComponentsProps['MuiStepLabel']; styleOverrides?: ComponentsOverrides['MuiStepLabel']; variants?: ComponentsVariants['MuiStepLabel']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiStepper?: { defaultProps?: ComponentsProps['MuiStepper']; styleOverrides?: ComponentsOverrides['MuiStepper']; variants?: ComponentsVariants['MuiStepper']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiSvgIcon?: { defaultProps?: ComponentsProps['MuiSvgIcon']; styleOverrides?: ComponentsOverrides['MuiSvgIcon']; variants?: ComponentsVariants['MuiSvgIcon']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiSwipeableDrawer?: { defaultProps?: ComponentsProps['MuiSwipeableDrawer']; @@ -504,101 +602,121 @@ export interface Components { defaultProps?: ComponentsProps['MuiSwitch']; styleOverrides?: ComponentsOverrides['MuiSwitch']; variants?: ComponentsVariants['MuiSwitch']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTab?: { defaultProps?: ComponentsProps['MuiTab']; styleOverrides?: ComponentsOverrides['MuiTab']; variants?: ComponentsVariants['MuiTab']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTable?: { defaultProps?: ComponentsProps['MuiTable']; styleOverrides?: ComponentsOverrides['MuiTable']; variants?: ComponentsVariants['MuiTable']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTableBody?: { defaultProps?: ComponentsProps['MuiTableBody']; styleOverrides?: ComponentsOverrides['MuiTableBody']; variants?: ComponentsVariants['MuiTableBody']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTableCell?: { defaultProps?: ComponentsProps['MuiTableCell']; styleOverrides?: ComponentsOverrides['MuiTableCell']; variants?: ComponentsVariants['MuiTableCell']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTableContainer?: { defaultProps?: ComponentsProps['MuiTableContainer']; styleOverrides?: ComponentsOverrides['MuiTableContainer']; variants?: ComponentsVariants['MuiTableContainer']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTableFooter?: { defaultProps?: ComponentsProps['MuiTableFooter']; styleOverrides?: ComponentsOverrides['MuiTableFooter']; variants?: ComponentsVariants['MuiTableFooter']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTableHead?: { defaultProps?: ComponentsProps['MuiTableHead']; styleOverrides?: ComponentsOverrides['MuiTableHead']; variants?: ComponentsVariants['MuiTableHead']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTablePagination?: { defaultProps?: ComponentsProps['MuiTablePagination']; styleOverrides?: ComponentsOverrides['MuiTablePagination']; variants?: ComponentsVariants['MuiTablePagination']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTablePaginationActions?: { defaultProps?: ComponentsProps['MuiTablePaginationActions']; styleOverrides?: ComponentsOverrides['MuiTablePaginationActions']; variants?: ComponentsVariants['MuiTablePaginationActions']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTableRow?: { defaultProps?: ComponentsProps['MuiTableRow']; styleOverrides?: ComponentsOverrides['MuiTableRow']; variants?: ComponentsVariants['MuiTableRow']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTableSortLabel?: { defaultProps?: ComponentsProps['MuiTableSortLabel']; styleOverrides?: ComponentsOverrides['MuiTableSortLabel']; variants?: ComponentsVariants['MuiTableSortLabel']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTabs?: { defaultProps?: ComponentsProps['MuiTabs']; styleOverrides?: ComponentsOverrides['MuiTabs']; variants?: ComponentsVariants['MuiTabs']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTextField?: { defaultProps?: ComponentsProps['MuiTextField']; styleOverrides?: ComponentsOverrides['MuiTextField']; variants?: ComponentsVariants['MuiTextField']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiToggleButton?: { defaultProps?: ComponentsProps['MuiToggleButton']; styleOverrides?: ComponentsOverrides['MuiToggleButton']; variants?: ComponentsVariants['MuiToggleButton']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiToggleButtonGroup?: { defaultProps?: ComponentsProps['MuiToggleButtonGroup']; styleOverrides?: ComponentsOverrides['MuiToggleButtonGroup']; variants?: ComponentsVariants['MuiToggleButtonGroup']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiToolbar?: { defaultProps?: ComponentsProps['MuiToolbar']; styleOverrides?: ComponentsOverrides['MuiToolbar']; variants?: ComponentsVariants['MuiToolbar']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTooltip?: { defaultProps?: ComponentsProps['MuiTooltip']; styleOverrides?: ComponentsOverrides['MuiTooltip']; variants?: ComponentsVariants['MuiTooltip']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTouchRipple?: { defaultProps?: ComponentsProps['MuiTouchRipple']; styleOverrides?: ComponentsOverrides['MuiTouchRipple']; variants?: ComponentsVariants['MuiTouchRipple']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiTypography?: { defaultProps?: ComponentsProps['MuiTypography']; styleOverrides?: ComponentsOverrides['MuiTypography']; variants?: ComponentsVariants['MuiTypography']; + shouldForwardProp?: (propName: PropertyKey) => boolean; }; MuiUseMediaQuery?: { defaultProps?: ComponentsProps['MuiUseMediaQuery']; diff --git a/packages/mui-system/src/ThemeProvider/ThemeProvider.js b/packages/mui-system/src/ThemeProvider/ThemeProvider.js index b64fe057ed98bf..9e722855de522a 100644 --- a/packages/mui-system/src/ThemeProvider/ThemeProvider.js +++ b/packages/mui-system/src/ThemeProvider/ThemeProvider.js @@ -11,6 +11,7 @@ import useThemeWithoutDefault from '../useThemeWithoutDefault'; import RtlProvider from '../RtlProvider'; import DefaultPropsProvider from '../DefaultPropsProvider'; import useLayerOrder from './useLayerOrder'; +import { registerThemeShouldForwardProp } from '../createStyled'; const EMPTY_THEME = {}; @@ -68,6 +69,19 @@ function ThemeProvider(props) { const layerOrder = useLayerOrder(engineTheme); + // Register theme shouldForwardProp configurations before rendering + React.useMemo(() => { + const resolvedTheme = themeId ? engineTheme[themeId] : engineTheme; + if (resolvedTheme?.components) { + Object.keys(resolvedTheme.components).forEach((componentName) => { + const componentConfig = resolvedTheme.components[componentName]; + if (componentConfig?.shouldForwardProp) { + registerThemeShouldForwardProp(componentName, componentConfig.shouldForwardProp); + } + }); + } + }, [engineTheme, themeId]); + return ( diff --git a/packages/mui-system/src/createStyled/createStyled.js b/packages/mui-system/src/createStyled/createStyled.js index 04d3e63ac8d3e5..007fa704aa2113 100644 --- a/packages/mui-system/src/createStyled/createStyled.js +++ b/packages/mui-system/src/createStyled/createStyled.js @@ -15,6 +15,39 @@ import preprocessStyles from '../preprocessStyles'; export const systemDefaultTheme = createTheme(); +// Global registry to track theme shouldForwardProp configurations +// Maps componentName -> Set of registered shouldForwardProp functions +const themeShouldForwardPropRegistry = new Map(); + +/** + * Register a theme-level shouldForwardProp function for a component. + * This is called when a theme with component configuration is used. + * @param {string} componentName - The name of the component (e.g., 'MuiButton') + * @param {function} shouldForwardPropFn - The shouldForwardProp function from theme + */ +export function registerThemeShouldForwardProp(componentName, shouldForwardPropFn) { + if (!themeShouldForwardPropRegistry.has(componentName)) { + themeShouldForwardPropRegistry.set(componentName, new Set()); + } + themeShouldForwardPropRegistry.get(componentName).add(shouldForwardPropFn); +} + +/** + * Get all registered shouldForwardProp functions for a component + * @param {string} componentName - The name of the component + * @returns {Set} Set of shouldForwardProp functions + */ +export function getThemeShouldForwardProps(componentName) { + return themeShouldForwardPropRegistry.get(componentName); +} + +/** + * Clear all registered shouldForwardProp functions (mainly for testing) + */ +export function clearThemeShouldForwardPropRegistry() { + themeShouldForwardPropRegistry.clear(); +} + // Update /system/styled/#api in case if this changes export function shouldForwardProp(prop) { return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as'; @@ -174,6 +207,29 @@ export default function createStyled(input = {}) { shouldForwardPropOption = undefined; } + // Wrap shouldForwardProp to also check theme configuration if component name is provided + if (componentName && shouldForwardPropOption) { + const baseShouldForwardProp = shouldForwardPropOption; + const componentNameForClosure = componentName; // Capture for closure + shouldForwardPropOption = (prop) => { + // First check the base shouldForwardProp + if (!baseShouldForwardProp(prop)) { + return false; + } + // Check if any theme has a shouldForwardProp configuration for this component + const themeShouldForwardProps = getThemeShouldForwardProps(componentNameForClosure); + if (themeShouldForwardProps && themeShouldForwardProps.size > 0) { + // All registered theme shouldForwardProp functions must allow the prop + for (const themeShouldForwardProp of themeShouldForwardProps) { + if (!themeShouldForwardProp(prop)) { + return false; + } + } + } + return true; + }; + } + const defaultStyledResolver = styledEngineStyled(tag, { shouldForwardProp: shouldForwardPropOption, label: generateStyledLabel(componentName, componentSlot), diff --git a/packages/mui-system/src/styled/styled.test.js b/packages/mui-system/src/styled/styled.test.js index a680d8668a5996..d57c3a5d65b28b 100644 --- a/packages/mui-system/src/styled/styled.test.js +++ b/packages/mui-system/src/styled/styled.test.js @@ -690,5 +690,101 @@ describe('styled', () => { expect(containsValidClass).to.equal(true); }); + + it('should respect theme-level shouldForwardProp configuration', () => { + // Import the registry functions for debugging + const { registerThemeShouldForwardProp, getThemeShouldForwardProps } = require('../createStyled'); + + const TestComponent = styled('div', { + shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'sx', + name: 'MuiTestThemeForward', + slot: 'Root', + })` + width: 200px; + height: 300px; + `; + + const customTheme = createTheme({ + components: { + MuiTestThemeForward: { + shouldForwardProp: (prop) => prop !== 'customProp', + variants: [ + { + props: { customProp: 'value1' }, + style: { + color: 'red', + }, + }, + ], + }, + }, + }); + + // Manually register to test (this simulates what ThemeProvider should do) + registerThemeShouldForwardProp('MuiTestThemeForward', (prop) => prop !== 'customProp'); + + // Verify registration + const registered = getThemeShouldForwardProps('MuiTestThemeForward'); + console.log('Registry check:', registered ? `Has ${registered.size} entries` : 'Empty'); + + const { container } = render( + + Test + , + ); + + // Check that customProp is not forwarded to the DOM + expect(container.firstChild).not.to.have.attribute('customProp'); + // Also check lowercase version + expect(container.firstChild).not.to.have.attribute('customprop'); + // Check that the variant styling is applied + expect(container.firstChild).toHaveComputedStyle({ + color: 'rgb(255, 0, 0)', // red + }); + }); + + it('should work with theme-level shouldForwardProp and multiple custom props', () => { + const TestComponent = styled('div', { + shouldForwardProp: (prop) => prop !== 'sx', + name: 'MuiTestThemeMultiple', + slot: 'Root', + })` + width: 100px; + `; + + const customTheme = createTheme({ + components: { + MuiTestThemeMultiple: { + shouldForwardProp: (prop) => prop !== 'customProp1' && prop !== 'customProp2', + variants: [ + { + props: { customProp1: 'a', customProp2: 'b' }, + style: { + height: '200px', + }, + }, + ], + }, + }, + }); + + const { container } = render( + + + Test + + , + ); + + // Check that custom props are not forwarded to the DOM + expect(container.firstChild).not.to.have.attribute('customProp1'); + expect(container.firstChild).not.to.have.attribute('customProp2'); + // Check that other props still work + expect(container.firstChild).to.have.attribute('data-testid', 'test'); + // Check that the variant styling is applied + expect(container.firstChild).toHaveComputedStyle({ + height: '200px', + }); + }); }); });