From 50cb0c69a2e8fef1ff6c093764d115e0dd5011da Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 21 Feb 2024 09:30:20 +0100 Subject: [PATCH 1/3] [system] Merge props and ownerState in the variants props callback --- packages/mui-system/src/createStyled.js | 8 +++-- .../mui-system/createStyled.test.js | 32 +++++++++++++++++++ 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js index da61ca564547da..5df34d1b5af6fa 100644 --- a/packages/mui-system/src/createStyled.js +++ b/packages/mui-system/src/createStyled.js @@ -48,7 +48,9 @@ function defaultOverridesResolver(slot) { function processStyleArg(callableStyle, { ownerState, ...props }) { const resolvedStylesArg = - typeof callableStyle === 'function' ? callableStyle({ ownerState, ...props }) : callableStyle; + typeof callableStyle === 'function' + ? callableStyle({ ownerState, ...props, ...ownerState }) + : callableStyle; if (Array.isArray(resolvedStylesArg)) { return resolvedStylesArg.flatMap((resolvedStyle) => @@ -66,7 +68,7 @@ function processStyleArg(callableStyle, { ownerState, ...props }) { variants.forEach((variant) => { let isMatch = true; if (typeof variant.props === 'function') { - isMatch = variant.props({ ownerState, ...props }); + isMatch = variant.props({ ownerState, ...props, ...ownerState }); } else { Object.keys(variant.props).forEach((key) => { if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) { @@ -80,7 +82,7 @@ function processStyleArg(callableStyle, { ownerState, ...props }) { } result.push( typeof variant.style === 'function' - ? variant.style({ ownerState, ...props }) + ? variant.style({ ownerState, ...props, ...ownerState }) : variant.style, ); } diff --git a/test/integration/mui-system/createStyled.test.js b/test/integration/mui-system/createStyled.test.js index b9c3ead976653d..5301c6a56f8cc0 100644 --- a/test/integration/mui-system/createStyled.test.js +++ b/test/integration/mui-system/createStyled.test.js @@ -513,6 +513,38 @@ describe('createStyled', () => { expect(getByTestId('red')).toHaveComputedStyle({ backgroundColor: 'rgb(255, 0, 0)' }); }); + it('should merge props and ownerState in props callback', () => { + const styled = createStyled({ + defaultTheme: { + colors: { blue: 'rgb(0, 0, 255)', red: 'rgb(255, 0, 0)', green: 'rgb(0, 255, 0)' }, + }, + }); + + const Test = styled('div')(({ theme, color }) => ({ + variants: [ + { + props: (props) => props.color === 'green' || props.color === 'red', + style: { + backgroundColor: theme.colors[color], + }, + }, + ], + })); + + const { getByTestId } = render( + + + Red + + + Green + + , + ); + expect(getByTestId('green')).toHaveComputedStyle({ backgroundColor: 'rgb(0, 255, 0)' }); + expect(getByTestId('red')).toHaveComputedStyle({ backgroundColor: 'rgb(255, 0, 0)' }); + }); + it('should accept variants in arrays', () => { const styled = createStyled({ defaultTheme: { colors: { blue: 'rgb(0, 0, 255)' } } }); From 6a13138abebe5ac340d086929cca98351f281d35 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 21 Feb 2024 11:07:59 +0100 Subject: [PATCH 2/3] fix wrong spread --- packages/mui-system/src/createStyled.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js index 5df34d1b5af6fa..4c4c6ffc34d325 100644 --- a/packages/mui-system/src/createStyled.js +++ b/packages/mui-system/src/createStyled.js @@ -49,7 +49,7 @@ function defaultOverridesResolver(slot) { function processStyleArg(callableStyle, { ownerState, ...props }) { const resolvedStylesArg = typeof callableStyle === 'function' - ? callableStyle({ ownerState, ...props, ...ownerState }) + ? callableStyle({ ownerState, ...props }) : callableStyle; if (Array.isArray(resolvedStylesArg)) { From 2adb748397ee0f15ab5146002d1acbeb6163e939 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 21 Feb 2024 11:14:10 +0100 Subject: [PATCH 3/3] prettier --- packages/mui-system/src/createStyled.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js index 4c4c6ffc34d325..da61ca564547da 100644 --- a/packages/mui-system/src/createStyled.js +++ b/packages/mui-system/src/createStyled.js @@ -48,9 +48,7 @@ function defaultOverridesResolver(slot) { function processStyleArg(callableStyle, { ownerState, ...props }) { const resolvedStylesArg = - typeof callableStyle === 'function' - ? callableStyle({ ownerState, ...props }) - : callableStyle; + typeof callableStyle === 'function' ? callableStyle({ ownerState, ...props }) : callableStyle; if (Array.isArray(resolvedStylesArg)) { return resolvedStylesArg.flatMap((resolvedStyle) => @@ -68,7 +66,7 @@ function processStyleArg(callableStyle, { ownerState, ...props }) { variants.forEach((variant) => { let isMatch = true; if (typeof variant.props === 'function') { - isMatch = variant.props({ ownerState, ...props, ...ownerState }); + isMatch = variant.props({ ownerState, ...props }); } else { Object.keys(variant.props).forEach((key) => { if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) { @@ -82,7 +80,7 @@ function processStyleArg(callableStyle, { ownerState, ...props }) { } result.push( typeof variant.style === 'function' - ? variant.style({ ownerState, ...props, ...ownerState }) + ? variant.style({ ownerState, ...props }) : variant.style, ); }