材质 UI 间距错误的间隙放置

Question

我在 React 项目中使用 Material UI 5，代码如下：

    <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>

此代码为我提供了照片中的框，其边距是我在第二个框顶部指定的边距，而不是框之间的边距。它似乎可以与间隙配合使用，但为什么间距不起作用

预期： 实际：

我试图在水平轴上获得项目之间的间距

Answer 1

您只需将属性

flexDirection="row"

更改为

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>