import Hidden from '@mui/material/Hidden';
// or
import { Hidden } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.
Responsively hides children based on the selected implementation.
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, component is hidden on screens below (but not including) this size. |
| lgUp | bool | false | If true, component is hidden on screens this size and above. |
| mdDown | bool | false | If true, component is hidden on screens below (but not including) this size. |
| mdUp | bool | false | If true, component is hidden on screens this size and above. |
| only | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | Array<‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’> | - | Hide the given breakpoint(s). |
| smDown | bool | false | If true, component is hidden on screens below (but not including) this size. |
| smUp | bool | false | If true, component is hidden on screens this size and above. |
| xlDown | bool | false | If true, component is hidden on screens below (but not including) this size. |
| xlUp | bool | false | If true, component is hidden on screens this size and above. |
| xsDown | bool | false | If true, component is hidden on screens below (but not including) this size. |
| xsUp | bool | false | If true, component is hidden on screens this size and above. |
The component cannot hold a ref.
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.