当 Material Ui 网格包含在 div 元素中时布局中断 [英] Layout breaks when Material Ui grid wrapped in div element

问题描述

我使用 Material Ui Grid 元素构建了响应式仪表板.并且其中一个包含在 div 元素中的网格项目会破坏布局.

I have responsive dashboard build with Material Ui Grid elements. And one of the grid items wrapped in div element which breaks the layout.

这里是带有 div 元素的游乐场 - https://codesandbox.io/s/basicgrid-material-demo-forked-pkkil?file=/demo.js

Here is playground with div element - https://codesandbox.io/s/basicgrid-material-demo-forked-pkkil?file=/demo.js

这里是没有 div 元素的游乐场，这应该是 div - https://codesandbox.io/s/b1wsf?file=/demo.js

Here is playground without div element, and this how it should be with div - https://codesandbox.io/s/b1wsf?file=/demo.js

div 元素不能被替换或删除...

div element cannot be replaced or removed...

有什么建议吗?

推荐答案

Mui Grid 组件的设计方式是 Grid container 应该始终是 Grid 的父级项目道具.Grid container 正在克隆 Grid item 并向其传递不基于反应上下文的附加配置.

Mui Grid component is designed the way that Grid container should always be parent of Grid item prop. Grid container is cloning Grid item and passing to it additional configuration it is not based on react context.

让这个工作的唯一明智的方法是删除 div.

Only sane way to get this working is to remove div.

或者为此提供自定义 css 样式以模拟网格间距.

Or provide custom css styles to this to emulate grid spacing.

这篇关于当 Material Ui 网格包含在 div 元素中时布局中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！