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）
