[system] Fix unnecessary styles created from sx

[siriwatknp]

Issue

https://codesandbox.io/s/cool-mopsa-tvv9gp?file=/demo.tsx

When styled-components are recreated more than once, the styles from sx are always generated everytime:

const Child = styled("div")({});

const Parent = styled(Child)({});

<Parent sx={{ color: 'orange' }}>Color</Parent>

How does it happen?

Every time, the component is wrapped with styled we attach a function that watches the sx prop and transforms it into styles. Meaning, that if the component is wrapped 3 times, 3 similar functions are created and are called when the component is rendered.

Why we haven't noticed it?

This is because we don't have multiple compositions using styled in Material UI components. However, Joy is using this pattern to reduce complexity and reuses styles, so that's when I noticed the issue.

The fix

Using a similar technique as emotion, the lastest styled component will call the function to skip the sx function in the nested styled component. (This introduces another bug)

The actual fix would be to read the styles attached by emotion/style-components and filter the sx from the child component so that the sx apply only on the latest composite component.

This is a minimal implementation that demonstrate the fix with style-components. https://codesandbox.io/s/styled-components-demo-forked-nzchg0?file=/src/App.js

Tests added.

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against c2e1071

[michaldudak]

There was a similar issue reported by a community member recently: #33443. I suppose this PR fixes it as well, doesn't it?

[siriwatknp]

There was a similar issue reported by a community member recently: #33443. I suppose this PR fixes it as well, doesn't it?

Nope, it is a different issue but I propose the fix in #33443 (comment). Please take a look.

[mnajdova]

We try to put all emotion/styled-component related logic in the styled-engine packages. Is it possible to move this there, or maybe just export the path to the style rules from the adapter packages? Something like:

// this will be set to `__emotion_styles` & `componentStyle.rules` respectivly
import { styleRulesPath } from '@mui/styled-engine';

const styleRules = getValue(tag, styleRulesPath);
if(styleRules) {
// other logic
}

This way we won't have anything specific in the system related to emotion/styled-components.

[siriwatknp]

sounds good.

[siriwatknp]

Done!

[mnajdova]

What would happen if the sx prop is provided as an array of styles?

[siriwatknp]

What would happen if the sx prop is provided as an array of styles?

That's fine because the sx prop is wrapped in a function. The logic just filters out the systemSx of the composite component, it does not involve with the value of the sx prop.

// It is this function that will be filtered out, the `sx` prop is not related to the logic (not calculated because the filter logic is done before the component render
const systemSx = (props) => {
  const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
  return styleFunctionSx({ ...props, theme }); // `sx` is in the props
};

[propG]

I'm sorry I'm New at this, trying to learn....

…

On Thu, Aug 4, 2022, 10:09 PM Siriwat K ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In packages/mui-system/src/createStyled.js <#33752 (comment)>: > return (tag, inputOptions = {}) => { + /** Done! — Reply to this email directly, view it on GitHub <#33752 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2KTIJ6Z2MHHVK6TZNPGTMLVXSAW3ANCNFSM55KAZMMQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[mnajdova]

Can we add some prefix (internal_ or unstable_)?

[siriwatknp]

good point.

[mnajdova]

Looks good, please resolve just the one comment that I added.