请求提供MUI v5全部可用样式简写属性完整列表

我完全懂这种找不到之前看过的文档内容的懊恼！MUI v5里这些便捷的样式简写其实属于它的系统属性（System Properties），下面整理了完整的常用简写列表，帮你快速查找：

边距（Margin）简写 #

• m：对应 CSS 属性 margin（四边统一边距）
• mt：对应 margin-top
• mb：对应 margin-bottom
• ml：对应 margin-left
• mr：对应 margin-right
• mx：同时控制 margin-left 和 margin-right（水平方向边距）
• my：同时控制 margin-top 和 margin-bottom（垂直方向边距）

内边距（Padding）简写 #

• p：对应 CSS 属性 padding（四边统一内边距）
• pt：对应 padding-top
• pb：对应 padding-bottom
• pl：对应 padding-left
• pr：对应 padding-right
• px：同时控制 padding-left 和 padding-right（水平方向内边距）
• py：同时控制 padding-top 和 padding-bottom（垂直方向内边距）

尺寸（Size）简写 #

• width/w：对应 width
• minWidth/minW：对应 min-width
• maxWidth/maxW：对应 max-width
• height/h：对应 height
• minHeight/minH：对应 min-height
• maxHeight/maxH：对应 max-height
• boxSizing：对应 box-sizing

排版（Typography）简写 #

• fontSize/fs：对应 font-size
• fontWeight/fw：对应 font-weight
• fontStyle/fst：对应 font-style
• lineHeight/lh：对应 line-height
• textAlign/ta：对应 text-align
• textDecoration/td：对应 text-decoration
• textTransform/tt：对应 text-transform

颜色与透明度简写 #

• color/c：对应 color（文字颜色）
• backgroundColor/bgcolor/bg：对应 background-color
• opacity：对应 opacity

布局与定位简写 #

• display/d：对应 display
• flexDirection/fd：对应 flex-direction
• justifyContent/jc：对应 justify-content
• alignItems/ai：对应 align-items
• alignSelf/as：对应 align-self
• flexWrap/fw：对应 flex-wrap
• flex：对应 flex
• position/pos：对应 position
• top/t：对应 top
• bottom/b：对应 bottom
• left/l：对应 left
• right/r：对应 right
• zIndex/z：对应 z-index

使用示例 #

这些简写属性的值支持多种格式：数字（对应MUI主题的spacing值）、固定单位字符串、甚至响应式对象，比如：

<Stack 
  mt={3}  // 上边距等于 theme.spacing(3)
  px={{ xs: 2, md: 4 }}  // 移动端水平内边距为2，桌面端为4
  bg="#f5f5f5"  // 背景色设为浅灰
  jc="center"  // flex主轴方向居中对齐
>
  {props.children}
</Stack>

内容的提问来源于stack exchange，提问作者Cesar Cisneros