Material-Ui 风格速查表

Material-System 风格速查表

风格化系统 & 风格化的功能，来构建强大的设计系统。

Border 边框

使用边框的辅助功能，您能够快速设置元素的边框和边框圆角（border-radius）的样式。 这非常适合图像，按钮或任何其他元素。

导入名称	属性	CSS 属性	Theme key
border	border	border	borders
borderTop	borderTop	border-top	borders
borderLeft	borderLeft	border-left	borders
borderRight	borderRight	border-right	borders
borderBottom	borderBottom	border-bottom	borders
borderColor	borderColor	border-color	palette
borderRadius	borderRadius	border-radius	shape

Display 显示

使用显示（display）工具集来快速、灵敏地切换组件的显示状态等。 这样包括对一些更常见值的支持，以及一些用于在打印时控制显示的附加功能。

导入名称	属性	CSS 属性	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

Flexbox

借助一整套的响应式 flex 的小方法，实现快速地管理布局，对齐，网格栏的大小，导航，组件等等。

导入名称	属性	CSS 属性	Theme key
flexDirection	flexDirection	flex-direction	none
flexWrap	flexWrap	flex-wrap	none
justifyContent	justifyContent	justify-content	none
alignItems	alignItems	align-items	none
alignContent	alignContent	align-content	none
order	order	order	none
flex	flex	flex	none
flexGrow	flexGrow	flex-grow	none
flexShrink	flexShrink	flex-shrink	none
alignSelf	alignSelf	align-self	none

Palette 调色板

通过一些实用的颜色程序类的颜色传达意义。 这也包括了支持带悬停状态（hover states）的样式链接。

导入名称	属性	CSS 属性	Theme key
color	color	color	palette
bgcolor	bgcolor	backgroundColor	palette

Position 位置

使用这些简写的小程程序来快速配置元素的位置。

导入名称	属性	CSS 属性	Theme key
position	position	position	none
zIndex	zIndex	z-index	zIndex
top	top	top	none
right	right	right	none
bottom	bottom	bottom	none
left	left	left	none

Shadow 阴影

使用 box-shadow 工具集为元素添加或删除阴影。

导入名称	属性	CSS 属性	Theme key
boxShadow	boxShadow	box-shadow	shadows

Sizing 大小

使用设置宽和高的辅助功能，您能够轻松的将一个元素的宽度或者高度设置为相对于父级元素一样。

导入名称	属性	CSS 属性	Theme key
width	width	width	none
maxWidth	maxWidth	max-width	none
minWidth	minWidth	min-width	none
height	height	height	none
maxHeight	maxHeight	max-height	none
minHeight	minHeight	min-height	none
boxSizing	boxSizing	box-sizing	none

Spacing 间距

为了改变一个元素的外观，您可以使用一系列的简写响应式的 margin 和 padding 的辅助工具类。

导入名称	属性	CSS 属性	Theme key
spacing	m	margin	spacing
spacing	mt	margin-top	spacing
spacing	mr	margin-right	spacing
spacing	mb	margin-bottom	spacing
spacing	ml	margin-left	spacing
spacing	mx	margin-left, margin-right	spacing
spacing	my	margin-top, margin-bottom	spacing
spacing	p	padding	spacing
spacing	pt	padding-top	spacing
spacing	pr	padding-right	spacing
spacing	pb	padding-bottom	spacing
spacing	pl	padding-left	spacing
spacing	px	padding-left, padding-right	spacing
spacing	py	padding-top, padding-bottom	spacing

Typography 文字铸排

用于控制对齐（alignment），封装（wrapping），以及字体权重（weight）等等的常用文本实用辅助工具的文档和示例。

导入名称	属性	CSS 属性	Theme key
fontFamily	fontFamily	font-family	typography
fontSize	fontSize	font-size	typography
fontStyle	fontStyle	font-style	typography
fontWeight	fontWeight	font-weight	typography
letterSpacing	letterSpacing	letter-spacing	none
lineHeight	lineHeight	line-height	none
textAlign	textAlign	text-align	none

响应式标记含义

lg 一般用于大屏设备（min-width：1200px）
md 一般用于中屏设备（min-width：992px）
sm 一般用于小屏设备（min-width：768px）
xs 一用于超小型设备（max-width：768px）

ESM缩写含义: ECMAScript module