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

I'm styling a MUI v5 Grid as follows:

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),
    },
}))

Then, I'm using it as follows:

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

This now throws this console warning at runtime:

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

I've tried with container={true} but this doesn't help. It seems as if the container property gets lost in styled(). How can I fix this? I'm at a loss.

EDITH: https://codesandbox.io/s/gritty-styled-grid-7l04g

CodePudding user response：

The direction prop of your Grid is only valid if the container prop is set to true, so add the missing container prop in your inner Grid. Internally, a container Grid has the display set to flex, and the direction is mapped to flex-direction, flex-direction is meaningless if the layout is not flex:

<Grid container direction='column'

CodePudding user response：

Just to add to what NearHuscarl has mentioned, this is the place where you are missing the container prop.


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