-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Stack] Fix CSS selector #37525
[Stack] Fix CSS selector #37525
Conversation
Netlify deploy previewhttps://deploy-preview-37525--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
'& > :not(style) ~ :not(style)': { | ||
// The useFlexGap={false} implement relies on each child to give up control of the margin. | ||
// We need to reset the margin to avoid double spacing. | ||
'& > :not(style):not(style)': { | ||
margin: 0, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could consider the path to not reset the margin in the first place. It would get closer to useFlexGap={true}
's behavior. I have made this proposal in #28035 (comment).
margin: 0, |
The problem is that it's a bit more breaking change than the current changes in this PR, so maybe for v6.
// The useFlexGap={false} implement relies on each child to give up control of the margin. | ||
// We need to reset the margin to avoid double spacing. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// The useFlexGap={false} implement relies on each child to give up control of the margin. | |
// We need to reset the margin to avoid double spacing. | |
// The useFlexGap={false} implementation relies on each child to give up control of the margin. | |
// We need to reset the margin to avoid double spacing. | |
// TODO: remove this reset https://github.com/mui/material-ui/issues/28035#issuecomment-1615855826 |
@DiegoAndai Do you want to own the merge of this PR? I see you are a maintainer of the Stack component with Jun https://www.notion.so/mui-org/Components-Layout-72421c160bcd4089a8ef8a4fd804c950. |
closes: #37381 by forcing the
margin: 0
reset on all the children of the Stack component. Before this change, the reset is done on almost all the children but not the first child.https://deploy-preview-37525--material-ui.netlify.app/system/react-stack/
before: https://codesandbox.io/s/sad-aj-45wiii?file=/src/App.js
after: https://codesandbox.io/s/sharp-sun-7pgg8k?file=/package.json