reactjs - MUI v5 : Failed prop type: The prop `direction` of `Grid` can only be used together with the `container` prop

Question

我正在设计 MUI v5 Grid 样式，如下所示:

const SettingsGrid = styled(Grid)(({ theme }) => ({
    width: `calc(100% - calc(${Number(theme.spacing(2))} * 2))`,
    margin: theme.spacing(2),

    '& .MuiCard-root + .MuiTypography-subtitle1': {
        marginTop: theme.spacing(4),
    },
}))

然后，我按如下方式使用它:

<Box m={1} overflow="auto">
  <SettingsGrid
      container
      direction="row"
      justifyContent="center"
  >
      <Grid
          direction="column"
          style={{ minWidth: '35em', maxWidth: '60em' }}
      >
          <!-- ... -->
      </Grid>
    </SettingsGrid>
</Box>

现在，这会在运行时引发此控制台警告:

Failed prop type: The prop `direction` of `Grid` can only be used together with the `container` prop.

我尝试过使用 container={true} 但这没有帮助。似乎 container 属性在 styled() 中丢失了。我怎样才能解决这个问题？我很茫然。

伊迪丝:https://codesandbox.io/s/gritty-styled-grid-7l04g

Answer 1

只有当 container 属性设置为 true 时，Grid 的 direction 属性才有效，因此在内部 Grid 中添加缺少的 container 属性。在内部，容器 Grid 将显示设置为 flex，并且 direction 映射到 flex-direction，如果布局不是 Flex，flex-direction 就没有意义:

<Grid container direction='column'