Button 组件上忽略隐藏属性

Question

我试图Button通过添加hidden属性来隐藏 Material-UI 组件，但该属性似乎被忽略了。我已经hidden在其他 Material-UI 组件上使用了该属性，例如Typography，Grid并且Box它工作正常。下面是我的代码的简化片段。单击此处在 CodeSandbox 上试用。

<Typography hidden={loading}>
  Works. This text is not displayed when `loading` is truthy.
</Typography>
<Button hidden={loading}>
  Doesn't work. This Button is still there!
</Button >

Answer 1

TLDR：不要使用该hidden属性。使用类似的条件渲染{loading && <Component/>}或类似的样式<Component style={{ display: loading ? 'none' : undefined }} />

首先，该hidden属性与 Material UI 或 React 无关，而是 Web 标准中的默认 HTML 属性。其次，如果样式应用于同一元素，则该hidden属性将被覆盖。display: ...这些样式是内联的还是来自 CSS 并不重要。因此，hidden任何碰巧设置该属性的 Material-UI 组件都会“忽略”该属性display。

您可以在官方文档中的任何示例上尝试此操作。例如，使用CodeSandbox，您可以看到、和 上hidden的工作，但忽略、和上的工作。CardCardContentTypographyCardActionAreaCardMediaCardActionsButton

考虑到上述情况，最好避免使用该hidden属性，因为它的行为在每个组件的基础上都不同。此外，如果在 Material UI 的任何下一版本中将组件更新为display内部使用，它将更改该组件的语义hidden并破坏代码库中的内容。