跳转到内容

Hidden API

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

导入

import Hidden from '@mui/material/Hidden';
// 或
import { Hidden } from '@mui/material';
您可以通过 阅读本指南以最小化捆包大小 来了解这种差异。

Responsively hides children based on the selected implementation.

属性

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

名称类型默认值描述
childrennode
The content of the component.
implementation'css'
| 'js'
'js'
Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering.
initialWidth'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
You can use this prop when choosing the js implementation with server-side rendering.
As window.innerWidth is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use a heuristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%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。

演示项目