diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index cf52016d61dfa0..d66f0df2e1e6de 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { deepmerge } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import { alpha } from '../styles/colorManipulator'; import ButtonBase from '../ButtonBase'; @@ -83,7 +83,7 @@ const commonIconStyles = (styleProps) => ({ const ButtonRoot = experimentalStyled( ButtonBase, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiButton', slot: 'Root', diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 05c46bb0db3423..b0f365b168f06c 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -9,7 +9,7 @@ import { alpha } from '../styles/colorManipulator'; import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox'; import capitalize from '../utils/capitalize'; import useThemeProps from '../styles/useThemeProps'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses'; const overridesResolver = (props, styles) => { @@ -41,7 +41,7 @@ const useUtilityClasses = (styleProps) => { const CheckboxRoot = experimentalStyled( SwitchBase, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiCheckbox', slot: 'Root', diff --git a/packages/material-ui/src/DialogContentText/DialogContentText.js b/packages/material-ui/src/DialogContentText/DialogContentText.js index 94e92e1e6b2ee0..be126f8c370c11 100644 --- a/packages/material-ui/src/DialogContentText/DialogContentText.js +++ b/packages/material-ui/src/DialogContentText/DialogContentText.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { deepmerge } from '@material-ui/utils'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import Typography from '../Typography'; import { getDialogContentTextUtilityClass } from './dialogContentTextClasses'; @@ -28,7 +28,7 @@ const useUtilityClasses = (styleProps) => { const DialogContentTextRoot = experimentalStyled( Typography, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiDialogContentText', slot: 'Root', diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js index 21a337ff49148b..0683de27407f86 100644 --- a/packages/material-ui/src/Drawer/Drawer.js +++ b/packages/material-ui/src/Drawer/Drawer.js @@ -10,7 +10,7 @@ import capitalize from '../utils/capitalize'; import { duration } from '../styles/transitions'; import useTheme from '../styles/useTheme'; import useThemeProps from '../styles/useThemeProps'; -import experimentalStyled from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import drawerClasses, { getDrawerUtilityClass } from './drawerClasses'; const overridesResolver = (props, styles) => { @@ -61,7 +61,9 @@ const DrawerRoot = experimentalStyled( const DrawerDockedRoot = experimentalStyled( 'div', - {}, + { + shouldForwardProp: rootShouldForwardProp, + }, { name: 'MuiDrawer', slot: 'Docked', diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index 32bbd01551e59f..8d110186de6d3a 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -3,7 +3,7 @@ import { deepmerge, refType } from '@material-ui/utils'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import InputBase from '../InputBase'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses'; import { @@ -32,7 +32,7 @@ const useUtilityClasses = (styleProps) => { const FilledInputRoot = experimentalStyled( InputBaseRoot, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiFilledInput', slot: 'Root', overridesResolver }, )(({ theme, styleProps }) => { const light = theme.palette.mode === 'light'; diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index 26969cba2f8148..493410a9ebf1dd 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { deepmerge, refType } from '@material-ui/utils'; import InputBase from '../InputBase'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import inputClasses, { getInputUtilityClass } from './inputClasses'; import { @@ -36,7 +36,7 @@ const useUtilityClasses = (styleProps) => { const InputRoot = experimentalStyled( InputBaseRoot, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiInput', slot: 'Root', overridesResolver }, )(({ theme, styleProps }) => { const light = theme.palette.mode === 'light'; diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js index cc234b6fabce41..937681914fe944 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.js +++ b/packages/material-ui/src/InputLabel/InputLabel.js @@ -6,7 +6,7 @@ import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; import FormLabel, { formLabelClasses } from '../FormLabel'; import useThemeProps from '../styles/useThemeProps'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import { getInputLabelUtilityClasses } from './inputLabelClasses'; const overridesResolver = (props, styles) => { @@ -47,7 +47,7 @@ const useUtilityClasses = (styleProps) => { const InputLabelRoot = experimentalStyled( FormLabel, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiInputLabel', slot: 'Root', overridesResolver }, )(({ theme, styleProps }) => ({ display: 'block', diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index 578d3889a4e2e2..ad263652a59bd1 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -7,7 +7,7 @@ import { deepmerge, HTMLElementType } from '@material-ui/utils'; import MenuList from '../MenuList'; import Paper from '../Paper'; import Popover from '../Popover'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import menuClasses, { getMenuUtilityClass } from './menuClasses'; @@ -45,7 +45,7 @@ const useUtilityClasses = (styleProps) => { const MenuRoot = experimentalStyled( Popover, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiMenu', slot: 'Root', diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js index b1eec46ba0920d..c666a2df99fdb8 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.js +++ b/packages/material-ui/src/MenuItem/MenuItem.js @@ -3,7 +3,7 @@ import { deepmerge } from '@material-ui/utils'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import useThemeProps from '../styles/useThemeProps'; import { getMenuItemUtilityClass } from './menuItemClasses'; import ListItem from '../ListItem'; @@ -27,7 +27,7 @@ const useUtilityClasses = (styleProps) => { const MenuItemRoot = experimentalStyled( ListItemRoot, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiMenuItem', slot: 'Root', diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index e24e327abe2ac4..2ed8239cd6edcf 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { deepmerge, refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import NotchedOutline from './NotchedOutline'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses'; import InputBase, { overridesResolver as inputBaseOverridesResolver, @@ -37,7 +37,7 @@ const useUtilityClasses = (styleProps) => { const OutlinedInputRoot = experimentalStyled( InputBaseRoot, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiOutlinedInput', slot: 'Root', overridesResolver }, )(({ theme, styleProps }) => { const borderColor = diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index 708b08f6cb7552..29c6b827fc8736 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -10,7 +10,7 @@ import capitalize from '../utils/capitalize'; import createChainedFunction from '../utils/createChainedFunction'; import useRadioGroup from '../RadioGroup/useRadioGroup'; import radioClasses, { getRadioUtilityClass } from './radioClasses'; -import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled'; +import experimentalStyled, { rootShouldForwardProp } from '../styles/experimentalStyled'; const overridesResolver = (props, styles) => { const { styleProps } = props; @@ -33,7 +33,7 @@ const useUtilityClasses = (styleProps) => { const RadioRoot = experimentalStyled( SwitchBase, - { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' }, + { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes' }, { name: 'MuiRadio', slot: 'Root', diff --git a/packages/material-ui/src/styles/experimentalStyled.js b/packages/material-ui/src/styles/experimentalStyled.js index 3a4bb9897d1c44..8566dd64cb81be 100644 --- a/packages/material-ui/src/styles/experimentalStyled.js +++ b/packages/material-ui/src/styles/experimentalStyled.js @@ -52,7 +52,7 @@ const variantsResolver = (props, styles, theme, name) => { return variantsStyles; }; -export const shouldForwardProp = (prop) => +export const rootShouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && @@ -90,7 +90,7 @@ const experimentalStyled = (tag, options, muiOptions = {}) => { const defaultStyledResolver = styled(tag, { ...(!componentSlot || componentSlot === 'Root' - ? { shouldForwardProp } + ? { shouldForwardProp: rootShouldForwardProp } : { shouldForwardProp: slotShouldForwardProp }), label: className || componentName || '', ...options,