跳转到内容

Hidden API

想要学习更多组件属性和 CSS API,可以查阅 React Hidden 组件的 API 文档。

导入

import Hidden from '@mui/material/Hidden';
// 或
import { Hidden } from '@mui/material';
你可以阅读这个关于最小化捆绑包的指南以了解以上二者的差异。

根据选定的实现方式隐藏子控件。

属性

原生(Native) 组件的属性也是可用的。

名称类型默认值描述
childrennode
组件的内容
implementation'css'
| 'js'
'js'
指定要使用的实现方式。 'js' 为默认值, 'css' 在服务器端渲染的情况下表现的更好。
initialWidth'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
您可以在服务器端渲染中选择 js 实现时使用此prop。
由于 window.innerWidh 在服务端不可用,因此我们默认在第一次挂载时渲染一个空组件。 您可能想要使用浏览器宽度来预估屏幕宽度。
例如,可以使用User-Agent或客户端提示 https://caniuse.com/#search=客户端%20hint
lgDownboolfalse
If true, screens this size and down are hidden.
lgUpboolfalse
If true, screens this size and up are hidden.
mdDownboolfalse
If true, screens this size and down are hidden.
mdUpboolfalse
If true, screens this size and up are hidden.
only'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| Array<'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'>
Hide the given breakpoint(s).
smDownboolfalse
If true, screens this size and down are hidden.
smUpboolfalse
If true, screens this size and up are hidden.
xlDownboolfalse
如果 true, 屏幕大小和下面都将被隐藏。
xlUpboolfalse
If true, screens this size and up are hidden.
xsDownboolfalse
If true, screens this size and down are hidden.
xsUpboolfalse
If true, screens this size and up are hidden.

组件无法持有 ref。

演示项目