[ButtonBase] Check if margin: 0 can be removed

[goffioul]

I have a CSS injection problem that is illustrated by this sandbox:
https://codesandbox.io/s/material-ui-v5-css-injection-order-9y2oe

In essence, I define a component as follow:

const styles = {
    display: "flex",
    flexWrap: "wrap",
    margin: -0.5,
    "& > *": {
        margin: 0.5
    }
};

export function ButtonBox({ sx, ...props }) {
    return <Box sx={{ ...sx, ...styles }} {...props} />;
}

I then use the component to host a series of buttons:

<ButtonBox>
    <Button variant="contained">Button 1</Button>
    <Button variant="contained">Button 2</Button>
</ButtonBox>

The problem is that Button component sets margin to 0. This rule has the same priority as the one (& > *) used in the container. So the end result will depends on the order of the injection of CSS. And it seems to be non-deterministic. While building the sandbox, the order what was I wanted, and I couldn't reproduce the issue I was having in my larger app. So I started to add more elements from my app, namely a custom ThemeProvider and CacheProvider. Then the order changed, showing the issue. But after reverting all those changes and getting back to the simpler example, the order didn't change back. I have no idea what made the injection order to change and/or how to control it.

[mnajdova]

Generally, none of the components should set margin as a rule of thumb. We plan to revisit this issue, which is specific to the Button component. My suggestion would be instead of using & > *, to use & > :not(style), it will allow you to bump specificity. We use it in the Stack component. Here is a working sandbox: https://codesandbox.io/s/material-ui-v5-css-injection-order-forked-ie3oo?file=/ButtonBox.js

[goffioul]

Thanks for the trick (I already used a workaround in my code, using !important). The question was more whether it's possible to have some sort of control on the injection order, or one must use CSS specificity instead.

[mnajdova]

The question was more whether it's possible to have some sort of control on the injection order, or one must use CSS specificity instead.

Emotion is injecting the CSS based on the rendering order, so you cannot really change this. In cases like this, increasing specificity is required.

[siriwatknp]

I believe that the intention of the author is to implement gap-like. flexbox gap is now fully supported and should be used instead of the margin hack.

I am closing this issue.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@goffioul How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.