时间戳

首页 > 解决方案 > MUI v5：失败的道具类型：`Grid`的道具`direction`只能与`container`道具一起使用

reactjs - MUI v5：失败的道具类型：`Grid`的道具`direction`只能与`container`道具一起使用

问题描述

我正在设计一个 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

标签： reactjsmaterial-uistyled-components

解决方案

你的direction道具只有在道具设置Grid为时才有效，所以在你的内部添加缺少的道具。在内部，如果布局不是 flex ，容器的 display 设置为，并且映射到，是没有意义的：containertruecontainerGridGridflexdirectionflex-directionflex-direction

<Grid container direction='column'

推荐阅读