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

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

借助一整套的响应式 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

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

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

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

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

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

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

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

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

为了改变一个元素的外观，您可以使用一系列的简写响应式的 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`

用于控制对齐（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）