IE 11 中 Material UI Grid 的不兼容答案

【问题标题】：Incompatibility of Material UI Grid in IE 11IE 11 中 Material UI Grid 的不兼容
【发布时间】：2018-04-05 15:59:34
【问题描述】：

我正在尝试使用 Material UI 中的 Grid 组件实现以下网格布局。

我能够使用以下示例代码在 Chrome 和 Firefox 中实现此布局，但是在 IE 11 中，所有网格项重叠并且文本字段得到扩展。

<Grid container direction='column' spacing={0}> // Grid 1 (Level0)

  <Grid item xs={12}> // Grid 1 (Level1)
   <Grid container direction='row' spacing={0}>
     <Grid item xs={6}>
       Logo
     </Grid>
     <Grid item xs={6}>
       FormControl
     </Grid>
   </Grid>
  </Grid>

  <Grid item xs={12}> // Grid 2 (Level1)
    <Grid container direction='column' spacing={0}>

     <Grid item xs={12}> // Grid 1 (Level2)
      <Grid container direction='row' spacing={0}>
       <Grid item xs={12}>
         <TextField/>
       </Grid>
       <Grid item xs={12}>
        <TextField/>
       </Grid>
      </Grid>
     </Grid>

     <Grid item xs={12}> // Grid 2 (Level2)
      <Grid container direction='row' spacing={0}>
       <Grid item xs={6}>
        <TextField />
       </Grid>
       <Grid item xs={6}>
        <TextField />
       </Grid>
      </Grid>
     </Grid>
   </Grid>
 </Grid>

 <Grid item xs={12}> // Grid 3 (Level1)
  <Grid container direction='row' spacing={0}>
   <Grid item xs={6}>
    Label
   </Grid>
   <Grid item xs={6}>
    Label
   </Grid>
  </Grid>
 </Grid>

</Grid>

请让我知道我哪里出错了！

【问题讨论】：

你已经在使用 babel-polyfill 了吗？ babeljs.io/docs/usage/polyfill
@JulienD 是的，我已经安装并包含（导入）在 index.js 中。

标签： reactjs grid material-ui internet-explorer-11

【解决方案1】：

根据Material UI documentation，Material UI 支持 IE 11。

但是，您描述的网格格式问题是documented 问题，已修复。这些问题是由于 Grid 项目没有设置 flex 大小造成的。在 Chrome 中你可以只使用<Grid item>，但对于 IE，你需要显式设置 flex 大小<Grid item xs=12>。

这与你有什么关系？

在您的情况下，您的孩子 <Grid container> 组件也应该是 <Grid item> 组件。也就是说，它们应该是<Grid container item> 的形式，但它们也应该设置弹性大小<Grid container item xs=12>。

下面是一个示例 sn-p：

<Grid container> 
  <Grid item xs={12}>
   <Grid container item xs={12}>
     <Grid item xs={6}>
       Logo
     </Grid>
     <Grid item xs={6}>
       FormControl
     </Grid>
   </Grid>
  </Grid>
</Grid>

【讨论】：