[material][styled-engine-sc] Fix ownerstate being propagated to DOM n…

…ode (#39586)
mui · Oct 27, 2023 · 64c48b5 · 64c48b5
1 parent 1bdfb14
commit 64c48b5
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 63 deletions.
diff --git a/packages/mui-material/src/OutlinedInput/NotchedOutline.js b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import styled from '../styles/styled';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 
-const NotchedOutlineRoot = styled('fieldset')({
+const NotchedOutlineRoot = styled('fieldset', { shouldForwardProp: rootShouldForwardProp })({
   textAlign: 'left',
   position: 'absolute',
   bottom: 0,
@@ -20,47 +20,49 @@ const NotchedOutlineRoot = styled('fieldset')({
   minWidth: '0%',
 });
 
-const NotchedOutlineLegend = styled('legend')(({ ownerState, theme }) => ({
-  float: 'unset', // Fix conflict with bootstrap
-  width: 'auto', // Fix conflict with bootstrap
-  overflow: 'hidden', // Fix Horizontal scroll when label too long
-  ...(!ownerState.withLabel && {
-    padding: 0,
-    lineHeight: '11px', // sync with `height` in `legend` styles
-    transition: theme.transitions.create('width', {
-      duration: 150,
-      easing: theme.transitions.easing.easeOut,
-    }),
-  }),
-  ...(ownerState.withLabel && {
-    display: 'block', // Fix conflict with normalize.css and sanitize.css
-    padding: 0,
-    height: 11, // sync with `lineHeight` in `legend` styles
-    fontSize: '0.75em',
-    visibility: 'hidden',
-    maxWidth: 0.01,
-    transition: theme.transitions.create('max-width', {
-      duration: 50,
-      easing: theme.transitions.easing.easeOut,
+const NotchedOutlineLegend = styled('legend', { shouldForwardProp: rootShouldForwardProp })(
+  ({ ownerState, theme }) => ({
+    float: 'unset', // Fix conflict with bootstrap
+    width: 'auto', // Fix conflict with bootstrap
+    overflow: 'hidden', // Fix Horizontal scroll when label too long
+    ...(!ownerState.withLabel && {
+      padding: 0,
+      lineHeight: '11px', // sync with `height` in `legend` styles
+      transition: theme.transitions.create('width', {
+        duration: 150,
+        easing: theme.transitions.easing.easeOut,
+      }),
     }),
-    whiteSpace: 'nowrap',
-    '& > span': {
-      paddingLeft: 5,
-      paddingRight: 5,
-      display: 'inline-block',
-      opacity: 0,
-      visibility: 'visible',
-    },
-    ...(ownerState.notched && {
-      maxWidth: '100%',
+    ...(ownerState.withLabel && {
+      display: 'block', // Fix conflict with normalize.css and sanitize.css
+      padding: 0,
+      height: 11, // sync with `lineHeight` in `legend` styles
+      fontSize: '0.75em',
+      visibility: 'hidden',
+      maxWidth: 0.01,
       transition: theme.transitions.create('max-width', {
-        duration: 100,
+        duration: 50,
         easing: theme.transitions.easing.easeOut,
-        delay: 50,
+      }),
+      whiteSpace: 'nowrap',
+      '& > span': {
+        paddingLeft: 5,
+        paddingRight: 5,
+        display: 'inline-block',
+        opacity: 0,
+        visibility: 'visible',
+      },
+      ...(ownerState.notched && {
+        maxWidth: '100%',
+        transition: theme.transitions.create('max-width', {
+          duration: 100,
+          easing: theme.transitions.easing.easeOut,
+          delay: 50,
+        }),
       }),
     }),
   }),
-}));
+);
 
 /**
  * @ignore - internal component.

diff --git a/packages/mui-material/src/Radio/RadioButtonIcon.js b/packages/mui-material/src/Radio/RadioButtonIcon.js
@@ -3,9 +3,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
-import styled from '../styles/styled';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 
-const RadioButtonIconRoot = styled('span')({
+const RadioButtonIconRoot = styled('span', { shouldForwardProp: rootShouldForwardProp })({
   position: 'relative',
   display: 'flex',
 });

diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeArea.js b/packages/mui-material/src/SwipeableDrawer/SwipeArea.js
@@ -2,33 +2,35 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import styled from '../styles/styled';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 
-const SwipeAreaRoot = styled('div')(({ theme, ownerState }) => ({
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  zIndex: theme.zIndex.drawer - 1,
-  ...(ownerState.anchor === 'left' && {
-    right: 'auto',
-  }),
-  ...(ownerState.anchor === 'right' && {
-    left: 'auto',
-    right: 0,
-  }),
-  ...(ownerState.anchor === 'top' && {
-    bottom: 'auto',
-    right: 0,
-  }),
-  ...(ownerState.anchor === 'bottom' && {
-    top: 'auto',
+const SwipeAreaRoot = styled('div', { shouldForwardProp: rootShouldForwardProp })(
+  ({ theme, ownerState }) => ({
+    position: 'fixed',
+    top: 0,
+    left: 0,
     bottom: 0,
-    right: 0,
+    zIndex: theme.zIndex.drawer - 1,
+    ...(ownerState.anchor === 'left' && {
+      right: 'auto',
+    }),
+    ...(ownerState.anchor === 'right' && {
+      left: 'auto',
+      right: 0,
+    }),
+    ...(ownerState.anchor === 'top' && {
+      bottom: 'auto',
+      right: 0,
+    }),
+    ...(ownerState.anchor === 'bottom' && {
+      top: 'auto',
+      bottom: 0,
+      right: 0,
+    }),
   }),
-}));
+);
 
 /**
  * @ignore - internal component.

diff --git a/packages/mui-material/src/internal/SwitchBase.js b/packages/mui-material/src/internal/SwitchBase.js
@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 import useControlled from '../utils/useControlled';
 import useFormControl from '../FormControl/useFormControl';
 import ButtonBase from '../ButtonBase';
@@ -33,7 +33,7 @@ const SwitchBaseRoot = styled(ButtonBase)(({ ownerState }) => ({
   }),
 }));
 
-const SwitchBaseInput = styled('input')({
+const SwitchBaseInput = styled('input', { shouldForwardProp: rootShouldForwardProp })({
   cursor: 'inherit',
   position: 'absolute',
   opacity: 0,