隐藏的材质UI仍呈现元素

Question

我正在尝试有条件地隐藏材质ui组件。

我的第一个想法是，我根本不会渲染该元素（鉴于“断点”原因，我并没有完全隐藏它）...而是根据辅助UI {{1} }元素在这里：https://material-ui.com/layout/hidden/

  

这样做的好处是根本不呈现任何内容，除非   达到断点。

分数，听起来不错。我可以说Hidden元素在大于xs并且小于lg时应用，并且具有在应用时始终隐藏组件的效果。

但是，当我使用以下代码将组件包装在隐藏的元素中时：

Hidden

仅可见性似乎改变。它仍然占用屏幕空间。查看以下两个屏幕截图。您会注意到，当不包含 let withPaper = <Paper>{this.buildQuestion()}</Paper>; let withToolTip = withPaper; if (tooltip != null) { withToolTip = <Tooltip title={tooltip} enterDelay={500} leaveDelay={200}>{withPaper}</Tooltip> } let withHidden = withToolTip; if (this.props.hidden) { withHidden = <Hidden xsUp xlDown>{withToolTip}</Hidden> } return withHidden; 时，将显示“站号”文本字段，而在包含Hidden时，该字段不可见...但是，该组件仍在material-ui {{1 }}。

（忽略混乱的垂直对齐方式） 站号上没有Grid组件：

使用Hidden组件：

根据文档，这似乎不是正常/正确的行为。

如何使包装好的组件完全不影响屏幕上的任何内容（希望同时仍然能够访问其值和道具？）？

Answer 1

原来我的组件位于一个网格项目（https://material-ui.com/layout/grid/）中，因此，虽然“文本字段”实际上并未呈现，但是却显示了一个空的网格项目。