跳转到内容

Hidden API

API documentation for the React Hidden component. Learn about the available props, and the CSS API.

Import

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

Responsively hides children based on the selected implementation.

Props

NameTypeDefaultDescription
childrennodeThe 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
lgDownboolfalseIf true, screens this size and down are hidden.
lgUpboolfalseIf true, screens this size and up are hidden.
mdDownboolfalseIf true, screens this size and down are hidden.
mdUpboolfalseIf 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).
smDownboolfalseIf true, screens this size and down are hidden.
smUpboolfalseIf true, screens this size and up are hidden.
xlDownboolfalseIf true, screens this size and down are hidden.
xlUpboolfalseIf true, screens this size and up are hidden.
xsDownboolfalseIf true, screens this size and down are hidden.
xsUpboolfalseIf true, screens this size and up are hidden.

The component cannot hold a ref.
Any other props supplied will be provided to the root element (native element).

Demos