Hidden API
API documentation for the React Hidden component. Learn about the available props and the CSS API.
Import
import Hidden from '@mui/material/Hidden';
// or
import { Hidden } from '@mui/material';Responsively hides children based on the selected implementation.
Props
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | 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 | |
| lgDown | bool | false | If true, screens this size and down are hidden. |
| lgUp | bool | false | If true, screens this size and up are hidden. |
| mdDown | bool | false | If true, screens this size and down are hidden. |
| mdUp | bool | false | 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). | |
| smDown | bool | false | If true, screens this size and down are hidden. |
| smUp | bool | false | If true, screens this size and up are hidden. |
| xlDown | bool | false | If true, screens this size and down are hidden. |
| xlUp | bool | false | If true, screens this size and up are hidden. |
| xsDown | bool | false | If true, screens this size and down are hidden. |
| xsUp | bool | false | If true, screens this size and up are hidden. |
The component cannot hold a ref.