Display
Quickly and responsively toggle the display, overflow, visibility, and more with the display utilities.
Examples
Inline
inline
inline
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">'inline'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>inline<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">'inline'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>inline<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
Block
blockblock
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>span<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">'block'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>block<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>span<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">'block'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>block<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
Hiding elements
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.
| Screen Size | Class |
|---|---|
| Hidden on all | sx={{ display: 'none' }} |
| Hidden only on xs | sx={{ display: { xs: 'none', sm: 'block' } }} |
| Hidden only on sm | sx={{ display: { xs: 'block', sm: 'none', md: 'block' } }} |
| Hidden only on md | sx={{ display: { xs: 'block', md: 'none', lg: 'block' } }} |
| Hidden only on lg | sx={{ display: { xs: 'block', lg: 'none', xl: 'block' } }} |
| Hidden only on xl | sx={{ display: { xs: 'block', xl: 'none' } }} |
| Visible only on xs | sx={{ display: { xs: 'block', sm: 'none' } }} |
| Visible only on sm | sx={{ display: { xs: 'none', sm: 'block', md: 'none' } }} |
| Visible only on md | sx={{ display: { xs: 'none', md: 'block', lg: 'none' } }} |
| Visible only on lg | sx={{ display: { xs: 'none', lg: 'block', xl: 'none' } }} |
| Visible only on xl | sx={{ display: { xs: 'none', xl: 'block' } }} |
hide on screens wider than md
hide on screens smaller than md
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">xs</span><span class="token operator">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span> <span class="token literal-property property">md</span><span class="token operator">:</span> <span class="token string">'none'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
hide on screens wider than md
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">xs</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token literal-property property">md</span><span class="token operator">:</span> <span class="token string">'block'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
hide on screens smaller than md
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
Display in print
Screen Only (Hide on print only)
Print Only (Hide on screen only)
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span> <span class="token literal-property property">displayPrint</span><span class="token operator">:</span> <span class="token string">'none'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Screen <span class="token function">Only</span> <span class="token punctuation">(</span>Hide on print only<span class="token punctuation">)</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token literal-property property">displayPrint</span><span class="token operator">:</span> <span class="token string">'block'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Print <span class="token function">Only</span> <span class="token punctuation">(</span>Hide on screen only<span class="token punctuation">)</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
Overflow
Not scrollable, overflow is hidden
Try scrolling this overflow auto box
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">overflow</span><span class="token operator">:</span> <span class="token string">'hidden'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Not scrollable<span class="token punctuation">,</span> overflow is hidden
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">overflow</span><span class="token operator">:</span> <span class="token string">'auto'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Try scrolling <span class="token keyword">this</span> overflow auto box
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
Text overflow
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">textOverflow</span><span class="token operator">:</span> <span class="token string">'clip'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Lorem Ipsum is simply dummy text
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">textOverflow</span><span class="token operator">:</span> <span class="token string">'ellipsis'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Lorem Ipsum is simply dummy text
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
Visibility
Visible containerInvisible container
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">visibility</span><span class="token operator">:</span> <span class="token string">'visible'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Visible container
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">visibility</span><span class="token operator">:</span> <span class="token string">'hidden'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Invisible container
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
White space
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">whiteSpace</span><span class="token operator">:</span> <span class="token string">'nowrap'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s<span class="token punctuation">.</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">component</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">whiteSpace</span><span class="token operator">:</span> <span class="token string">'normal'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s<span class="token punctuation">.</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
API
<span class="token keyword">import</span> <span class="token punctuation">{</span> display <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/system'</span><span class="token punctuation">;</span>
| Import name | Prop | CSS property | Theme key |
|---|---|---|---|
displayPrint |
displayPrint |
display |
none |
displayRaw |
display |
display |
none |
overflow |
overflow |
overflow |
none |
textOverflow |
textOverflow |
text-overflow |
none |
visibility |
visibility |
visibility |
none |
whiteSpace |
whiteSpace |
white-space |
none |