Currently, I am implementing Material UI 5 within a React project using the following code snippet:
<Stack>
<Stack
flexDirection="row"
justifyContent="center"
padding={4}
spacing={{ xs: 4 }}
>
<Box bgcolor={"red"} width={"200px"} height={"200px"}/>
<Box bgcolor={"green"} width={"200px"} height={"200px"/>
</Stack>
</Stack>
The issue with this code is that instead of having the specified margin between the boxes, there is an extra margin added to the top of the second box. It seems like the 'gap' property works fine, but the 'spacing' property does not behave as expected.
Expected Result: The correct way of applying spacing Actual Outcome: Incorrect margin added to the second box
I aimed to achieve equal spacing on the horizontal axis between the items.