如何在Material-UI Container内部添加上边距及给容器设置左右外边距？

调整内容顶部间距 #

你给Typography加marginTop的思路是可行的，如果样式没生效是因为内联style优先级不够，换成MUI官方推荐的sx属性写样式就不会被组件默认样式覆盖。如果不想修改子元素样式，也可以直接给外层Container加paddingTop撑开顶部空间，还能避免子元素外边距溢出的常见问题。
另外注意你当前给Typography设置了height: 100vh，加了顶部间距后整体高度会超出视口，建议把高度改成calc(100vh - 顶部间距值)适配视口高度。

调整容器左右外边距 #

带fixed属性的MUI Container默认是各断点下固定最大宽度、水平居中的，如果你要自定义左右边距，直接给Container加marginX（左右外边距）属性即可，也可以用paddingX设置左右内边距，或者覆盖maxWidth属性自定义容器最大宽度。

修改后的参考代码：

import React from 'react';
import { CssBaseline, Container, Typography } from '@mui/material';

export default function FixedContainer() {
  return (
    <React.Fragment>
      <CssBaseline />
      <Container 
        fixed
        sx={{
          marginX: '32px', // 自定义左右外边距，写auto则保持水平居中
          paddingTop: '122px', // 直接在容器上加顶部内边距推开内容，不需要修改子元素
          // 可自定义容器最大宽度：maxWidth: '1200px'
        }}
      >
        <Typography
          component="div"
          sx={{
            backgroundColor: "#cfe8fc",
            minHeight: "calc(100vh - 122px)", // 减去顶部内边距高度，避免超出视口
          }}
        >
          This must have a margin top not the conatainer
        </Typography>
      </Container>
    </React.Fragment>
  );
}

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