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

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

2 answers

  • answered 2021-10-12 15:58 NearHuscarl

    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'
    

  • answered 2021-10-12 16:15 dglozano

    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>
    
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum