显示

使用显示工具，快速响应地切换显示、溢出、可见性等。

示例

行内

inline

<Box component="div" sx={{ display: 'inline' }}>inline</Box>
<Box component="div" sx={{ display: 'inline' }}>inline</Box>

块

blockblock

<Box component="span" sx={{ display: 'block' }}>block</Box>
<Box component="span" sx={{ display: 'block' }}>block</Box>

隐藏元素

为了更快速地进行移动优先的开发，请使用响应式显示类来根据设备显示和隐藏元素。避免创建同一网站的完全不同版本，而是针对每个屏幕尺寸响应式地隐藏元素。

屏幕尺寸	类名
全部隐藏	`sx={{ display: 'none' }}`
仅在 xs 上隐藏	`sx={{ display: { xs: 'none', sm: 'block' } }}`
仅在 sm 上隐藏	`sx={{ display: { xs: 'block', sm: 'none', md: 'block' } }}`
仅在 md 上隐藏	`sx={{ display: { xs: 'block', md: 'none', lg: 'block' } }}`
仅在 lg 上隐藏	`sx={{ display: { xs: 'block', lg: 'none', xl: 'block' } }}`
仅在 xl 上隐藏	`sx={{ display: { xs: 'block', xl: 'none' } }}`
仅在 xs 上可见	`sx={{ display: { xs: 'block', sm: 'none' } }}`
仅在 sm 上可见	`sx={{ display: { xs: 'none', sm: 'block', md: 'none' } }}`
仅在 md 上可见	`sx={{ display: { xs: 'none', md: 'block', lg: 'none' } }}`
仅在 lg 上可见	`sx={{ display: { xs: 'none', lg: 'block', xl: 'none' } }}`
仅在 xl 上可见	`sx={{ display: { xs: 'none', xl: 'block' } }}`

在 md 以上屏幕宽度时隐藏

在 md 以下屏幕宽度时隐藏

<Box sx={{ display: { xs: 'block', md: 'none' }}}>
  hide on screens wider than md
</Box>
<Box sx={{ display: { xs: 'none', md: 'block' }}}>
  hide on screens smaller than md
</Box>

打印时显示

仅屏幕显示（仅在打印时隐藏）

仅打印显示（仅在屏幕上隐藏）

<Box sx={{ display: 'block', displayPrint: 'none' }}>
  Screen Only (Hide on print only)
</Box>
<Box sx={{ display: 'none', displayPrint: 'block' }}>
  Print Only (Hide on screen only)
</Box>

溢出

不可滚动，溢出已隐藏

尝试滚动此 overflow auto 框

<Box component="div" sx={{ overflow: 'hidden' }}>
  Not scrollable, overflow is hidden
</Box>
<Box component="div" sx={{ overflow: 'auto' }}>
  Try scrolling this overflow auto box
</Box>

文本溢出

Lorem Ipsum 只是示例文本

<Box component="div" sx={{ textOverflow: 'clip' }}>
  Lorem Ipsum is simply dummy text
</Box>
<Box component="div" sx={{ textOverflow: 'ellipsis' }}>
  Lorem Ipsum is simply dummy text
</Box>

可见性

可见容器不可见容器

<Box component="div" sx={{ visibility: 'visible' }}>
  Visible container
</Box>
<Box component="div" sx={{ visibility: 'hidden' }}>
  Invisible container
</Box>

空白符

自 1500 年代以来，Lorem Ipsum 一直是行业标准的示例文本。

<Box component="div" sx={{ whiteSpace: 'nowrap' }}>
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</Box>
<Box component="div" sx={{ whiteSpace: 'normal' }}>
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</Box>

API

import { display } from '@mui/system';

导入名称	Prop	CSS 属性	主题键
`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