Material UI Spacing wrong gap placement

Question

I am using Material UI 5 in a React project with the following code:

    <Stack>
      <Stack
        flexDirection="row"
        justifyContent="center"
        padding={4}
        spacing={{ xs: 4 }}
      >
        {/* <MemoizedPlace {...place} key={place._id} /> */}
        <Box bgcolor={"red"} width={"200px"} height={"200px"}>
        <Box bgcolor={"green"} width={"200px"} height={"200px"}>
        {/* 
              <SideComments placeId={place._id} />
              <SideComments placeId={place._id} /> */}

        {/* <SideComments placeId={place._id} /> */}
      </Stack>
    </Stack>

This code gives me the boxes as in the photo with a margin of what I have specified on the top of the second box, instead of this margin between the boxes. It seems to work with gap, but why spacing does not work like it should

Expected: the right way of spacing Actual: wrong top margin added to the second box

I was trying to get this spacing on the horizontal axis between the items

Answer 1

You Just have to change the property flexDirection="row" to direction="row":

    <Stack>
      <Stack
        direction="row"
        justifyContent="center"
        padding={4}
        spacing={{ xs: 4 }}
      >
        {/* <MemoizedPlace {...place} key={place._id} /> */}
        <Box bgcolor={"red"} width={"200px"} height={"200px"}>
        <Box bgcolor={"green"} width={"200px"} height={"200px"}>
        {/* 
              <SideComments placeId={place._id} />
              <SideComments placeId={place._id} /> */}

        {/* <SideComments placeId={place._id} /> */}
      </Stack>
    </Stack>