跳转到内容

Hidden API

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

导入

import Hidden from '@mui/material/Hidden';
// 或
import { Hidden } from '@mui/material';
You can learn about the difference by reading this guide on minimizing bundle size.

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

属性

原生(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
If true, screens this size and down are hidden.
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。

演示项目