如何在Material UI v5中使用down实现sm及更小断点的样式？

在Material UI v5里，要给sm及以下尺寸的屏幕应用样式，你可以直接用down关键字，写法是'down.sm'。

默认情况下，单独写sm这类断点是按最小宽度生效（也就是sm及以上屏幕会应用样式），而down.sm对应的是最大宽度规则，刚好能实现“sm及更小屏幕生效”的需求。

把你的代码改成下面这样就行：

<Grid sx={{ flexDirection: { 'down.sm': 'column-reverse' } }}>
  <Grid item xs={12} sm={7}>
    <Posts />
  </Grid>
  <Grid item xs={12} sm={4}>
    <Form />
  </Grid>
</Grid>

这样设置后，只要屏幕宽度≤sm断点的默认阈值（600px），flexDirection就会变成column-reverse，和你之前用xs的效果一致，但语义上更明确表达了“针对sm及以下屏幕”的意图。

如果后续需要在更大的断点（比如md及以上）重置样式，还可以叠加设置：

<Grid sx={{ 
  flexDirection: { 
    'down.sm': 'column-reverse',
    md: 'row' 
  } 
}}>
  <Grid item xs={12} sm={7}>
    <Posts />
  </Grid>
  <Grid item xs={12} sm={4}>
    <Form />
  </Grid>
</Grid>

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