[Stack] Spacing overrides margin values given directly to children

When using a Stack, it sets the mt, mr, mb or ml props of its children to value determined by spacing. Unfortunately, they cannot be overrided manually:

function Component() {
  return (
    <Stack spacing={2}>
      <Box>foo</Box>
      <Box mr={100 /* Gets overrided */}>bar</Box>
      <Box>baz</Box>
    </Stack>
  );
}

[jescowuester]

To simplify the stack component we could also use sth like this instead of cloneElement:

.stack > * + * {
  margin-top: 1.5rem;
}

That way it can be easily overwritten and it would make the component more intuitive as well IMO.

Here’s a demonstration

[segunadebayo]

Closing this in favor of the suggested alternative.