[Stack] Fix spacing when there are <style> children

[cmd-johnson]

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

Fix #34965.

And looking at the CSS used by the <Stack> component, it looks like the issue is the way the children that the margin is applied to are selected: & > :not(style) + :not(style). This excludes any children that have a <style> element in front of them.

By swapping the + (adjacent sibling) combinator for the ~ (general sibling) combinator, this issue should be fixed without affecting anything else.

[mui-bot]

Netlify deploy preview

https://deploy-preview-34966--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 95c3b48

[oliviertassinari]

I think that it would be great to fix the other instance in the codebase where we make this mistake. My bad, I added the logic in the case that developers would not follow the correct Emotion SSR setup, but I didn't test that it would actually work. Soon (browser support), we will be able to use flex gap instead of this trick.

[cmd-johnson]

Those are the only occurrences outside of docs/ where I could find :not(style). Of those matches in docs/, most just use & > :not(style) and shouldn't be affected by this.
Other than that, there's DividerText, Links, UnderlineLinks and ToggleButtonSizes, which use either a Box with a custom sx style or a styled('div'). If you want I could replace all those usages with Stack instead and it should all work just the same.

Also, when you talk about "not following the correct Emotion SSR setup", what do you mean exactly?
I'm using React 18's renderToPipeableStream and Remix, with basically the same SSR rendering logic as this: https://github.com/jacob-ebey/remix-chakra/blob/main/app/entry.server.tsx