[system] Add array support for sx prop

[siriwatknp]

close #29274

I noticed one thing from #29198. Shouldn't the sx function callback give the whole props (theme is inside the props)?

current

<Button sx={theme => theme.typography.body} />

What I think

<Button sx={({ theme, ...otherProps }) => theme.typography.body} />

• This is the same experience as writing styled
• I guess there will be cases that other props are needed in sx

Decide to go with the current approach and see community feedback.

@mnajdova @hbjORbj

---

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

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against c9ca06f

[mnajdova]

<Button sx={({ theme, ...otherProps }) => theme.typography.body} />

This would be a breaking change, so we can't do it now. But we can wait to see if people will actually need it. I would say it's more common to add conditional styles based on where the component is being used, which means in the context of the parent component and developers anyway have access to those props :)

[mnajdova]

Shouldn't we do deep merge?

[siriwatknp]

I don't think so. That will cause a lot more calculation. I think it is better to document that sx has more priority.

<Box p={2} sx={{ p: 3 }} /> // p: 3 wins

Also, the previous implementation used { ...systemProps, ...result } and there is no issue with it yet. So I don't think anyone will use the same property in both props & sx.

[mnajdova]

Alright, let's leave it as is then :)

[siriwatknp]

will run yarn proptypes && yarn docs:typescript:formatted && yarn docs:api once code review is done.

[mnajdova]

Looks good

[hbjORbj]

:)