[英]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:我正在对 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),
},
}))
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.我试过
container={true}
但这没有帮助。 It seems as if the container
property gets lost in styled()
.似乎
container
属性在styled()
丢失了。 How can I fix this?我怎样才能解决这个问题? I'm at a loss.
我不知所措。
EDITH: https://codesandbox.io/s/gritty-styled-grid-7l04g伊迪丝: https ://codesandbox.io/s/gritty-styled-grid-7l04g
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
.您的
Grid
的direction
道具仅在container
道具设置为true
时才有效,因此在您的内部Grid
添加缺少的container
道具。 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
将 display 设置为flex
,并且direction
映射到flex-direction
,如果布局不是 flex 则flex-direction
没有意义:
<Grid container direction='column'
Just to add to what NearHuscarl has mentioned, this is the place where you are missing the container
prop.补充一下 NearHuscarl 提到的内容,这是您缺少
container
道具的地方。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.