如何在Material-UI的Container组件中通过Breakpoints设置不同maxWidth？

MUI v5及以上版本的Container组件原生支持给maxWidth属性传入断点对象，完全符合你要求的写法，不需要使用useStyle、也不用额外定义className。

你直接按你设想的写法使用即可：

<Container maxWidth={{xs:"lg", lg:"md"}}>
  {/* 你的页面内容 */}
</Container>

生效逻辑 #

• 当屏幕宽度在xs到lg断点区间（也就是小于lg断点对应尺寸，通常对应移动端、平板、小屏桌面端）时，Container的最大宽度使用lg对应的预设值，展示更宽的内容区域
• 当屏幕宽度大于等于lg断点尺寸时，Container的最大宽度切换为md对应的预设值，展示更窄的内容区域

如果你的项目使用的是低于v5的Material-UI版本，该响应式属性写法不原生支持，建议升级到v5及以上版本即可直接使用该特性。

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