Material-Ui 風格速查表
阿新 • • 發佈：2021-06-25
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）